Navbar

Haz pequeños cambios desde Dev Tools 😃

Hola chicas y chicos les quiero mostrar como uno puede guardar los cambios desde dev tools, esto es muy practico pero es recomendable solo hacer en los elementos que tenemos problemas, lo ideal es siempre trabajar desde nuestro entorno.
.

• Estando en el navegador irán a devtools y allí se posicionaran en source.

• Luego van a darle click a la opcion que esta abajo que dice “Add folder to workspace” o añadir carpeta a tu espacio de trabajo y seguido se posicionan en la carpeta que están trabajando y le dan seleccionar carpeta.

• Finalmente saldra un aviso en la parte superior de la pantalla donde lo único que deben hacer es dar click en “Allow”

.
Les deberá salir algo como esto. 😮

¡Y eso es todo! 😃 Ahora pueden realizar cambios que se reflejaran en tiempo real con su entorno de desarrollo.

NavBar

Les dejo mi resultado:

• Para resolver el problema de la posición final de la animación del Logo le agregue 30px de padding-top, quedando:

.navbar__content {
	    ....
	    padding: 30px 0 0 80px;
	    .....
}

Me gusto mucho esta clase, sin duda la aplicación del display grid con flexbox es una combinación muy buena.
Les dejo el código de esta clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/5-navbar

Aporte:
Para utilizar el shorthand de la propiedades de animación (animation), existe un estándar que determina el orden en que ponemos las propiedades dentro del valor de animation, el cual es:

animation:  [ <'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||<'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'> ] 

Un ejemplo seria:

animation: test 2s ease-in 0.2s infinity alternate forwards;

Si no te sigue tomando las FONTS, aca te dejo el link:

@import url('https://fonts.googleapis.com/css2?family=Lato:[email protected];100;300&display=swap');

A mi no me lo tomaba, lo modifique y con este me tomo

Literalmente una chimba esto de Sass (La animación sigue igual).

.navbar {
  grid-area: nav;

  div {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 30px 0 0 60px;
    animation: 2s navTo 0.1s ease-in-out;
    img {
      width: 50px;
    }

    ul {
      display: flex;
      justify-content: space-evenly;
      list-style: none;
      padding: 0;
      width: 450px;
      a {
        color: $color-secundary;
        text-decoration: none;
        font-weight: 700;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

El texto no lo toma, ya que la profesora tomó letras Italic.
Hay que tomarlas sin el Italic para no tener ese problema de que no ponga el tipo de letra.
Este seria el link
@import url(‘https://fonts.googleapis.com/css2?family=Lato:[email protected];300;700&display=swap’);

Cada elemento debe ir dentro de su bloque

.navbar {
    background-color: pink;
    grid-area: nav;
}

.navbar .navbar__content {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 80px;
    animation: navbar 2s 0.5s ease-in-out;
}

@keyframes navbar {
    0% {
        transform: translateY(-200px);
    }
    100% {
        transform: translateY(0);
    }
}

.navbar .navbar__content img {
    width: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar .navbar__content ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    padding: 0;
    width: 450px;
}

.navbar .navbar__content ul li a {
    text-decoration: none;
    color: var(--secundary-color);
    font-weight: 400;
}