No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Navbar

5/12
Recursos

Aportes 11

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淎dd 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 鈥淎llow鈥


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

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;

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

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

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

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

Recuerden

  • linear: sin variaciones de velocidad.
  • ease: lento al principio, r谩pido en el medio y no tan r谩pido al final. (parecido a ease-in-out)
  • ease-in: lento al principio, r谩pido al final.
  • ease-out: r谩pido al principio, lento al final.
  • ease-in-out: lento al principio, r谩pido en el medio y de nuevo lento al final

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:wght@100;300;700&display=swap鈥);



intente hacerlo antes de ver la clases pero no pude T^T.

Mi idea era hacer el contendor del header relative y su contenedor hijo Absolute para poder controlar la posici贸n con top en la animacion.
Pero eso me hizo desacomodar todo por completo me pelee un rato con las posiciones, en fin me rendi y decid铆 ver la implementaci贸n de la profe鈥 en fin aprend铆 que lo mas obvio puede ser la soluci贸n XD

el c贸digo esta en mi github por si alguien quiere darle una checada

ya esta habilitada la funcion de agregar el ampersan 鈥&鈥 en css entonces tambien lo puedes hacer asi

.navbar__content {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0 0 80px;

    & img {
        width: 50px;
    }
}

Yo me anime hacerlo un poco diferente: lo que hice fue que el nav iniciara con un transform: translateY(-100px); y la animaci贸n simplemente se encargaba de ```
@keyframes navbar {
100% {
transform: translateY(0);
}
}

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