No tienes acceso a esta clase

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

Navbar

5/12
Recursos

Aportes 7

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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.

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