No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
16H
16M
2S

Email enviado

7/22
Recursos

Ahora construiremos la pantalla en la que el email ha sido enviado reutilizando el c贸digo. Como recomendaci贸n, empieza creando la versi贸n responsive del proyecto.

email.png

C贸digo HTML

<div class="login">
    <div class="form-container">
      <img src="./logos/logo_yard_sale.svg" 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/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>

C贸digo CSS

.login {
      width: 100%;
      height: 100vh;
      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;
    }
    .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;
    }
    .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;
      }

Responsive dising

Nuestro proyecto es responsive, es decir, se adapta a diferentes tama帽os de pantalla. Para lograrlo implementamos media queries.

@media (max-width: 640px)
  • Los estilos que se encuentran fuera son para desktop.

  • Los que est谩n dentro aplicar谩n cuando el viewport sea menor a 640 p铆xeles.

Existe otra forma de maquetaci贸n responsive que es justo a la inversa. Primero pensamos en los estilos para m贸viles y luego vamos 鈥渟ubiendo鈥 hasta llegar a web. Esto se conoce como Maquetaci贸n Mobile First. Cliquea para ir al curso.

Uso de Figma

Ingresando al dise帽o en esta plataforma podr谩s hacer clic sobre los diferentes elementos y ver su c贸digo css. Incluso se te permite copiarlo. Claro est谩, si deseas practicar es mejor que t煤 no lo memorices y escribas el c贸digo css.

image

Recuerda que para poder hacerlo primero debes crearte una cuenta en Figma.
crear cuenta Figma

Luego abre este link y selecciona la opci贸n 鈥淥pen in Editor鈥
image

Haciendo esto, tambi茅n dispondr谩s del texto que lee el usuario.
image

Si te gustar铆a dominar esta herramienta puedes completar los siguientes cursos:

Contribuci贸n creada por Guadalupe Monge Barale con los aportes de Katerin Calder贸n y Belmer Alberto Cordoba Diaz.

Aportes 108

Preguntas 53

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

隆Hola! El problema del final del video se soluciona volviendo a darle en el icono para ver de manera 鈥淩esponsive鈥 (El icono al lado izquiero del inspector donde dice 鈥淓lemento鈥)

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 馃槃

En lugar de ponerle a los documentos el nombre de claseX.html pueden ponerle el nombre respectivo que aparece en el link que contiene los mockups : https://scene.zeplin.io/project/60afeeed20af1378ed046538

Mi aporte con otro dise帽o

Hola siquieres evitar tener que escribir <div class=鈥渢aat鈥> </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 馃槂

Me encanta este curso

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)

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

Hola, quiero comentar que Visual Studio tiene una extensi贸n que se llama 鈥渓ive 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

Hice algunos ajustes personalziados:

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.

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.

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.

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

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;
}

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!

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

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鈥ntonces 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鈥s 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.

As铆 quedo mi dise帽o del email enviado.

Me esta gustando este curso

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> 

.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 鈥渙verflow鈥, 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鈥檃 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: 鈥楺uicksand鈥, sans-serif;
}
:root{
鈥搘hite: #ffffff;
鈥揵lack: #000000;
鈥搗ery-light-pink:#c7c7c7;
鈥搕ext-input-field:#f7f7f7;
鈥揾ospital-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(鈥搕ext-input-field);
}
.mail{
width: 6rem;
}
form{
display: flex;
flex-direction: column;
width: 100%;
margin: 20px 0;
}
.button_login{
background-color: var(鈥揾ospital-green);
border: 0;
border-radius: 10px;
padding: 0.5rem;
margin: 0.5rem 0;
color: var(鈥搘hite);
}
form p, a{
font-size:small;
}
form a{
text-decoration: none;
color: var(鈥揾ospital-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.

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

Mi tarea 鉁岋笍

A veces nuestro navegador guarda algunos estilos en memoria, por ende debemos pulsar shift mientras recargamos para recargar sin cach茅 y listo, usualmente resuelve este tipo de problemas de final del video

Mi resultado

HTML5

<!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="email.css">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="password.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">
    <link rel="shortcut icon" href="./Platzi_YardSale_Icons/favicon_bota_fora.svg" type="image/x-icon">
    <title>Email</title>
</head>
<body>
    <main class="login">
        <div class="form-container">
            <img src="./Platzi_YardSale_Icons/logo_yard_sale.svg" alt="logo" class="logo">
            <h1 class="title">Email has been sent!</h1>
            <p class="subtitle">Please check your imbox for instructions on how to reset the password</p>
          <div class="email-image">
              <img src="./Platzi_YardSale_Icons/email.svg" alt="logo-email">
          </div>
          <button class="primary-button login-buttonn">Login</button>
          <p class="resend">
              <span>Didn't receive the email?</span>
              <a href="email.html">Resend</a>
          </p>
        </div>
    </main>
    </body>
</html>

CSS3

.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: 25px;
}
.email-image img{
    width: 80px;
}
.resend{
    font-size: var(--sm);
    margin-top: 20px;
}
.resend span{
    color: var(--very-light-pink);
}
.resend a{
    color: var(--hospital-green);
    text-decoration: none;
}
.form-container{
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 300px;
    justify-items: center;
}

Compa帽eros los invito a que intenten abrir el inspecionar con atajos de teclado, se vuelve mucho mas practico. En mi caso es con Shift + F5 usando Windows y Firefox 馃榾

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap鈥 rel=鈥渟tylesheet鈥>
<title>Document</title>
<style>
:root {
鈥搘hite: #ffffff;
鈥揵lack: #000000;
鈥揹ark: #232830;
鈥搗ery-light-pink: #c7c7c7;
鈥搕ext-input-field: #f7f7f7;
鈥揾ospital-green: #acd9b2;
鈥搒m: 14px;
鈥搈d: 16px;
鈥搇g: 18px;

    }
    body {
        font-family: "font-family: 'Quicksand', sans-serif;";
    }
    body {
        margin: 0;
    }

    .login {
        width: 100%;
        height: 100vh;
        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;
        display: none;
    }

    .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;
    }

    .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: 50px;
 
    }
    
    .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;
    }
    
    @media (max-width: 640px) {
        .logo {
            display: block;
            
        }
        
    }

</style>

</head>
<body>
<div class=鈥渓ogin鈥>
<div class=鈥渇orm-container鈥>
<img src="./logos/logo_yard_sale.svg" alt="logo"
class=鈥渓ogo鈥>

        <h1 class="title">Email has been sent!</h1>

        <p class="subtitle">Please check your imbox for instructions
            on how to reset the password</p>

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

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

        <p class="resend">
            <SPan>Didnt receive the email?</SPan>
            <a href="/">Resend</a>
        </p>

      
    </div>

</div>

</body>
</html>