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 😄

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

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 😃

Mi aporte con otro diseño

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

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

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

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

Comparto mi resultado:

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

Hice algunos ajustes personalziados:

Me encanta este curso

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.

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.

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.

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.

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

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

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.

cada vez entiendo mas, gracias profe

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 😃

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

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

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:[email protected];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;

}

}```

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

Mi código:

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:[email protected];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

This is my practice:

https://github.com/eliabjselvacruz/practice/commit/ca3e6b25cb815ab64e6c1fbe4f56e9bba158be31

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:[email protected];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=“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:[email protected];500;700&display=swap” rel=“stylesheet”>
<title>Document</title>
<style>
:root {
–white: #ffffff;
–black: #000000;
–dark: #232830;
–very-light-pink: #c7c7c7;
–text-input-field: #f7f7f7;
–hospital-green: #acd9b2;
–sm: 14px;
–md: 16px;
–lg: 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=“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 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>

Desktop

Mobile

:root{
    --white: #FFFFFF;
    --black: #000000;
    --dark: #232830;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 1.4rem;
    --md: 1.6rem;
    --lg: 1.8rem;
}

html {
    font-size: 62.5%;
}

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


.responsive-icon-menu {
    display: none;
}

nav {
    display: flex;
    border-bottom: 1px solid var(--hospital-green);
    width: 100%;
    justify-content: space-between;
}

.navbar-logo {
    width: 15rem;
    margin-left: 4rem;
}

.navbar-left {
    display: flex;
}

.navbar-left ul {
    margin-left: 4rem;
}

.navbar-left ul li a ,
.navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: .8rem;
    border-radius: 1rem;
    font-size: var(--md);
}

.navbar-left ul li a:hover ,
.navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
}

.navbar-sign {
    color: var(--hospital-green);
    font-size: var(--md);
    margin-right: 4rem;
}

.navbar-shopping-cart {
    position: relative;
    margin: 0 2rem 0 0;
}

.navbar-shopping-cart div {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--hospital-green);
    position: absolute;
    right: 0;
    top: 0;
}

.navbar-left ul , 
.navbar-right ul {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}

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

.email-main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 30rem;
    justify-items: center;
}

.logo {
    width: 18rem;
    justify-self: center;
    margin-bottom: 8rem;
    display: none;
}

.title {
    font-size: var(--lg);
    font-weight: bold;
    justify-self: center;
    margin-bottom: 0;
}

.subtitle {
    font-size: var(--md);
    color: var(--very-light-pink);
    text-align: center;
    justify-content: center;
    margin-bottom: 2.5rem;
    margin-top: .5rem;
}

.primary-button {
    border: none;
    background-color: var(--hospital-green);
    color: var(--white);
    font-size: var(--lg);
    border-radius: 1.2rem;
    width: 100%;
    height: 5rem;
    padding: .8rem;
    margin-top: 2rem;
    cursor: pointer;
}

.email-image {
    background-color: var(--text-input-field);
    border-radius: 50%;
    width: 13.2rem;
    height: 13.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.email-image img {
    width: 8rem;
    height: 8rem;
}

.resend {
    font-size: var(--sm);
    color: var(--very-light-pink);
    text-align: center;
    margin-top: 2.4rem;
}

.resend a {
    text-decoration: none;
    color: var(--hospital-green);
}

@media (max-width: 640px) {

    .logo {
        display: block;
    }

    nav {
        display: none;
    }
}

<!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 href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="Style.css">  
    <title>Yard Sale</title>
</head>
<body>
    <nav>

        <div class="navbar-left">

            <img src="/assets/Platzi_YardSale_Logos/logo_yard_sale.svg" alt="logo_yard_sale" class="navbar-logo">

            <ul>
                <li>
                    <a href="#">All</a>
                </li>

                <li>
                    <a href="#">Clothes</a>
                </li>

                <li>
                    <a href="#">Electronics</a>
                </li>

                <li>
                    <a href="#">Furniture</a>
                </li>

                <li>
                    <a href="#">Toys</a>
                </li>

                <li>
                    <a href="#">Others</a>
                </li>
            </ul>
        </div>

        <div class="navbar-right">
            <ul>
                <li class="navbar-sign">Sign in</li>
                <li class="navbar-shopping-cart">
                    <img src="/assets/Platzi_YardSale_Icons/icon_shopping_cart.svg" alt="icon_shopping_cart">
                    <div></div>
                </li>
            </ul>
        </div>
    </nav>

    <div class="email-container">
        <div class="email-main">
            <img src="/assets/Platzi_YardSale_Logos/logo_yard_sale.svg" alt="logo_yard_sale" class="logo">
            <h1 class="title">
                Email has been send!
            </h1>
            <p class="subtitle">Please check your inbox for instructions on how to reset the password</p>
            <div class="email-image">
                <img src="/assets/Platzi_YardSale_Icons/email.svg" alt="email-icon">
            </div>
            <button class="primary-button login-button">Login</button>
            <p class="resend">
                Didn't receive the email? 
                <a href="#">Resend</a>
            </p>
        </div>
    </div>
</body>
</html>

No identifico bien el problema. Se notó que improvisó

😊

me encanta como redunda las oraciones para ella sola

Otra forma de reutilizar recursos, sería vincular un archivo .css externo al HTML

Archivo de estilos css

:root {
    --very-light-pink: #C7C7C7;
    --white: #FFFFFF;
    --text-input-field: #F7F7F7;
    --black: #000000;
    --hospital-green: #ACD9B2;
    --fluor-green: #2cd52c;
    --dark: #232830;
    --sm-text: 1.4rem;
    --md-text: 1.6rem;
    --lg-text: 2.0rem
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Quicksand', sans-serif;
    font-size: 62.5%;
}

body {
    background:linear-gradient(32deg, var(--hospital-green) 0 30%, var(--white) 60% 100%);
}

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

.form-container {
    display: grid;
    grid-template-rows: auto;
    width: 300px;
}

.form-container .logo {
    width: 148px;
    height: 26.35px;
    margin-bottom: 50px;
    justify-self: center;
    box-shadow: 1px 1px 1px var(--fluor-green);
    border-radius: 5px;
}

.form-container--title {
    width: 230px;
    height: 23px;
    margin-bottom: 8px;
    font-size: var(--lg-text);
    font-weight: 700;
    line-height: 2.25rem;
    color: var(--black);
    text-align: center;
    justify-self: center;
    text-shadow: 2px 2px 2px var(--fluor-green);
}

.form-container--subtitle {
    width: 300px;
    height: 23px;
    margin-bottom: 40px;
    font-size:var(--sm-text);
    font-weight: 700;
    line-height: 2.25rem;
    text-shadow: 2px 2px 2px var(--fluor-green);
    text-align: center;
    justify-self: center;
}

/*-----------------------Estilos de clase 1-----------------------*/
.form {
    display: flex;
    flex-direction: column;
}

.form .label {
    width: 140px;
    height: 18px;
    margin-bottom: 8px;
    padding-left: 5px;
    font-size: var(--sm-text);
    font-weight: 700;
    line-height: 1.75rem;
    text-shadow: 2px 2px 2px var(--fluor-green);
}

.form .input {
    width: 300px;
    height: 42px;
    margin-bottom: 24px;
    background: var(--text-input-field);
    border: 1px solid var(--text-input-field);
    border-radius: 10px;
    padding: 6px;
    font-size: var(--md-text);
}

.primary-button {
    width: 300px;
    height: 52px;
    margin-top: 11px;
    font-size: var(--lg-text);
    font-weight: bold;
    text-shadow: 2px 2px 2px var(--fluor-green);
    box-shadow: 2px 2px 2px var(--fluor-green);
    background: lightgreen;
    border: 1px solid green;
    border-radius: 20px;
}
/*------------------------Fin estilos Clase 1----------------------*/

/*-------------------------Estilos Clase 2-------------------------*/

.container-email-icon {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 10px 0 15px;
    background-color: var(--text-input-field);
    box-shadow: 2px 2px 12px var(--fluor-green);
    text-align: center;
    justify-self: center;
    border-radius: 50%;
}

.container-email-icon img {
    position: absolute;
    left: calc(20%);
    top: calc(30%);
}

.form-container-text-DidNot{
    margin-top: 25px;
    font-size: var(--sm-text);
    font-weight: 700;
    line-height: 2.25rem;
    color: var(--black);
    text-align: center;
    justify-self: center;
    text-shadow: 2px 2px 2px var(--fluor-green);
}

.form-container-text-DidNot a {
    color: darkgreen;
    padding-left: 5px;
    text-shadow: none;
}

/*--------Fin estilos Clase 2--------------------------*/

Me alegra haber visto el problema final con el inspector de elementos, porque pensaba que estaba haciendo algo mal y a mí me suele pasar a menudo. A ver cuando @Google arregla ese bug jajaja

Este layout sale mucho más rapido con emmet

Centrar icono de email

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