Construcción de Pantalla de Confirmación de Email Enviado

¡Hola! El problema del final del video se soluciona volviendo a darle en el icono para ver de manera “Responsive” (El icono al lado izquiero del inspector donde dice “Elemento”)

solo es cuestión de darle una vez y si sale el scroll lateral solo denle otra vez (esto le quitará la vista mobile) y le vuelven a dar para volver a activarla y ya quedaría 😄

Mi aporte con otro diseño

Hola siquieres evitar tener que escribir <div class=“taat”> </div>
Con visual Estudio Code lo puedes lograr escribiendo solo
.email-image y das enter y ya se te pone solo
Intentalo y dime si te funciono 😃

Un tip útil que aprendí en el curso de Resposive desing en cuanto a figma es que puedes seleccionar y copiar los textos directamente en el lado derecho del diseño de esa forma optimizas tiempo al copiar y aseguras que queden igual 😄

Creo que una de las cosas más importantes para desarrollar como frontend developer es afinar el ojo para que al ver los diseños que te piden, ya en la mente vas estructurando e identificando que elementos y componentes vas a necesitar crear

Les recomiendo esta forma para hacer contenedores responsive, el truco esta en el max-width y el width

.form-container {
      display: grid;
      justify-items: center;
      max-width: 400px;
      width: 90%;
    }

Antes de tomar este curso ya había visto el definitivo y practico de HTML y CSS y luego el de Responsive Desing son excelentes si quieres aprender mas y me han ayudado mucho para este curso, estoy creando el proyecto utilizando un solo archivo de CSS aparte como reto personal, es complejo a veces el tema de nombrar correctamente las clases para rehusar el código que es fundamental, les comparto mi repositorio en github donde estaré subiendo todo el curso

La profe siempre con una sonrisa ❤️

Hola a todos, Noto que Stefany transcribe los textos ya que en el diseño entregado no permite copiar y pegar. esto podria ser algo engorroso cuando tengamos paginas com mucho mas contenido escrito. Afortunadamente como los diseños estan hechos en figma lo que se debe hacer es lo siguiente:

1. Logearse o crear una cuenta en figma como se ve en la imagen
   

   

2. Sobre el diseño en el nombre del archivo en la opcion desplegable seleccionar la opcion (Open in Editor) como se ve en la imagen
   

   

3. Finalmalmente una vez abra el diseño en el editor podemos ubicarnos en cada elemento y compiar el texto, como se ve en la imagen
   

   

Espero este tip les funcione

Saludos

No cabe duda que siempre se puede aprender algo nuevo. 😃

Comparto mi resultado:

Traté de armarlo solo antes de ver el video, hubieron cosas que fueron surgiendo y tratando de seguir un razonamiento según lo viso y lo que fui encontrando de info (en su mayoría en ingles) quedó bastante bien… luego observé la clase para pulir detalles.
Muy satisfactorio el resultado y el tiempo dedicado 😃

Proceso de clase email enviado, lo que hicimos en esta clase:

Así quedo mi pantalla de Email, la estoy construyendo en base a una marca que creamos con mi familia durante la pandemia (ya no trabajamos en ella pero le teníamos mucho cariño)

Me encanta este curso

Hice algunos ajustes personalziados:

Hola, quiero comentar que Visual Studio tiene una extensión que se llama “live server”, esta extensión ayuda a que el proyecto html se actualice en tiempo real una ves se guarden los avances en Visual Studiio.
Solo tienen que abrir el archivo html a traves de VS, y en la parte inferior le presionan donde dice go-live

Les recomiendo hacer primero el responsive. Y de ahí ir escalando a las otras pantallas. Yo estoy usando una para mobile

@media (max-width: 640px) {
//
} 

y lo demás sin query me sirve para todas las pantaallas. Y me está quedando bien. Nota: Las querys tienen que ir al final, en orden descendiente.

consejo para los que estamos iniciando no hagan lo de copiar y pegar es mejor hacer nuevamente nos hacer practicar y entender mas que hacemos y porque lo hacemos.

Es bueno que a las imagenes siempre le coloquen el atributo width y height con valores definidos ya que si no van a penalizar el sitio en el performance. Por ejemplo:

Esto se soluciona con el atributo height y width por valores explícitos:

<figure class="generic-image">
   <img
      class="generic-image__picture"
      src="./assets/icons/email.svg"
      alt="ícono de un email"
      loading="eager"
      width="150"
      height="31"
   />
</figure>

Por otro lado, el atributo loading funciona para mejorar el performance también al realizar lazy loading de las imágenes.

jejejej fuy capaz 😎 muchos errores y despues ya todo me cuadro, que gratificante puede llegar a ser.

Otra solución muy habitual para no corregir la regla de form-container, se encapsula el div que se desea centrar (email-image) en otro div el cual se le otorga el 100% del width y se le centra el contenido, es decir el div que contiene la imagen
HTML:

<div class="email">
  <div class="email-image">
     <img src="./icons/email.svg" alt="email">
   </div>
</div>

CSS

.email{
  width: 100%;
  display: flex;
  justify-content: center;
}

Así quedo mi diseño del email enviado.

Me esta gustando este curso

como no distinguia mucho el circulo le puse un border

Al entender la reutilización de CSS en adelante para sass es de mucha ayuda, se puede simplificar mucho, pero la base está aquí

Yo voy aprovechando las clases para modificar sobre la marcha y hacer un proyecto personal.

cada vez entiendo mas, gracias profe

Soy Novato, voy a la par de dos rutas con otros temas que he visto, pero creo que el curso, tiene algo mal y primero usar solo div, no es buena practica, segundo los estilos los están cargando todos dentro del html, cuando se deberia crear una carpeta css/style.css etc!

Otra pantalla más terminada! 😄
Les comparto mi código en GitHub por si le sirve a alguien: https://github.com/iJCode1/frontend_practico_platzi
.
Resultado:

muy bueno, siempre se aprende algo nuevo

Mi diseño, no logre hacer la sombra gris pero pronto lo aprendere en esta clases!

hice el diseño antes del video para ponerme a prueba 😄

Mi modificación :

Ahí va:

Yo tenía el error de que ponía porcentajes a los contenedores hijos para que me centrara el contendido supuestamente, pero en vez de ello me lo alineaba a la izquierda…entonces vi que la prof agregaba ello en pixeles y si se centraba. Más lo hacia para el responsive como los contenedores padres pero toca manejarlos manualmente con px 😅

.

SI, a veces pasa eso con el inspector. Pero revisando el código, todo estaba ok!!! Solo es cuestión de cerrar y volver a abrir y listo. 👍🏻

al inicio de la clase me pareció intimidante, pero intenté trabajar el diseño, y la experiencia fue mucho mejor, la frustración es natural, pero intentar e intentar es la mejor herramienta que podemos tener.

una excelente clase, muchas herramientas super cheveres para aprender a profundidad

.

Hice mi versión antes de ver el video, traté de hacerlo con el nav que se muestra al inicio

Me gustan mucho estas clases en cada una se aprende algo nuevo y se refuerzan tematicas… ademas de los aportes que hacen los compañeros…Es de considerar ya teniendo las bases de cada clase anterior intentar desarrollar solo el contenido de la clase actual antes de verla… Y aunque por este tipo de proyecto podemos reutilizar lineas, para adquirir las habilidades es mejor escribir nuevamente cada una.

El problema no es por el navegador, es debido al zoom que tenias en las herramientas de dispositivo, estaba en un 65%
haciendo que exista un scroll

Para ver mejor el responsive en diferentes pantallas hay una app que se llama responsibely [https://responsively.app/]

Como me quedó mi diseño de esta clase:

Mi código:

Me gustan estas clases practicas, intentemos escribir el código sin copiar para adquirir memoria de recordación respecto a los elementos y saber en qué contextos usarlos

El ejercicio de la clase 2 😃 😃

Estos son mis apuntes de esta clase:
*Puedes utilizar la estructura HTML y CSS de la anterior clase para agilizar su desarrollo.
Para escribir el parrafo anterior considerar las etiquetas p, span y a.
!! Faltaría centrar adecuadamente la imagen.

Con display:flex; justify-content: center; y align-items: center; podrás poner un div encima del otro, alinear los items y centrar una imagen encima de la otra.

Con form-container justify-items; center; para centrar todo lo que contiene esa clase.

Genial!

Que excelencias todas las Clases de Estefi, me encantan sus cursos, además de todo lo que aprendo con ella, me encanta su dulzura para explicar y todo el material que siempre brinda en los cursos. GRACIASS

Hola compañeros les comparto los Breakpoints recomendados para las distintas pantallas:

/* Mobile */
@media (max-width: 480px) {
//styles
}

/* Extra small devices */ 
@media (min-width: 481px) and (max-width: 767px) {
//styles
}

/* Small tablets */
@media (min-width: 768px) and (max-width: 991px) {
//styles
}

/* Large tablets/laptops */ 
@media (min-width: 992px) and (max-width: 1199px) {
//styles
}

/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px) {
//styles
}

/* Extra large screens */ 
@media (min-width: 1920px) {
//styles
} 

CSS ahora me permite escribir los estilos como si fuese SASS

.email-sent{
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;

  .form-container{
    display: grid;
    grid-template-rows: auto 1fr;

    .header{
      display: grid;
      place-items: center;

      .logo{
        width: 100px;
        margin-bottom: 50px;
      }

      .title{
        font-size: var(--lg);
      }

      .subtitle{
        color: var(--very-light-pink);
        font-size: var(--md);
        font-weight: 300;
        margin-bottom: 40px;
      }
    }

    .email-image{
      width: 132px;
      height: 132px;
      border-radius: 50%;
      background-color: var(--text-input-field);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;

      & img{
        width: 80px;
      }
    }

    .resend{
      font-size: var(--sm);

      & span{
        color: var(--very-light-pink);
      }

      & a{
        color: var(--hospital-blue);
        text-decoration: none;
      }
    }
  }
}

**Les dejo mis pequeños cambios en el diseño: **

agregar icono de email com un div y una etiqueta img

Copiar el código para usar los elementos que necesitamos

Copiar el código para usar los elementos que necesitamos

Amazing!

Eso del Responsive Design ha de ser mucha talacha a la hora de desarrollar una aplicacion grande…

Excelente claseeeeeee, al fin uno se va adaptando

Excelentes clases!

Excelente clase

Mi aporte

Hola, compañeros yo estoy trabajando en cada módulo de html con su respectivo archivo de css, y solo necesitan crear un archivo con las variables del color y medidas y a medida que crean un nuevo archivo con su hoja de estilos respectivamente solo las importan los archivos y si quieren utilizar una clase ya construida previamente solo lo ponen en su elemente de html

.

.

.

Trate de hacer este por mi cuent antes de ver la clase. dejo el como lo hice.

**Codigo HTML **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--Links Fuentes-->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
      <!--Links Fuentes-->
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="emailSent">
        <div class="container">
            <img src="../logos/logo_yard_sale.svg" alt="/" class="logo">
            <h1 class="title">Email has been sent</h1>
            <p class="subtitle">
                Please check your inbox for instructions on how to reset  the password
            </p>
            <div class="letterlogocontainer">
                <img src="../icons/email.svg" alt="/" class="logoLetter">
            </div>
            <input type="button" name="login-button" id="login-button" value="Login">
            <div class="container-bottom">
                <p id="didnt">didn't receive the email?</p>
                <p id="resend">Resend</p>
            </div>
        </div>
    </section>
</body>
</html>

Código CSS

:root {
    --very-light-pink: #c7c7c7;
    --text-input-field: #f7f7f7;
    --hospital-green: #ACD9B2;
    --white: #ffffff;
    --black: #000000;
    --sm: 14px;
    --md: 16px;
    --lg: 18px;
}
body {
    font-family:'Quicksand', sans-serif;
    margin: 0;
}
.emailSent {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
}
.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 300px;
}
.logo {
    width: 150px;
    margin-bottom: 30px;
    justify-self: center;
    display: none;
}
.title {
    font-size: var(--lg);
    margin-bottom: 4px;
    text-align: center;
}
.subtitle {
    font-size: var(--md);
    color: var(--very-light-pink);
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}
.letterlogocontainer {
    display: flex;
    justify-self: center;
    width: 125px;
    height: 125px;
    background-color: var(--text-input-field);
    justify-content: center;
    align-items: center;
    border-radius: 62.5px;
    margin-bottom: 22.5px;
    margin-top: 22.5px;
}
.logoLetter {
    width: 90px;
    height: 58px;
}
#login-button {
    width: 100%;
    height: 50px;
    font-size: medium;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--hospital-green);
    color: var(--white);
    border: none;
    border-radius: 8px;
}
.container-bottom {
    display: flex;
    justify-content: center;
    margin: 0;
    font-size: var(--sm);
}
.container-bottom #didnt {
    padding-right: 4px;
    color: var(--very-light-pink);
}
.container-bottom #resend {
    font-weight:bold;
    color: #ACD9B2;
    cursor: pointer;
}
@media (max-width: 640px){
    .logo {
        display: block;
    }
}

https://www.primefaces.org/primeflex/
Comparto este link donde viene informacion de maquetacion de Html y CSS.
😁

Aquí no se menciona que la función var() puede tener un fallback (valor de respaldo).
Esto es en caso de algun typo con la variable o que la variable no este definida.

background-color: var(--text-input-field,  #F7F7F7);

Con la clase anterior me dio las bases para hacer esta esta nueva pantalla sin ver el video, me di cuenta que el resultado fue el mismo, nomas en la parte del resend email, yo use un div y un <p> que en css puse como bold, sin embargo el resultado fue el mismo.

Tener en cuenta bien donde están poniendo los diferentes elementos que permiten estilizar, ya que por error en mi caso el margin bottom del email image lo puse en .email-image img, lo cual me genero fue un corrimiento de la foto, mas no de la caja que la contenia, se va aprendido con estos errores.

Me encanta el resultado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        :root{
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD982;
        }

        body{
            font-family: 'Quicksand', sans-serif;
        }
        .login{
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
        }
        .form-container{
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
            justify-items: center;
        }
        .logo{
            width: 150px;
            margin-bottom: 48px;
            justify-self: center;
            display: none;
        }
        .tittle{
            font-size: var(--lg);
            margin-bottom: 12px;
            text-align: center;
        }
        .subtittle{
            color: var(--very-light-pink);
            font-size: var(--md);
            font-weight: 300;
            margin-top: 0;
            margin-bottom: 32px;
            text-align: center;
        }
        .email-image {
            width: 132px;
            height: 132px;
            border-radius: 50%;
            background-color: var(--text-input-field);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
        }
        .email-image img{
            width: 80px;
        }
        .resend{
            font-size: var(--sm);
        }
        .resend span {
            color: var(--very-light-pink);
        }
        .resend a{
            color: var(--hospital-green);
            text-decoration: none;
        }
        .primary-button{
            background-color: var(--hospital-green);
            border-radius: 8px;
            border: none;
            color: var(--white);
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
            height: 50px;
        }
        .login-button{
            margin-top: 14px;
            margin-bottom: 30px;
        }
        @media (max-width: 640px){
            .logo{
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form container">
            <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

            <h1 class="tittle">Email has been sent!</h1>
            <p class="subtittle">Please check your inbox for instructions on how to reset the password</p>

            <div class="email-image">
                <img src="./icons/email.svg" alt="email">
            </div>

            <button class="primary-button login-button">Login</button>

            <p class="resend">
                <span>Didn't receive the email?</span>
                <a href="/">Resend</a>
            </p>
            </div>
        </div>
    </div>
</body>
</html> 

Apuntes de este curso en Notion

.email-image img se lee como la imagen que está dentro de email-image

Yo tuve que cambiar en la clase primary-button el width al 50% por que en 100% me cubria todo el navegador, tanto en responsive, como en escritorio
no pude colocar la imagen por que desde ubuntu arrastro la imgen y me dice que es invalida, si alguien sabe como subir imagenes desde ubuntu

experimentando con colores

Estuve intentado figma y sketch para evaluar comprar un plan… Hasta que me dí cuenta que pago una suscripción a adobe, y tengo XD para empezar a dibujar sitios sin parar!!!

Yo estoy probando algo, primero hago estilizo por mi cuenta y luego de tenerlo super bien me pongo a ver el video para ver cómo lo hace la teacher y aprender algún atributo que tal vez no sabía 😄.

yeyeeiiii, ahí va Diciembre:

RESUMEN de Técnicas nuevas que he aprendido en el curso:

Email enviado 7/22

Con razón nunca me salen las imagenes bien centradas (min 6:40)

display: flex;
justify-content: center;
align-items: center;

En el min 9:08 busco la clase .form-container presionando CTRL + F y también yo siempre me equivocaba al poner justify-content y se debe usar el justify-items

Parecerán repetidas varias cosas en la clase, pero ayuda mucho a repasar para aprender mejor. Yo repito todo el código desde cero también para reforzar lo aprendido.

Me parece que el problema del vídeo es porque en ocasiones sucede un tipo bug con el inspector o el navegador, porque a mi no me paso ese “overflow”, a veces yo lo he solucionado recargando toda la pagina con las teclas ctrl+shift+r en ocasiones he eliminado todo el historial y también abrir la pagina en una pestaña de incógnito, ojala les sirva esto que les escribo.

Por ac’a avanzando

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login_users.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">

    <title>Login Users</title>
</head>
<body>
    <div class="login">
        <div class="form_container">
            <img class="logo" src="./Platzi_YardSale_Logos/logo_yard_sale.svg" alt="logo">
            <h3>Email has been sent!</h3>
            <p>Please check your inbox for instructions on how to reset the password</p>
            <div>
                <img class="mail" src="./Platzi_YardSale_Icons/email.svg" alt="mail">
            </div>
            

            <form action="/">
                <input class="button_login" type="submit" value="Login" >
                <p>Didn't receive the email?<a href="#"> Resend</a></p>
            </form>
            
        </div>

    </div>
</body>
</html>

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Quicksand’, sans-serif;
}
:root{
–white: #ffffff;
–black: #000000;
–very-light-pink:#c7c7c7;
–text-input-field:#f7f7f7;
–hospital-green:#acd9b2;

}
.login{
display: grid;
place-items: center;
width: 100%;
height: 100vh;
}

.form_container{
display: flex;
flex-direction: column;
align-items: flex-start;
margin: auto 20%;

}
.form_container h3, p, input{
margin: 1rem 0;
}
.form_container img, h3, p, div, img{
display: flex;
align-self: center;
text-align: center;
justify-content: center;
}
.logo{
width: 10rem;
}
.form_container div{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: var(–text-input-field);
}
.mail{
width: 6rem;
}
form{
display: flex;
flex-direction: column;
width: 100%;
margin: 20px 0;
}
.button_login{
background-color: var(–hospital-green);
border: 0;
border-radius: 10px;
padding: 0.5rem;
margin: 0.5rem 0;
color: var(–white);
}
form p, a{
font-size:small;
}
form a{
text-decoration: none;
color: var(–hospital-green);
}
@media (max-width:800px){
.login{
display: flex;
justify-content: center;
width: 100%;
height: 100vh;

}
.form_container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

}```

Resultado de la clase

Completado XD

Asi construí esta pantalla de email, no me quedó tan semántico como a la prof pero lo hice sin mirar la clase para ver que tanto podia poder en practica (tardé medio día).

Mi resultado.

He elaborado una presentación con el paso a paso de la presente clase, si te interesa puedes descargarlo totalmente gratis aquí:

https://www.linkedin.com/posts/raulsanchezrodriguez-frontend-backend-developer_presentación-raúl-sánchez-htmlcss-activity-6927390202923528192-vIkC?utm_source=linkedin_share&utm_medium=member_desktop_web

Me encantaaaaa como va quedando💚💚💚

Segun mi prueba y error, solo se pueden centrar div dentro de otros div, porque estaba usando Display: grid; para centrar un span dentro de un div (obvio el display grid estaba en el div) pero no me funcionaba, sin embargo, cuando meti ese span dentro de un div, si funcionó

No soy experto pero creo que cuando usa resend en el style, tendria que ordenarlo mejor poniendolo ultimo de todo y no abajo de primary-button. saludos

si ella copia y pega porque yo no🙈🙈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>

 :root {
      --white: #FFFFFF;
      --black: #000000;
      --very-light-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
        body{
            margin: 0;
        }

        .login{
             width:100%;
             height:100vh;
             display: grid;
             place-items: center;

        }
        .form-container{
          display:grid;
          grid-template-rows:auto 1fr 
          auto;
          width:300;
          justify-items: center;

        }
        .logo{

         width: 150px;
         margin-bottom: 48px;
         justify-self: center;

        }
        .title{
        font-size:var(--lg);
        margin-bottom: 12px;
        text-align: center;

        }
        .subtitle{

            color:var(--very-light-pink);
            font-size:var(--md);
            font-weight: 300;
            margin-top: 0;
            margin-bottom:32px;
            text-align: center;
        }
        

        .primary-button{

            background-color: var(--hospital-green);
            border-radius: 8px;
            border: none;
            color:var(--white);
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
            height: 50px;

        }
        .login-button{
            margin-top: 14px;
            margin-bottom: 30px;

        }

        .email-image{
            width: 132px;
            height: 132px;
            border-radius: 50%;
            background-color: var(--text-input-field);
            display:flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
        }
        .email-image img{

            width: 80px;
        }
        .resend{
            font-size: var(--sm);
        }
        .resend span {

              color: var(--very-light-pink);
        }

        .resend a {

        
            color: var(--hospital-green);
            text-decoration: none;
        }



        @media(max-width:640px){
            .logo{
                display: block;
            }

        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
            <img src="./icons/casco.png" alt="logo" class="logo">
            <h1 class="title" >Email has been sent</h1>
            <p class="subtitle"> Please check your inbox for instructions on how to reset the password</p>
        <div class="email-image">
            <img src="./icons/casco.png" alt="email">
        </div>
     <button class="primary-button loggin-button">Login</button>
     <p class="resend">
     <span>Didn't receive the email?</span>
     <a href="/">Resend</a>
    </p>
</div>
</div>
</body>
</html>

Genial

para que alguien me muestre como copiar y pegar un codigo voy a youtube