Navbar: CSS

Fav si te diste cuenta que el error en la navbar-right era no haber puesto “ul”

Yo quise unirlo al Index para verlo en contexto y así me quedó:

MOBILE

DESKTOP

Soy una pequeña fan de los errores u “olvidos” de la profe Estefany. No sé si son a propósito o si son precisos para ponernos en la práctica. De cualquier forma, son útiles para entender el porqué de algo que no funciona, hacernos pensar un poco más allá de solo seguir lineales en la clase. Lo disfruto mucho cuando encuentro una respuesta o darme cuenta de que debió ser de otra forma y luego ver la corección. En fin. Este curso está muy bueno. 💯

Woow!! Me encanto hacer este Navbar, quedo muy muy bien, ella es buena, pero siento que en ocasiones se enreda un poco para explicar. Pero sin duda alguna estamos aprendiendo mucho en este curso, Muchas gracias Estefany.

Yo agregué otros logos e íconos para experimentar, estoy disfrutando el curso c:
 

• Desktop:
   
  
  
   
• Mobile:
   
  
  

Para que no causen problemas los marges por defecto se usar…

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

así reiniciamos los estilos del navegador.

Estilos CSS

nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
}

.menu {
    display: none;
}

.nav-logo {
    width: 100px;
}

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

.navbar-left { 
    display: flex;
    margin-left: 12px;
}

.navbar-left ul{ 
    display: flex;
    margin-left: 12px;
}

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

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

.navbar-email {
    color: var(--very-light-pink);
    font-size: 12px;
    margin-right: 12px;
}

.navbar-shopping-cart {
    position: relative;
}

.navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-weight: bold;
    font-size: 12px;
    position: absolute;
    top: -6px;
    right: -3px;
    justify-content: center;
    align-items: center;
    display: flex;
}

Ver como se crea desde cero me resulto asombroso

Mi resultado, note que hacia falta la flechita y opté por agregarla

codigo de la flechita:

.email-nav img{
    margin-left: 10px;
    transform: rotate(90deg);
}

Así se pueden ahorrar una linea o 2 😃

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

MI navbar! Lo hice sin seguir la clase para retarme 😊

Le añadí al circulo que encierra el numero “2” un :

            opacity: .8;

para que el carrito de compras no perdiera la imagen.

Hola a todos! Esta clase en particular me gustó porque se vio el uso del position relative y el absolute muy claro. Además, se usaron varias propiedades de CSS que en la práctica uno va entendiendo poco a poco. Así quedaron mis pantallas para desktop y mobile. Le añadí la flechita por lo cual adjunto el código que usé para esto.

Navbar-desktop

Navbar-mobile

HTML

 <li>
            <img src="./Platzi_YardSale_Icons/flechita.svg" alt="arrow" class="flechita">
          </li>

CSS

.navbar-right {
        display: flex;
      }
.flechita {
        transform: rotate(90deg);
        margin-right: 24px;
      }
@media (max-width: 640px) {
        .menu {
          display: block;
        }
        .navbar-left ul {
          display: none;
        }
        .navbar-email {
          display: none;
        }
        .flechita {
          display: none;
        }
      }

Después de esta clase (y en general de este curso), de experimentar y probar, me siento poderoso y listo para ir por retos más desafiantes en FrontEnd

Si tambien te aparecio un scrollbar horizontal, el padding de los lados que tiene el nav hace que se desborde, así que para arreglarlo hice lo siguiente:

nav {
	/* Todo lo demas */
	box-sizing: border-box;
	overflow: hidden;
}

Algo que note en la parte de responsive es que al llegar a menos de 800px se generaba un scroll horizontal.
![](

Lo que hice fue modificar el media query:

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

A esto:

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

![](

Solo es un pequeño detalle pero no queria ese scroll horizontal:3

Asi quedo mi navbar
Desktop
![](

Mobile
![](

Resultado:

Es una super mala práctica colocar los tamaños de los pixeles al ojo, lo mejor es revisar el diseño en figma y buscar los tamaños de cada componente, fuente, logos!

Que tal mi nav con tema oscuro. 😲

Espero que les sirva de inspiración. ¡¡saludos!!

Pensé que los 20 minutos se me iban a hacer largos pero con Estefany se me hicieron cortos y me quedo un navbar cool

Esta clase es simplemente hermosa

Descubrí que se puede usar el @media dentro de otro @media para poder dimensionar más específicamente. SÚPER INTERESANTE!!!

Mi navbar, le agregue el iconito de la flechita al lado del correo que hizo falta agregar en la clase.
desktop

mobile

(url)

text-decoration: none; la usamos para:

Quedo fue nene 😌

esss HEEEERMOSOOOOOO!

Corrección(Maquetado HTML)

En la clase pasada nuestro contenedor navbar-rightla teniamos asi:

        <div class="navbar-right">
                <li>[email protected]</li>
                <li class="navbar-shopping-cart">
                    <img src="./assets/icons/icon_shopping_cart.svg" alt="shopping cart icon"/>
                    <div>2</div>
                </li>
        </div>

Pero la profesora omitio la parte en la que se debía agregar la etiqueta <ul>:

        <div class="navbar-right">
            <ul>
                <li>[email protected]</li>
                <li class="navbar-shopping-cart">
                    <img src="./assets/icons/icon_shopping_cart.svg" alt="shopping cart icon"/>
                    <div>2</div>
                </li>
            </ul>
        </div>

Y ya!

Me agradó lo de la “burbuja” de contador que sale junto a la imagen del carrito. Genial

Para alinear el menú con el logo, simplemente añadí un margin: 0; al .navbar-left ul, .navbar-right ul

Excelente clase!!!

Desktop:

Mobile:

Toca tener mucha atención al escribir las clases, duré casi que 3 horas averiguando porque el circulito no estaba en posición y era porque la clase la tenía escrita car en lugar de cart xd

Me quedó igual. Pienso que se podía prescindir del border blanco que le pone a cada li, ya que la idea es poner un borde verde al hacer el hover.
Se entiende que así queda claro que un borde pasa de un color a otro según su estado, pero no hace falta esa linea de 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" >
    <link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
    <title>Yard Sale</title>
    <style>
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .menu{
            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 2rem;

            box-shadow: 0px 7px 15px -8px rgba(199,199,199,1);
        }
        .menu__logo{
            width: 16rem;
        }
        .menu__list-container
        {
            display: flex;
        }
        .menu__link{
            padding: 1rem;
            border: .1rem solid transparent;
            border-radius: .4rem;

            color: var(--very-light-pink);
            font-weight: 700;
            font-size: var(--md);
        }
        .menu__link:hover{
            border-color: var(--hospital-green);

            color: var(--hospital-green);
        }
        .menu__user{
            display: flex;
            align-items: center;
        }
        .menu__email{
            margin-right: 2rem;
        }
        @media (min-width: 1024px) {
           .menu__burguer{
               display: none;
           }
        }
        @media (max-width: 1023px)
        {
           .menu__list-container{
               display: none;
           }
           .menu__email{
               display: none;
           }

        }

    </style>
</head>
<body>
    <nav class="menu">
        <img src="icons/icon_menu.svg" alt="burguer menu" class="menu__burguer">
        <figure class="image-container">
            <img src="logos/logo_yard_sale.svg" alt="logo" class="menu__logo">
        </figure>
        <ul class="menu__list-container">
            <li class="menu__item"> <a href="#" class="menu__link">All</a> </li>
            <li class="menu__item"> <a href="#" class="menu__link">Clothes</a> </li>
            <li class="menu__item"> <a href="#" class="menu__link">Electronics</a> </li>
            <li class="menu__item"> <a href="#" class="menu__link">Furniture</a> </li>
            <li class="menu__item"> <a href="#" class="menu__link">Toys</a> </li>
            <li class="menu__item"> <a href="#" class="menu__link">Others</a> </li>
        </ul>
        <div class="menu__user">
            <span class="menu__email">[email protected]</span>
            <img src="icons/icon_shopping_cart_notification.svg" alt="shopping cart notificacition">
        </div>
    </nav>
</body>
</html>

Recuerden que pueden copiar el código html de un trabajo anterior para no volver a hacer copy & paste. Esto lo hice con “cp” en la terminal.

cp archivo_copiado.html archivo_nuevo.html

ooooo brutal genial ajajaj

Así me quedaron ambas

Apartir del minuto 16 cuando empieza a explicar como acomodar la imagen con el 2, Creo que es toda una pieza para que estudiemos.

a mi me iva faltando algo tan importante como declarar la clase de menu jaja y me toco ispeccionar jajaj

Enamorada del proyecto que estamos haciendo.

Agregué la flecha hacia abajo en el diseño desktop solo agregando el icono en el HTML debajo del email de esta forma:

<li class=“navbar-arrow”>
<img src="./icons/flechita.svg" alt=“arrow”>
</li>

Y en el CSS:

.navbar-arrow {
margin-right: 10px;
transform: rotate(90deg);
}

Como en la versión mobile no aparece la imagen de la flecha, solo la quité en el @media como ya sabemos:

.navbar-arrow {
display: none;
}

He visto que varias personas preguntan por los shortcuts que usa la profe. Comparto una lista de ellos tanto para windows como para Mac (Muy útil):

• Windows
• Mac

Las listas ya las había compartido otro compañero en aportes de clases anteriores.

Así la mobile…

y así la desktop

Así nos quedo…

Así me quedó mi deseño.

![](

)

![](

)

La verdad que las clases son geniales… A mi toco fue agregarle el alto y ancho al icono pues me aparecia muy grande del tamaño de la barra pero del resto todo genial.

Me encatan estas clases, más allá de lo que digan, de verdad que aprendo montones, además con tu calma y tranquilidad, se puede seguir la clase sin ningún lío. y aún así me píerdo… jajajajajja!!!

A mi carne no le gusta ponerme a prueba pero lo ideal es ver la clase antes de ir al código y luego tratar de hacer lo mismo que la profe sin ver la clase (en este caso vi una parte porque ya era mucha información y luego lo mismo con otra parte de la clase) porque sino solo estaría copiando lo que la profe escribe sin entender gran parte o sin exigir mi mente cómoda engañándome, creyendo que construí algo cuando no hice nada; Así pretendo simular un entorno real de trabajo.
Me demoro mucho más pero no importa, ese es el “precio” que debo pagar para aprender bien. Me arrepiento de no haber hecho esto desde la primera clase porque ya quería llegar pronto a la parte de Javascript pues estoy la Escuela de Javascript y aún no veo nada de Javascript por acá (y eso normal, todo es un proceso) y solo acierto la mitad del diseño css y debo ver otra vez la clase.
Me duele un poco, no me gusta mucho el diseño, a mi confort le duele, a mi carne no le gusta pero por lo menos no me siento vacío al terminar la clase porque estoy haciendo las cosas a conciencia y cuando lo hago siento que si lo aproveché y aprendí algo nuevo y no solo copié, además es bueno que me obligarme a amar lo aprendido y a recordarlo, a no ser escéptico y a no dudar de la profe.
Lo que me “duele más” es que esto es solo el principio, son los primeros pasos y que esto no es nada, son solo cosquillas.

Sé que si quiero tener éxito en esto debo hacer varios proyectos propios para tener un portafolio y no he hecho ningún proyecto, por lo menos ningún proyecto decente todavía. Pero no me voy a rendir. Hasta el final. Grrrrrrrrrrrrr. Muere carne!

Hice un par de cambios para hacer el navbar más fiel al diseño del team platzi, que les pareces? Hay cosas que se pueden mejorar en el código? Gracias por su tiempo y ayuda!

El codigo.

<!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-fiel: #f7f7f7;
            --hospital-green: #acd9b2;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 60px;
            height: 60px;
            border-bottom: 1px solid var(--very-light-pink);
        }
        .header div {
            height: 100%;
        }
        .header ul{
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
        }
        .header ul li a {
            text-decoration: none;
            color: var(--very-light-pink);
            border: 1px solid var(--white);
            padding: 8px;
            border-radius: 12px;
        }
        .header ul li a:hover {
            border: 1px solid var(--hospital-green);
            color: var(--hospital-green);
        }
        .menu {
            display: none;
        }
        .logo {
            width: 150px;
        }
        .navbar-left {
            display: flex;
            font-size: var(--md);
            gap: 28px;
        }
        .navbar-left ul {
            margin-left: 12px;
            gap: 20px;
        }
        .navbar-email {
            color: var(--black);
            font-size: var(--sm);
        }
        .navbar-right {
            display: flex;
            justify-content: center;
        }
        .navbar-right ul{
            gap: 48px;
        }
        .navbar-shopping-cart {
            width: 28px;
            height: 28px;
            position: relative;
        }
        .navbar-shopping-cart img{
            width: 100%;

        }
        .navbar-shopping-cart div{
            width: 16px;
            height: 16px;
            background-color: var(--hospital-green);
            border-radius: 50%;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            top: -5px;
            right: -5px;
        }
        @media (max-width: 640px) {
            .header {
                padding: 0 28px;
            }
            .menu {
                display: block;
            }
            .navbar-left ul {
                display: none;
            }
            .navbar-email {
                display: none;
            }
        }
    </style>
</head>
<body>
    <nav class="header">
        <img src="./icons/icon_menu.svg" alt="menu" class="menu">

        <div class="navbar-left">
            <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

            <ul>
                <li>
                    <a href="/">All</a>
                </li>
                <li>
                    <a href="/">Clothes</a>
                </li>
                <li>
                    <a href="/">Electronics</a>
                </li>
                <li>
                    <a href="/">Furnitures</a>
                </li>
                <li>
                    <a href="/">Toys</a>
                </li>
                <li>
                    <a href="/">Others</a>
                </li>
            </ul>
        </div>

        <div class="navbar-right">
            <ul>
                <li class="navbar-email">[email protected]</li>
                <li class="navbar-shopping-cart">
                    <img src="./icons/icon_shopping_cart.svg" alt="shoping cart">
                    <div>2</div>
                </li>
            </ul>
        </div>
    </nav>
</body>
</html>

Hola equipo,

No se si notaron que quedo un reto pendiente aunque la profesora no lo menciono, este es la flechita que va al lado del email. 😃 bueno les comparto las imagenes de como me quedo y tembien el codigo ya que resolvi la clase con algunas diferencias en el codigo respecto a como lo soluniono Estefany.

<!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]300;500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        :root{
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
            --dark: #232830;
            --dark-ligth: #5d626a;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        nav{
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: space-between;
            height: 60px;
            border-bottom: 1px solid var(--very-light-pink);
        }
        .menu{
            display: none;
        }
        .logo{
            width: 144px;
            padding-left: 40px;
        }
        .nav-bar-left{
            display: flex;
            flex-direction: row;
        }
        .nav-bar-left ul{
            display: flex;
            flex-direction: row;
            list-style: none;
            align-items: center;
            font-size: var(--md);
            margin: 0;
        }
        .nav-bar-left ul li a{
            text-decoration: none;
            color: var(--very-light-pink);
            padding: 8px;
            border-radius: 8px;
            border: 1px solid var(--white);
        }
        .nav-bar-left ul li a:hover{
            border: 1px solid var(--hospital-green);
            color: var(--very-light-pink);
            color: var(--hospital-green);
            border-radius: 8px;
        }
        .nav-bar-rigth{
            display: flex;
            flex-direction: row;
        }
        .nav-bar-rigth ul{
            display: flex;
            flex-direction: row;
            list-style: none;
            align-items: center;
            font-size: var(--sm);
            margin: 0;
            padding: 0;
        }
        .nav-bar-rigth ul:nth-child(2){
            margin: 0;
            padding: 10px;
            transform: rotate(90deg);
        }
        .nav-bar-rigth ul:nth-child(3){
            padding: 20px;
        }
        .arrow-vertical{
            width: 5px;
        }
        .nav-bar-shoppingcart{
            position: relative;
            }
        .nav-bar-shoppingcart div{
            width: 16px;
            height: 16px;
            background-color: var(--hospital-green);
            font-size: 12px;
            font-weight: bold;
            border-radius: 50%;
            position: absolute;
            top: -6px;
            right: -3px;
            display: flex;
            justify-content: center;
        }
        @media (max-width:640px)
        {
            .menu{
                display: block;
                width: 23px;
                margin-left: 20px;
            }
            .logo{
                width: 55%;
                padding-left: 65px;
            }
            .nav-bar-left ul{
                display: none;
            }
            .nav-bar-rigth ul:nth-child(1){
                display: none;
            }
            .nav-bar-rigth ul:nth-child(2){
                display: none;
            }
        }
    </style>
</head>
<body>
    <nav>
        <img src="./icons/icon_menu.svg" alt="menu" class="menu">
    
    
        <div class="nav-bar-left">
          <img src="./Logos/logo_yard_sale.svg" alt="logo" class="logo">

            <ul>
                <li><a href="/" id="all">All</a></li>
                <li><a href="/" id="clothes">Clothes</a></li>
                <li><a href="/" id="electronics">Electronics</a></li>
                <li><a href="/" id="furniture">Furniture</a></li>
                <li><a href="/" id="toys">Toys</a></li>
                <li><a href="/" id="others">Others</a></li>
            </ul>
        </div>

        <div class="nav-bar-rigth">
            <ul>
                <li>[email protected]</li>
            </ul>
            <ul>
                <li>
                    <img class="arrow-vertical" src="./icons/flechita.svg" alt="">
                </li>
            </ul>
            <ul>
                <li class="nav-bar-shoppingcart">
                    <img src="./icons/icon_shopping_cart.svg" alt="">
                    <div>2</div>
                </li>
            </ul>
       </div>
    </nav>
</body>
</html>

En esta ocasión, como no estamos redifiniendo estilos, para que no se quede por fuera de pantalla el menú al usar padding en el navbar, sería conveniente agregar el siguiente código.

Sé que lo mejor sería redifinir estilos, pero por el curso lo estoy usando solo donde está causando problemas

nav{
    box-sizing: border-box;
}

Esta ha sido una de mis clases favoritas.
Se agradece este tipo de contenido.
La repetición de conceptos me ha ayudado y a incorporarlos de forma progresiva.

Una recomendación es que envés de colocar la propiedad height de 60px en cada lado del navbar (left y right) bastaba con añadir al padding del .nav el valor que se requería, y automáticamente se ajustaba todo el nav.

Me costó un poco de trabajo arreglar el problema de que no se mostraban los iconos de las orillas, tenía que quitar la propiedad width: 100% de mi nav! 😅

Me encanta que dejan los “errores” hace la clase más natural y muestra la realidad de construir proyectos

nav{
            display: flex;
            justify-content: space-between;
            margin: 0 24px;
            border-bottom: 1px solid var(--very-light-pink);
        }

        .menu {
            display: none;
        }

        .logo{
            width: 120px;
        }

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

        .navbar-left ul{
            margin-left: 12px;
        }
        .navbar-mail{
            color: var(--very-light-pink);
            font-size: var(--sm);
            margin-right: 12px;
        }

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

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

        .navbar-shopping-cart{
            position: relative;
        }

        .navbar-shopping-cart div{
            width: 14px;
            height: 14px;
            font-size: var(--sm);
            background-color: var(--hospital-green);
            border-radius: 50%;
            position: absolute;
            top: -6px;
            right: -3px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
        }

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

            .navbar-left ul{
                display: none;
            }

            .navbar-mail{
                display: none;
            }
        }

Me quedo igualito.

me quedo igual

hola lo realice con display grid

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">
  <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="stylesheet" href="navbar.css">
  <title>Document</title>
</head>
<body>
  <nav>
    <img src="/icons/icon_menu.svg" alt="menu" class="menu">
    <img src="/logos/logo_yard_sale.svg" alt="logo" class="logo">
    <ul class="products">
      <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>
    <ul class="email">
      <li>
        <p>[email protected]</p>
      </li>        
    </ul>
    <img src="/icons/icon_shopping_cart_notification.svg" alt="" class="cart">
  </nav>
</body>
</html>

CSS

:root {
  --very-light-pink: #C7C7C7;
  --text-input-field: #F7F7F7;
  --hospital-green: #acd9b2;
  --dark: #232830;
  --white: #ffffff;
  --black: #000000;
  --sm: 14px;
  --md: 16px;
  --lg: 18px;
}
    
body {
  font-family: 'Quicksand', sans-serif;
  margin: 0px;
  
}
nav {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  padding: 0px 40px;
  place-items: center;
  border-bottom: 1px solid var(--text-input-field);
  justify-items: left;
}
nav .menu {
  display: none;
}
nav .logo {
  width: 150px;
  height: 50px;
}
nav .products,
nav .email {
  list-style: none;
  display: flex;
  margin: 0px;
}
nav .products li {
  margin: 0px 4px;
}

nav .products li a,
nav .email li a {
  text-decoration: none;
  padding: 4px 16px;
  color: var(--very-light-pink);
  border: 1px solid var(--white);
}

nav .products li a:hover,
nav .email li a:hover {
  border: 1px solid var(--hospital-green);
  border-radius: 8px;
  color: var(--hospital-green);
}

nav .email li p {
  color: var(--dark);
  font-weight: 300;
  margin-right: 20px;
}
nav .cart {
  width: 35px;
  height: 35px;
  cursor: pointer;
}

@media (max-width:640px) {
  nav .products,
  nav .email {
    display: none;
  }
  nav .logo {
    width: 100px;
    height: 30px;
  }
  nav {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
  }
  nav .menu {
    display: block;
  }

}

Desktop

Mobile

Hola, la clase estuvo genial.

A la hora de realizar el cambio del color de nuestra lista que colocamos en la parte derecha, la profe volvió a copiar ambas clases, algo que es innecesario.

También, en el diseño que nos entregó el equipo de Platzi, el color y el borde de las listas cambian, y creo que a la profe le hizo falta colocar esas propiedades.

Esa parte del código quedaría así:

Corrección del UL de la profe

        <div class="navbar-right">
            <ul>
                <li class="navbar-email">[email protected]</a></li>
                <li class="navbar-shopping-cart">
                    <img src="/assets/icons/icon_shopping_cart.svg" alt="shopping cart">
                    <div>2</div>
                </li>
            </ul>
        </div>

¡Este vídeo ha sido de los mejores para mí!
He aprendido un montón.

Mi versión desktop:
![](

Mi versión mobile:

• Le pude agregar la flechita que faltaba al email.

1. Encapsular el email en una etiqueta contenedor “p”.

2. Encapsular una etiqueta “img” en un div, y por supuesto invocar al incono.
   

   

3. Luego hacemos a la caja padre display flex para que sus hijos estén alineados.

4. Invocamos al contenedor “div” y lo rotamos 90 grados.
   

   
   

   

Desde el incio de la clase tuve un error y no me encajaban los elementos del nav y todo fue por que al momento de estilizar escribí

.nav {

en vez de

nav {

Un pequeño detalle hace que el código no fluya y tu estado de animo se ponga tenso, me di cuenta del error en los últimos 30seg de la clase. #NuncaParesDeAprender

Comparando la visualización de acuerdo a sus medidas

Para los navs me sigue encantando la magia de Flexbox 💚
🌐 Les comparto mi código en GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista Desktop:

.
Vista Móvil:

Comparto mis resultados:

Hay un error en el responsive para tablets, yo lo parcheé con otro media query reduciendo algunos margins y paddings

Estos son mis apuntes de esta clase:

• align-items: centers; // para ponerse una al lado de la otra de manera centrada.
• text-decoration: none; // para quitar la raya inferior del enlace.
• el .Nav se estila despues de estilizar al navbar-left
  Y luego el navbar-right.
  *border-bottom: 1px solid var();//para colocar la línea inferior de la barra de navegación.
  *border-radius: 50%; // para que sea un circulo el background creado.

y en cuanto a las imagenes del carrito de compra y el numero adicionado.
El carrito de compra tendrá una posición relativa y el numero encima del carrito, una absoluta para que pueda estar encima y luego se ubique de manera adecuada.

!! recuerda siempre que en .CSS para hacer responsivo se utiliza @media.

Que tal campeon, Buen dia. increible avance…

mobile

tab menu

desktop

Esta quedando, de rechupete 👌

Mis estilos CSS

 <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;
      font-family: 'Quicksand', sans-serif;
    }
    nav {
      display: flex;
      justify-content: space-between;
      padding: 0 24px;
      border-bottom:  1px solid var(--very-light-pink);
    }
    .menu {
      display: none;
    }
    .logo {
      width: 100px;

    }
    .navbar-left ul,
    .navbar-right ul {
      list-style: none;
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      height: 60px;
    }
    .navbar-left {
      display: flex;
      align-items: center;
    }
    .navbar-left ul {
      margin-left: 12px;
      margin-bottom: 0;
    }
    .navbar-left ul li a,
    .navbar-right ul li a {
      text-decoration: none;
      color: var(--very-light-pink);
      border: 1px solid var(--white);
      padding: 8px;
      border-radius: 8px;
    }
    .navbar-left ul li a:hover,
    .navbar-right ul li a:hover {
      border: 1px solid var(--hospital-green);
      color: var(--hospital-green);
    }
    .navbar-email {
      color: var(--very-light-pink);
      font-size: var(--sm);
      margin-right: 12px;
    }
    .navbar-shopping-cart {
      position: relative;
    }
    .navbar-shopping-cart div {
      width: 16px;
      height: 16px;
      background-color: var(--hospital-green);
      border-radius: 50%;
      font-size: var(--sm);
      font-weight: bold;
      position: absolute;
      top: -7px;
      right: -7px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @media (max-width: 640px) {
      .menu {
        display: block;
      }
      .navbar-left ul {
        display: none;
      }
      .navbar-email {
        display: none;
      }
    }
  </style>

Tuve problemas con el menú porque me aparecía muy grande, así que le di un width de 30px y ya quedo nice.