Login

Aquí mi solución al reto.
Unicamente modifiqué el media querie, me quedó así:

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

    .secondary-button {
        width: 300px;
        position: absolute;
        bottom: 0;
        margin-bottom: 24px;
    }
}

Aquí el resultado final:

Yo lo hice de esta manera y así siempre tendrá el ancho del contenedor padre

@media(max-width: 640px){
            .logo {
                display: block;
            }
            .secondary-button {
                position: absolute;
                bottom: 20px;
                width: inherit;
            }
        }

para el input de correo electrónico también se puede usar el tipo “email” así:
esto en el minuto 1:46

<input type="email" placeholder="ingresa tu email"....

asi valida que lo ingresado tenga formato de email, [email protected] p. ej.

Son las propiedades que utilice para el reto

mi solucion al reto:

@media (max-width: 640px) {
	.secondary-button {
		position: absolute;
		top: 90%;
		width: 300px;
	}
}

Una forma de no reutilizar tanto codigo con el secundary button es ponerle

<button class="primary-button secondary_btn">Sign up</button>

La clase de primary-button y ya en los estilos con un poco de especificidad agregarle dos cosas

main .secondary_btn {
  background-color: transparent;
  border: 1px solid var(--hospitalGreen);
}

Nos ahorrariamos poner todo esto

.primary-button {
  background-color: var(--hospitalGreen);
  border-radius: 8px;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font: 700 var(--md) / 22px var(--principalFont);
  height: 50px;
  border: none;
}

Esta es mi solución al reto. No utilice la propiedad position porque el elemento button ya esta dentro de un container (form-container) que tiene la propiedad display:grid.

@media (max-width: 640px) {
  .logo {
    display: block;
  }
  .form-container {
    grid-template-rows: auto 1fr 100%;
  }
  .signup-button {
    align-self: end;
  }
}

**Mi solución: **si tenemos un dispositivo mobile con un máximo de 640px de whidth, entonces le damos la propiedad de 150px de margin-top para que el button se vaya abajo.

@media (max-width: 640px) {
      .logo {
        display: block;
      }
      .signup-button {
        margin-top: 150px;
      }
    }

Mi solución, lo estoy realizando mobile first.
Simplemente le acorte el height y le quite el margin-top que existe en mobile:
|
Mobile

|
Desktop

Por aquí les dejo mi solución.

.signup-button {
                width: inherit;
                position: absolute;
                bottom: 24px;
            }

Mi solution is:
.secondary-button {
transform: translateY(72px);
}

Mi forma de resolverlo 😊

@media (max-width: 640px) {
      .form-container {
      height: 80%;
      padding-top: 70px;
      }
}

Comparto el link https://cssreference.io/property/position/ donde podemos ver la libreria de las diferentes posicones de los elementos en CSS.

Investigar,aplicar y aprender nos lleva a mejorar cada día.

lo realize de la siguiente manera

<div class="container-button">
                <button class="secondary-button signup-button" type="button">Sign up</button>
            </div>
.container-button{
    width: 80%;
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
}

y asi quedo
![](

El resultado:

El código:

Después de este curso, me pasaré por el de Responsive Design, porque la verdad me enredo un poco al aplicarlo 😕

Lo logre en modo responsive agregando las siguientes lines

        .logo {
          display: block;
          width: 150px;
          margin-bottom: -103px;
          justify-self: center;
        }

        .singUp-button {
          margin-top: 100px;Ï

Sign up button

@media(max-width: 640px){

      .logo{
        display: block;
      }

      .secondary-button{
        width: 300px;
        position: absolute;
        bottom: 0%;
        margin-bottom: 20px;
      }

Esta es mi solución del resto solo puse un margin teniente en cuenta que este funciona como las manecillas del reloj

.secondary-button {
  background-color: var(--white);
  border-radius: 8px;
  border: 1px solid var(--hospital-green);
  color: var(--hospital-green);
  width: 100;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
  margin: 100px 0px 0px 0px;
}

Así quedo el mío.

Esta es la manera en que encontre la solucion

@media (max-width: 768px) {
    .secondary-btn {
        width: 30rem;
        position: absolute;
        bottom: 0;
        margin-bottom: 2.4rem;
    }
}

Y este es el resultado
![](

Esta fue la solución mas corta que encontré.

Mi solucion al reto: puse la etiqueta a y el boton de sign up dentro de un div para darle un espaciado con space-between y lograr que el botón se ponga en la parte de abajo

 @media (max-width: 640px){
            .form-container__logo{
                display: block;
            }
            
            .form a{
                margin-bottom: 0;
            }

            .form-container{
                height: 100%;
                grid-template-rows: auto 2fr;
            }
            
            .recovery-password{
                height: 50%;
                justify-content: space-between;
            }
        }

@media (max-width: 640px){ /* el logo se mostrara siempre y cuando no revase los 640 px */
            .logo{
                display: block;
            }
            .form-container {
                grid-template-rows: auto 1fr 25%;
            }
            .secondary-button {
                align-self: end;
            }
        }

Yo lo solucione de la siguiente forma!!

el resultado:

Varios de los compañero ya lo han puesto, pero funciona muy bien.

<@media (max-width:640px){
            .logo{
                display: block;
            }
            .secondary-button {
                 width: 300px;
                position: absolute;
                bottom: 0;
                 margin-bottom: 24px;
            }
        }> 

Lo resolví de la siguiente forma:

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

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

Mi solucion al reto:

@media (max-width: 640px) {
    .secondary-button {
    	position: absolute;
        width: inherit;
        bottom: 0;
        margin-bottom: 24px;
    }
}

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

/* Login section */

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

.login-container {
    width: 35rem;
    display: grid;
    grid-template-rows: auto auto;
}

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

.form-container {
    display: flex;
    flex-direction: column;
}

label {
    font-size: var(--md);
    font-weight: bold;
    margin-bottom: .8rem;
}

.input {
    border: none;
    border-radius: 1.2rem;
    background: var(--text-input-field);
    height: 2.8rem;
    margin-bottom: 2.4rem;
    padding: .8rem;
    font-size: var(--sm);
}

.button {
    border-radius: 1.2rem;
    height: 5.8rem;
    text-align: center;
    font-weight: bold;
    font-size: var(--md);
}

.forgot-my-password {
    text-decoration: none;
    color: var(--hospital-green);
    font-size: var(--sm);
    text-align: center;
    margin: .8rem 0 .8rem 0;
}

.primary-button {
    color: var(--white);
    background: var(--hospital-green);
    border: none;
    margin: 2rem 0 2rem 0;
}

.secondary-button {
    color: var(--hospital-green);
    background: var(--text-input-field);
    border: .1rem  solid var(--hospital-green);
    margin-top: 6rem;
}


@media (max-width: 640px) {
    nav {
        display: none;
    }

    .logo {
        display: block;
    }

    .secondary-button {
        position: absolute;
        width: 35rem;
        bottom: 0;
        margin-bottom: 2.4rem;
    }
}

<!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="login-section">
        <div class="login-container">

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

            <form class="form-container">
    
                <label for="email">Email adress</label>
                <input type="email" class="input email-input" placeholder="[email protected]" id="email">
    
                <label for="password">Password</label>
                <input type="password" class="input password-input" placeholder="**********" id="password">
    
                <input type="submit" class="primary-button button" value="Log in">
                <a href="#" class="forgot-my-password">Forgot my password</a>
                <button class="button secondary-button">Sign up</button>
            </form>
        </div>
    </div>
</body>
</html>

        .secondary-button {
            background-color: var(--White);
            color: var(--hospital-green);
            border-radius: 8px;
            border: 1px solid var(--hospital-green);
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
            height: 50px;
            margin-top: 50px; <----------------------- El margin top será de 50px que lo cambiamos con los media
        }

Aun me lia un poco, por defecto pongo el margin top por defecto de 50px…osea es el valor de escritorio y no movile first. pero funciona

        @media (max-width: 640px) {   <--------- Tendrá un margin top de 150px hasta que la pantalla sea 640px
            .logo {
                display: block;
            }
            .secondary-button {
            margin-top: 150px;
        }

Con Hover 😄

<!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 {
            --black: #000000;
            --white: #ffffff;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #acd0b2;
            --primary-button-hover: #5ab865;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }

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

        .login{
            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: 50px;
            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);
            margin-top: 0;
            margin-bottom: 32px;
            font-weight: 300;
            text-align:center;
        }

        .form{
            display: flex;
            flex-direction: column ;
        }

        .form a {
            margin-top: 24px;
            margin-bottom: 16px;
            text-align: center;
            color: var(--hospital-green);
            font-size: var(--sm);
        }

        .form a:hover{
            color: var(--primary-button-hover);
        }

        .label {
            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
        }
        
        .input {
            background-color: var(--text-input-field);
            border: none;
            border-radius: 8px;
            height: 32px;
            font-size: var(--md);
            padding: 8px;
            margin-bottom: 16px;
        }

        .primary-button{
            height: 40px;
            width: 100%;
            border: none;
            border-radius: 12px;

            color: var(--white);
            font-size: var(--md);
            font-weight: bold;

            background-color: var(--hospital-green);

            cursor: pointer;
        }

        .primary-button:hover{
            background-color: var(--primary-button-hover);
        }


        .signUp{
            
            margin-top: 24px;
            
            height: 40px;
            border-radius: 8px;
            border: 1px solid var(--hospital-green);
            background-color: var(--white);

            font-size: var(--md);
            font-weight: bold;

            color: var(--hospital-green);

            cursor: pointer;
        }

        .signUp:hover{
            background-color: var(--hospital-green);
            color: var(--white);
        }


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

            .signUp{
                width: 300px;
                position: absolute;
                bottom: 0;
                margin-bottom: 24px;
            }
        }
        
    </style>
</head>
<body>
    <div class="login">
        <div class="container">
            <img src="./assets/logos/logo_yard_sale.svg" alt="logo" class="logo">
            
            <form action="/" class="form">
                <label for="email" class="label">
                    Email address
                </label>
                <input type="text" id="email" class="input input-email" placeholder="[email protected]"/>

                <label for="password" class="label">
                    Password
                </label>
                <input type="password" id="password" class="input input-password" placeholder='*******'/>

                <input type='submit' value="Log in" class="primary-button login-button" />

                <a href="./screenPassword.html" >Forgot my password</a> 
            </form>

            <button class="signUp">Sign up</button>
         
        </div>
    </div>
</body>
</html>

Mi reto:
.
Mobile
.

.
Laptop
.

.
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">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/laptop.css" media="screen and (min-width: 1024px)">
</head>
<body>
    <div class="login">
        <div class="form-container">
            <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

            <form action="" class="form">
                <label class="label" for="email">
                    Email address
                </label>
                <input type="email" name="" id="email" placeholder="[email protected]" class="input input--email">

                <label class="label" for="password">
                    Password
                </label>
                <input type="password" name="" id="password" placeholder="*********" class="input input--password">

                <input type="submit" value="Log in" class="primary-button login-button">

                <a class="complement complement--forgot" href="#">Forgot my password</a>

                <input type="submit" value="Sign up" class="primary-button secondary-button">
            </form>
        </div>
    </div>
</body>
</html>

.
style.css
.

.primary-button {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 8px;
  font-size: 1.8rem;
  font-weight: 500;
  color: #fff;
  background-color: #acd9b2;
  cursor: pointer;
}

.secondary-button {
  position: relative;
  bottom: -70px;
  margin-top: 64px;
  color: #acd9b2;
  background-color: #fff;
  border: 1px solid #acd9b2;
}

.
laptop.css
.

.login .form-container .logo {
    display: none;
}

.secondary-button {
    bottom: 0;
}

Eso fue lo que use para el boton

Hola les comparto, mi solucion al reto…

@media (max-width: 640px) {
    .logo{
        display: block;
    }
    .secondary-button{
        width: 300px;
        position: absolute;
        bottom: 0;
        margin-bottom: 30px;
    }
}

Tengan cuidado de simplemtente darle un margin-bottom: 200px; o algo asi, porquie nos quita el margin que dispione el logo en la parte superior y mueve el fomrulario

Mi solución al reto:

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

      .signup-button {
        width: inherit;
        position: absolute;
        top: 90%;    
      }

    }

Mi solución. Mi logica para el mediaquery es “mobile first”, con lo que los estilos se escriben enfocados en mobile y los media query los modifican para las otras pantallas:

.form-container{
            display: grid;
            height: 100vh;
            width: 90%;
        }
.singup-button{
            align-self: end;
            margin-bottom: 28px;
        }

@media (min-width: 600px) { 
.form-container{
                width: 340px;
                height: auto;
            }
}

listo el reto !

Captura de pantalla 2022-05-17 173219.png

Mi solución:

@media (max-width: 640px){
            .logo{
                display: block;
            }
            .signup-button{
                margin-bottom: 20px;
                position: absolute;
                bottom: 0;
                width: inherit;
            }
        }

Por fin XD

así me quedo la solución al reto.

@media (max-width: 640px) {
	.logo {
		display: block;
	}
	.signup-button {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin-bottom: 24px;
	}
}

Hola yo solo le aumenté el margin botton a la ancle del form…

        @media (max-width: 640px) {
            .logo {
                display: block;
            }
            .form a {
                margin-bottom: 200px;
            }
        }

Solución al reto: (otra forma)

Solución al reto:

mi solucion fue de la siguiente manera aprovechando que tenemos el display grid

@media (max-width: 640px) {
  .logo {
    display: block;
  }
  .form-container {
    grid-template-rows: auto 1fr 60%;
  }
  .signup-button {
    align-self: end;
  }
}

Aqui mi solución. Al parecer es la mas común jeje

        @media (max-width: 640px){
            .logo{
                display:block;
            }
            .secondary-button{
                position: absolute;
                bottom: 0;
                width: 300px;
                margin-bottom: 16px;
            }
        }

Estaba fácil el reto, solo había que agregar un margin-top.

 @media (max-width: 640px){
            .logo{
                display: block;
            }
            .secondary-button{
                margin-top: 80px;
            }
        }

Mi resultado tras de investigar un poco:

Modifiqué los colores del logo con el aporte del compañero Jhon_B:

Se me ocurrió esta implementación para solucionar l aposición del botón Sign up en dispositivos móviles:

        @media (max-width: 640px) {
            .login {
                position: relative;
            }
            .signup-button {
                position: absolute;
                bottom: 20px;
                width: 300px;
            }
        }

¿Por qué utilicé la clase .signup-button?
Sencillo, la clase .secondary-button se puede utilizar en cualquier otro lugar del proyecto, si le aplicara el position directamente, estaría atando su comportamiento a las necesidades de esta vista, es mejor utilizar otra clase para asignarle un comportamiento específico y no contaminar sus atributos pricnipales.

Un mejor práctica para no estás duplicando código sería compartir atributos de layout en las clases .primary-button y .secondary-button y agregar los atributos cosméticos directamente en su clases independientes:

        .primary-button, .secondary-button {
            border-radius: 8px;
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
            height: 50px;
        }
        .primary-button {
            background-color: var(--hospital-green);
            border: none;
            color: var(--white);
        }
        .secondary-button {
            background-color: var(--white);
            border: 1px solid var(--hospital-green);
            color: var(--hospital-green);
        }

lo que hice yo fue lo siguiente:
.signup-button {
position: fixed;

        width: inherit;
        
        bottom: 26px;
    }

estuve analizando la situacion y es la mejor solucion que se me ocurrio para respetar el responsive.

Creo que una de las formas mas fáciles de colocar un contenedor hasta el final es con las propiedades

position: fixed;
bottom: 2.6rem;

Eso llevará el contenedor completamente hasta el borde del final, por ello siempre o generalmente se coloca un espaciado que en este caso es el bottom, y al momento de hacer el responsive design simplemente aumentamos el espaciado en este caso el bottom hasta donde desemos la altura del boton

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

            .secondary-button {
            margin-top: 30vh;
            }
        }

Mi solución al reto fue cambiar el place-items de .login por un justify-items y luego centrar individualmente el .form con align-self. Luego en el media query volvía a place-items en Desktop:

.login {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    padding: 20px 0;
}

@media screen and (min-width: 650px) {
    .logo {
        visibility: visible;
    }
    .login {
        place-items: center;
    }
}

El truco realmente fue un margin-top: auto; en el botón y controlar el grid de .login para que dejara crecer el .form-container.

Lo hice de la manera mas sencilla y la primera que se me ocurrio. Suerte.🛸

Bastante simple la solución

@media (max-width: 640px) {
  .secondary-button {
    position: absolute;
    bottom: 20px;
  }
}

Bueno veo que mayoria uso position absolute, yo use position relative con un top de 100px.
.secondary-button {
position: relative;
top: 100px;
}

Mi solución al reto
@media (max-width: 640px) {
.logo {
display: block;
}
.secondary-button {
margin-top: 100px;
margin-bottom: 10px;
}
}

CLICK PARA VER LA PAGINA
DESKTOP

MOBILE

Mi solución!

Esta es mi solución al reto. Lo hice así, porque lo creí más responsive.

@media (max-width: 640px) {
    .logo {
        display: block;
    }
    .secondary-button {
        width: 300px;
    }
    .signup-button {
        position: absolute;
        bottom:0px;
    }
}
@media (max-width: 330px) {
    .form-container {
        width: 1fr;
        padding: 12px;
    }
    .logo {
        width: 80%;
    }
}

yo lo estoy haciendo con flexbox ya que es lo que estoy dominando, en cuanto haga el curso de grid básico. repetiré el proyecto con grid. así queda mi código.
https://kaleidoscopic-rugelach-8f7aef.netlify.app/

CSS

      :root {
        --very-ligth-pink: #c7c7c7;
        --text-input-field: #f7f7f7;
        --hostipal-green: #acd9b2;
        --white: #ffffff;
        --black: #000000;
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
      }
      * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }
      html {
          font-size: 62.5%;
      }
      body {
        font-size: 1.6rem;
        font-family: 'Quicksand', sans-serif;
      }
      .login {
        width: 100vw;
        height: 100vh;
      }
      .form-container {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .image-container {
        height: 20%;
        display: flex;
        align-items: flex-end;
      }
      .logo {
        margin-bottom: 3rem;
        width: 15rem;
      }
      .form {
        display: flex;
        flex-direction: column;
        width: 30rem;
      }
      .label {
        color: var(--black);
        font-size: var(--sm);
        font-weight: bold;
        margin-bottom: 0.5rem;
      }
      .input {
        border: none;
        border-radius: 0.5rem;
        background-color: var(--text-input-field);
        height: 3.4rem;
        margin-bottom: 1.8rem;
      }
      .button-styles {
        border: none;
        border-radius: 0.6rem;
        background-color: var(--hostipal-green);
        width: 100%;
        height: 4.2rem;
        color: var(--white);
        font-size: var(--md);
        font-weight: bold;
        padding: 0.6rem;
        cursor: pointer;
      }
      .forgot {
          text-decoration: none;
          text-align: center;
          font-size: var(--sm);
          color: var(--hostipal-green);
          margin-top: 2rem;
      }
      .sign-container {
        height: 25%;
        display: flex;
        align-items: flex-end;
      }
      .input-sign-up {
          background-color: transparent;
          color: var(--hostipal-green);
          border: 0.2rem solid var(--hostipal-green);
          width: 30rem;
      }
      @media (min-width: 1024px) {
        .logo {
          display: none;
        }
      }

HTML

      <section class="login">
        <div class="form-container">
            <figure class="image-container">
              <img src="/logos/logo_yard_sale.svg" alt="logo" class="logo">
            </figure>
            <form action="" class="form">
                <label for="email" class="label">Email address</label>
                <!-- <br> -->
                <input type="email" name="email" id="email" class="input input-email" placeholder="[email protected]">
                
                <label for="password" class="label">Password</label>
                <!-- <br> -->
                <input type="password" name="password" id="password" class="input input-password" placeholder="*********">

                <!-- <br> -->
                <input type="submit" value="Log in" class="button-styles button">
                <a href="#" class="forgot">Forgot my password</a>
            </form>
            <div class="sign-container">
                <button type="submit" class="input-sign-up button-styles">Sign up</button>
            </div>
        </div>
      </section>

así va quedando.
iré actualizando, lo estoy haciendo con flexbox ya que quiero hacerlo por mi cuenta. realizo los estilos y después veo a la profesora realizarlos.
https://kaleidoscopic-rugelach-8f7aef.netlify.app/

Lo realize ta solo con ponerle un
margin-top de entre 160px y 180px en el @media:

 @media (max-width: 640px){
            .logo{
                display: block;
            }
            .sing-up{
                width: 100%;
                height: 55px;
                border: 1px solid var(--hospital-green);
                border-radius: 10px;
                color: var(--hospital-green);
                font-size: var(--nd);
                margin-top: 180px;
        }
        }

Mi solución

.secondary-button {
            bottom: 25px;
            width: inherit;
            position: absolute;
        }

Reto

@media (max-width: 640px){
            .logo{
                display: block;
            }
            .secondary-button{
                margin-top: 144px;
            }
        }

Reto logrado!!!

 @media (max-width: 640px) {
        .logo {
          display: block;
        }
        .secondary-button {
          margin-top: 100px;
        }
      }

<@media (min-width: 640px){
    .logo{
        display: none;
    }

    .secundary{
        margin-top: 0px;
    }
    .form a{
        margin-bottom: 24px;
    }

}> 

310 px

640px

Lo solucioné el reto de la siguiente forma:

.signup-button {
      position: absolute;
      left:   var(--space2);
      right:  var(--space2);
      bottom: 0;
      width: calc(100% - var(--space4));
      max-width: 30rem;
      margin: 0 auto var(--space5);
}

@media screen and (min-width: 640px) {
      .logo {
        display: none;
      }

      .signup-button {
        position: initial;
        margin: calc(var(--space) * 7) auto 0;
      }
    }

Existe otra forma de generar el template base del archivo HTML, es usando: ! + Tab.

Mi solución al reto fue fijarlo en la parte de abajo

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

    .secondary-button {
        position: fixed;
        width: inherit;
        bottom: 3%;
    }
}

Mi solución al reto la dividí en tres partes:
.

• Usar position absolute para poder ubicarlo respecto al body en el bottom ⬇️,

.

• El width en inherit para usar siempre el ancho ↔️ del contenedor padre.

.

• Y por último un margin a la parte inferior para siempre dejar el mismo espacio ↕️ sin importar la pantalla.

.
.

😉 Notas:

• Ya que ningún ancestro contenedor tiene la propiedad position diferente de static; que es la position por defecto, funciona pero si cambia el position de cualquier contenedor ya no funcionara de la misma forma.

• Cambiando el position del contenedor con la clase de login a relative solucionaría si se presenta algún problema.

• El código lo puse adentro de @media

.secondary-button {
        position: absolute;
        bottom: 0;

        margin-bottom: 32px;
        width: inherit;
      }

@media (max-width: 640px) {
            .logo{
                display: block;
            }
            .secondary-button{
                position: fixed;
                bottom: 0;
                width: 300px;
                margin-bottom: 24px;
            }
        }

Respondiendo la pregunta de Teffy lo que hice fue agregar el .form a econ su margen al @media, me quedó así:

@media (max-width:640px){
.logo {
display: block;
}
.form a {
margin-bottom: 230px;
}
}

Adjunto la captura con el resultado

![](

.secondary-button {
        position: relative;
        top: 160px;
      }

![](

Mi solucion al reto.

    @media(max-width:640px){
        .logo{
            display: block;
        }
        .secondary-button {
            position: absolute;
            bottom: 0;
            margin-bottom: 35px;
            width: 300px;
            
        }
    }

Mi solución:

        @media (max-width: 640px) {
            .logo {
                display: block;
            }
            .secondary-button {
                align-self: flex-end;
                margin-bottom: 32px;
            }
        }

Utilice “position” para colocarlo:

        @media (max-width: 640px) {
            .logo {
                display: block;
            }
            .secondary-button {
                position: absolute;
                bottom: 1px;
                right: 0px;
            }
        }

@media (max-width:640px){
.logo{
display: block;
}
.secondary-button{
position: absolute;
width: 300px;
bottom: 0;
}

mi solución fue agregarle al @media que ya tenemos este codigo

<code> 
.secundary-button{
 position: absolute;
  bottom: 200px;
  width: 300px;
            }

Reto completado

@media (max-width: 640px) {
  .btn-signup {
    position: absolute;
    width: inherit;
    bottom: 20px;
  }
}

Modifique el media query de la siguiente manera:

.secondary-button {
width: inherit;
position: absolute;
bottom: 0;
}

.signup-button {
    position: relative;
    bottom: -12vh;
  }

Siempre es buena práctica tener un estilo gneral para los botones y un estilo modificador para el tipo de botón:

.button {
    width: 100%;
    height: 58px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.button:active {
    border: solid 1px var(--dark);
}

.primary--button {
    font-size: var(--lg);
    font-weight: bold;
    background-color: var(--hospital-green);
    color: var(--white);
}

.secundary--button {
    font-size: var(--lg);
    font-weight: bold;
    background-color: var(--white);
    color: var(--hospital-green);
    border: solid 1px var(--hospital-green);
}

El unico cambio que hice fue en el query

@media (max-width: 640px) {
.logo {
display: block;
}
.singup-button {
position: absolute;
bottom: 20px;
width: 300px;
}
}

Pare realizar el reto agregue lo siguiente:

            .secundary-button{
                margin-top: 90%;
                background-color: #121f3d;
            }

Mi aporte: asi me quedo el @media para el responsive en vista movil.

.secondary-button{
            background: var(--white);
            border-radius: 8px;
            border: 1px solid var(--hospital-green);
            color: var(--hospital-green);
            height: 60px;
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;

        }

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

            .secondary-button{
                margin-top: 550px;
                position:  absolute;
                width: 77%;
            }

        }


Hola, les dejo mi solucion al desafio, simplemente le agrege margin-top

Para solucionar el reto añadí las siguiente líneas de código el media query:

@media (max-width: 640px) {
          .logo {
              display: block;
          }
          .secondary-button {
          position: absolute;
          bottom: 0;

          width: inherit;

El position: absolute me permite posicionar el botón siempre respecto al fondo de la pantalla. Además de eso, tuve que añadir el width: inherit para que este siempre mantenga el ancho de su padre, que es el form.

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

        }
        .logo{

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

        }
       
        .form{

            display:flex;
            flex-direction: column;
        }
        .form a {
            color: var(--hospital-green);
            font-size: var(--sm);
            text-align: center;
            text-decoration: none;
            margin-bottom: 52px;


        }

        .label{

            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
            
        }
        .input{
            background-color:var(--text-input-field) ;
            border: none;
            border-radius: 8px;
            height: 30px;
            font-size: var(--md);
            padding: 6px;
            margin-bottom: 12px;
        }
        .input-email{

            margin-bottom: 22px;

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

        }
        .secondary-button{

        background-color: var(--white);
        border-radius: 8px;
        border: 1px solid var(--hospital-green);
        color:var(--hospital-green);
        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;

            }
            .secondary-button{

            margin-top: 5px;
            margin-bottom: 15px;


            }

        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
            <img src="./icons/casco.png" alt="logo" class="logo">
            
    <form action="/" class="form">
    <label for="email" class="label">Email adress</label>
    <input type="text" id="email" placeholder="[email protected]" class="input input-email">
    <label for="password" class="label">Password</label>
    <input type="password" id="password" placeholder="********" class="input input-password">
    <input type="submit" value="Log in" class="primary-button login-button">
    <a href="/">Forgot my password</a>
</form>
<button class="secondary-button signup-button">Sign up</button>
</div>
</div>
</body>
</html>

Esta es mi solución del reto. 😊

      @media (max-width: 640px) {
        .container {
          width: 90%;
        }
        .container__logo {
          display: block;
          width: 30%;
        }
        .button--responsive {
          position: absolute;
          bottom: 4%;
          width: inherit;
        }
      }

Tuve que poner el boton secundario en un div para poder centrarlo y que no me quede desfazado.
Si alguien conoce una manera simple /corta comente, que me ayudaria mucho a aprender.

sí me quedó estoy bzsatante feliz por eso n__n

Reto resuelto

 @media (max-width: 640px) {
            .login{
                align-items: stretch;
            }
            .logo{
                display: block;
                margin-top: 150px;
            }
            .secondary-button{
                margin-bottom: 24px;
            }
        }

aca dejo el resultado de mi intento para hacer el reto
me gustaria saer su opinion

Aquí mi solución

.secondary-button{
    position: absolute;
    bottom: 0;
    width: inherit;
    margin-bottom: 18px
}

Comparto mi resultado del resto;