Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Crear y editar mi cuenta

9/22
Recursos

Aportes 59

Preguntas 26

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Muy interesante la clase, mas alla de pensar en buscar lo mas facil es buscar lo mas conveniente para ahorrar lineas, hacer mas legible los estilos y sobre todo poner en practica las herramientas grid y flexbox , dado que anteriormente pensaba en usar posiciones o margins para ubicar los elementos pero veo que no es complicado una vez se van conociendo y aplicando mas y mas estas propiedades… Se siente una satisfaccion ir entendiendo mas estos conceptos.

Para desplazar líneas de código el comando en Visual Studio Code es:
Desplazar hacia arriba

Mayus + alt +  ↑

Desplazar hacia abajo:

Mayus + alt +  ↓

En el curso anterior de frontend developer se me hizo complicado al principio entender lo que hacía. Pero al término del primer curso, una vez que terminé de hacer mi proyecto puedo decir que sí aprendí bastante.
Y aquello que aprendí en el curso anterior de frontend developer lo pongo más en práctica aquí, y me siento bien de entender lo que hace y que me está saliendo todo 😄

Estilos de esta clase:

: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;
  font-family: "Quicksand", sans-serif;
}
.login {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}
.form-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 300px;
}
.logo {
  width: 150px;
  margin-bottom: 48px;
  justify-self: center;
  display: none;
}
.title {
  font-size: var(--lg);
  margin-bottom: 36px;
  text-align: start;
}
.form {
  display: flex;
  flex-direction: column;
}
.form div {
  display: flex;
  flex-direction: column;
}
.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-name,
.input-email,
.input-password {
  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;
}
.login-button {
  margin-top: 14px;
  margin-bottom: 30px;
}
@media (max-width: 640px) {
  .form-container {
    height: 100%;
  }
  .form {
    height: 100%;
    justify-content: space-between;
  }
}

Hola!
Mi solución al reto 😃

@media (max-width: 640px){
      .logo{
        display: block;
      }
      .secundary-button{
        position: fixed;
        bottom: 0;
        width: inherit;
        margin-bottom: 30px;
      }
    }

Comparto mis resultados:

Yo solo le agregue un margin-top a el botón “create”

@media (max-width: 640px) {
            .create-button {
                margin-top: 248px;
            }
        }

Recomiendo no usar margenes para separar el botón, ya que la altura de cada dispositivo puede cambiar, en su lugar recomiendo la propiedad: inset-block-end.

position: absolute;
width: 300px;
inset-block-end: 12px;

Estos son mis apuntes de la clase:
*Para esta clase tambien te apoyarás de las anteriores clases y del botón que apoyaste al fondo en la clase anterior.
!Recuerda crear en style el input de cada uno.
!!!Para que el buttom quede completamente abajo, la forma adecuada es:
en @media
.form-container height: 100%;
.form height: 100%; justify-content: space-between;

Esta bueno tener un orden al momento de escribir las declaraciones en las reglas del CSS. Me encanta como enseña la profesora Estefany, pero destaco el orden en las declaraciones indicadas por Diego De Granda…
1ero - position
2do - box model
3ero - tipografía
4to - estilos visuales
5to - otros

Mi solución:

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

Dios por fin entendí el por que de las 2 clases.

Una clase define el valor general que se reutiliza, en este caso (los inputs) el background gris bordes redondos, pues se le llama .inputs

Y si legara hacer necesario se le invoca su segunda clase, (esta vez mas especifica) .input-name .input-email .input-contraseña. De esta manera reutilizamos y es mucho mas rápido y menos lioso

Ojo con la clase .título porque si están suando un file .css podría modificar los otros .html, lo mejor es hacer una clase modificador solo para este caso:

.title--my-account {
    text-align: left;
    margin-bottom: 48px;
}

Para la clase .form igualmente en donde ahora hemos creado dods contenedores para el flex en mobil:

@media (max-width: 425px) {
   ...
    .form-create-account {
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: space-between;
        padding-top: 34px;
        padding-bottom: 22px;
    }
}

que buen tip lo del cmd D para seleccionarlos todos

Este curso me parece grandioso y no aburrido por lo practico, sinceramente estoy nuevo en esto … pero sin duda que mientras estas tomando las clases ya te vas imaginando todos los sitios que puedes construir. Excelente curso!

Muy buena clase teacher Teff ✨
🌐 Les comparto mi código en GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Resultados:
Vista Desktop:

.
Vista móvil:

Excelente clase, estre mas practico mas voy entendiendo la logica del codigo en html y css. Comparto mi resultado.

Otra forma de hacerlo un poco más sencillo es en la parte del media query borrar la informacion de .logo y agregar :

.primary-button{
                position: absolute;
                bottom: 0;
                margin-bottom: 10px;
                width: 300px;
            }
<!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;

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

        }
        .subtitle{

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

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

            display:flex;
            flex-direction: column;
        }

        .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-name,
        .input-email,
        .input-password{
            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;

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

        }

        @media(max-width:640px){
           
            .form-container{

        height: 100%;
        
            }
           
           
            .form{

                height: 100%;
                justify-content: space-between;
            }

        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
         
            <h1 class="title" >My account</h1>
           
        
    <form action="/" class="form">
        <div>
            <label for="name" class="label">Name</label>
            <input type="text" id="name" placeholder="Teff" class="input input-name">
            <label for="email" class="label">Email</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">
        </div>
    
    <input type="submit" value="Create" class="primary-button login-button">
</form>
</div>
</div>
</body>
</html>

otra forma de poner abajo en lugar de justify-content es usar margin-top: auto;

La forma en que separé el botón hacia abajo fue con un margin-top: 50%;
Dos cositas para los estudiantes recientes del frontend: 1ro existe un type email (la profe puse text) es mejor ese para los correos ya que verifica correctamente si es email o no & 2do lo ideal no es usar input tipo sumbit sino un button con el mismo tipo es más adecuado ya después de todo la función del lado del cliente es ser un botón.

Una forma de no escribir .input-name,.input-email…
es poner .form .label
y se aplica el estilo a cada uno de los inputs

Lo que llevo:

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

.input-email {
    margin-bottom: 22px;
}

.secondary-button {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid;
    color: var(--hospital-green);
  
    cursor: pointer;
    font-size: var(--medium);
    font-weight: bold;
    height: 30px;
    position: absolute;
    bottom: 12px;
    width: 245px;
}

::placeholder {
    font-size: var(--small);
    color: var(--very-light-pink)

}

desktop.css

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

      .secondary-button {
          position: unset;
          bottom: unset;
       
      }

}

Queda mas fácil con el position absolute 😅

.primary-button{
                position: absolute;
                bottom: 0;
                margin-bottom: 24px;
            }

Debemos de analizar bien que es lo que hacemos, para poder identificar donde y como podemos hacer que nuestro código se adapte a los cambios necesarios que este requiere, muy buena la opción la que nos presenta la maestra Teff. Gracias!

Yo me animé a hacer el header y creo que me quedo muy parecido al mockup

justify-content: space-between; /*permite separar ambos elementos "div" de modo que uno queda arriba y el otro abajo para completar el height: 100%; */

Tip: usar la terminal del inspector para ver los resultados en vivo.

Interesante clase!!!

-MOBILE

-DESKTOP

tremenda clase muy buena y se va entendiendo cada vez mejor todo, el único detalle que en @media a la clase form- container le puse un heigth de 95% en ves de 100% para que el botón create no me quedara tan pegado en la parte de abajo

Excelente clase, entre práctica y práctica vamos apropiando estos conocimientos 😃

excelente clase

En algun momento sentía que esto del CSS iba a ser complicado para mi! Pero profe lo estas haciendo muy comprensible para mi! Ancioso de ver como se debe integrar un back cuando ya tenemos el diseño de esto!
Muchas gracias!

Hace unas pocas clases estoy intentando hacer las cosas antes de verlo en la clase, se lo recomiendo a todos hacer eso porque en el mundo real a la hora de trabajar no tendrás a alguien que te diga que hacer, por eso considero útil antes de empezar a ver el vídeo intentarlo uno mismo aunque te equivoques.

Recuerda:

Nunca pares de aprender

Pues jugando un poco con los parámetros esto es lo que obtuve.
Versión desktop:

Versión mobile:

Mi código 😄

<!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">
    <meta name="description" content="This is store of whatever">
    <meta name="robots" content="index, follow">
    <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];400;500;600;700&family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css" type="text/css">
        <title>Yard Sale</title>
    <style>
        .myaccount {
            display: grid;
            place-items: flex-start center;

            width: 100%;
            height: 100vh;
        }

        .myaccount__container {
            width: 100%;
            max-width: 42.5rem;
            height: 100%;
            padding: 2.4rem;
            display: grid;
            grid-template-rows: 10% 90%;
        }

        .myaccount__title {
            justify-self: flex-start;
            font-size: var(--lg);
        }

        .form {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .form_text-inputs{
            display: flex;
            flex-direction: column;
        }

        .myaccount__label {
            margin-bottom: 0.4rem;
            margin-top: .4rem;

            font-size: var(--sm);
            font-weight: bold;
        }

        .myaccount__input {
            height: 2.4rem;
            padding: 2rem;
            padding-left: .8rem;
            border: transparent;
            border-radius: 0.6rem;
            margin-bottom: 1.6rem;

            background-color: var(--text-input-field);
        }

        .button--primary {
            width: 100%;
            padding: 1.6rem;
            border: transparent;
            border-radius: 0.8rem;
            margin-bottom: 2rem;

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

            cursor: pointer;
        }

        .button--primary:hover {
            background-color: #73bf7d;
        }

        .button--primary:active {
            background-color: #4da859;
        }

    </style>
</head>
<body>
    <section class="myaccount">
        <div class="myaccount__container">
            <h1 class="myaccount__title">My account</h1>
            <form action="/" class="form">
                <div class="form_text-inputs">
                    <label for="name" class="myaccount__label">Name</label>
                    <input type="text" placeholder="Someone" name="name" class="myaccount__input" required>
                    <label for="email" class="myaccount__label">Email</label>
                    <input type="email" placeholder="[email protected]" name="email" class="myaccount__input" required>
                    <label for="password" class="myaccount__label">Password</label>
                    <input type="password" placeholder="*********" name="password" class="myaccount__input" required>
                </div>
            <input type="submit" value="Save" class="button--primary password__button--primary">
            </form>
        </div>
    </section>
</body>
</html>

Al inicio no entendí porque no se colocamos el logo, luego me percate que el logo se va a introducir en la barrita de arriba.

Me siento contento con este curso, pasar de la teoría a la practica es de lo mejor que se puede realizar en un proceso de aprendizaje.

Como recomendación a los nuevos integrantes como yo, aún nuestra profe desee reutilizar el codigo para el tiempo, haganlo todo desde el principio e intenten maneras distintas de desarrollar la misma maquetación, así, podran conocer a profundidad todo lo que necesitan.

Le pude poner el logo en el modo responsive. solo uve que modificar la clase .form-container solo tuve que colocar el display flex y flex-direcction column

Hola! Comparto mi diseño 😛

:root {
–white: #ffffff;
–black: #000000;
–very-light-pink: #c7c7c7;
–text-input-field: #f7f7f7;
–hospital-green: #acd9b2;
–sm: 14px;
–md: 16px;
–lg: 18px;
}

body {
font-family: ‘Quicksand’, sans-serif;
margin: 0;
background-color: var(–white);

}

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

}

.form-container {
display: grid;

width: 300px;
place-items: center;

}

.logo {
width: 150px;
justify-self: center;
margin-bottom: 48px;
display: none;

}

div .my-account {
font-size: var(–lg);
justify-self: left;
margin-bottom: 40px;

}

div .form-datos {
display: grid;
width: 100%;
padding: 0px;
align-self: flex-start;

}

div .form-datos input {
border: none;
font-size: var(–md);
color: var(–very-light-pink);
background-color: var(–text-input-field);
border-radius: 8px;
height: 35px;
margin-bottom: 14px;
padding-left: 10px;

}

div .form-datos label {
font-size: var(–sm);
color: var(–black);
font-weight: bold;
height: 25px;

}

.create-button {
background-color: var(–hospital-green);
border-radius: 8px;
border: solid 1.2px;
color: var(–white);
width: 100%;
cursor: pointer;
font-size: var(–md);
font-weight: bold;
height: 50px;
align-self: flex-start;
margin-top: 24px;

}

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

.form-container {
height: 100%;
grid-template-rows: auto auto 1fr auto;
}

.create-button {
margin-bottom: 40px;
}

}

Me encanta este curso práctico. Excelente para poner manos a la obra!!

este curso es muy bueno , lo confirmo con cada clase

Mobile

Desktop

: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-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: none;
}

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

/* My account */

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

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

.title {
    font-size: var(--lg);
    font-weight: bold;
    text-align: left;
    margin-bottom: 4rem;
}

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

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

.input {
    font-size: var(--sm);
    color: var(--very-light-pink);
    background: var(--text-input-field);
    border: none;
    border-radius: 1.2rem;
    height: 3rem;
    padding: 1rem;
    margin-bottom: 2.4rem;
}

.primary-button {
    border: none;
    font-size: var(--md);
    font-weight: bold;
    color: var(--white);
    border-radius: 1.2rem;
    height: 6rem;
    padding: 1rem;
    text-align: center;
    background: var(--hospital-green);
    cursor: pointer;
    margin-top: 1.2rem;
}

@media (max-width: 640px) {

    .navbar-icon {
        display: block;
        margin: 1.2rem 5rem 0 0.8rem;
    }

    .navbar-left ul ,
    .navbar-sign {
        display: none;
    }

    .main-container {
        height: 50vh;
    }

    .primary-button {
        position: absolute;
        width: 35rem;
        bottom: 0;
        margin-bottom: 2rem;
    }

}
<!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_Icons/icon_menu.svg" alt="icon_menu" class="navbar-icon">
            <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="main-container">
        <div class="form-container">
            <h1 class="title">My Account</h1>
            <form class="form">
                <label for="name">Name</label>
                <input type="text" id="name" class="input name-input" placeholder="Camila Yokoo">

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

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

                <button class="button primary-button">Create password</button>
            </form>
        </div>
    </div>
</body>
</html>

Yo solo necesité colocar:

@media (max-width: 640px) {
    .form {
        justify-content: space-between;
    }
}

Ya que yo puse desde un principio mi form así:

.form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

Y el form-container así:

.form-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 300px;
    height: 100%;
}

no pude colocar el titulo como la profe lo coloco asi que tuve que hacerlo de otra forma por que me agarraba la modificacion que ella hacia y tuve que colocar le esto

.title{
    font-size: var( --lg);
    margin-bottom: 10px;
    align-items: center;
    justify-self: self-start;
    padding: 22px;
  }

Yo lo que hice para que el login-button bajara cuando se cumpliera la condición del @media fue colocarle un “position: relative;” junto a un “top: 20rem;” al estar en una pantalla de 640px o menos.

Estoy emocionado, porque me adelanto a lo que hace la profe, yo lo hago primero y luego comparo y me está saliendo todo como debe ser.
Vengo de ser un backend y desktop developer a sentirme como un niño con CSS. Feliz!!!

Buenas noches. Yo hice mi reto así, y me funciono súper.

 @media (max-width: 600px) {
            .signup-button{
                position: fixed;
                bottom: 0;
                width: inherit;
                margin-bottom: 30px;
            }
        }

Mi solución al reto.

<code> 
@media (max-width: 640px) {
  .logo {
    display: block;
    margin-top: 40%;
  }
  .form a{
    margin-bottom: 0;
  }
  .form-container{
    height: inherit;
  }
  .signup-button{
    margin-bottom: 30px;
  }

}

Terminado

Hice el navbar y así es como me quedo:

HTML

    <nav>
      <ul>
        <img src="./images/icon_menu.svg" alt="Menu icon" />
        <img
          src="./images/logo_yard_sale.svg"
          alt="Logo Yard Sale"
          class="logo"
        />
        <img src="./images/icon_shopping_cart.svg" alt="Shopping Cart icon" />
      </ul>
    </nav>

CSS

nav ul {
  width: 100%;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
}
nav ul li {
  list-style: none;
}
.logo {
  width: 120px;
}

La profe de 10!, pero se me hace muy confuso el estar usando las etiqueta <style>.

Esta es la mejor forma de crear espaciado entre componentes

Interesante