Contenido lateral

Asi va el mio 😄

super

Dejo mi avance en las clases, me está gustando cómo está quedando

Contenido lateral

Bueno entonces el contenido lateral fue como más intuitivo con lo ya visto en clases anteriores, con ciertas modificaciones, eso significa que es muy importante tener una base solida en la prop: animation y @keyframes
Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/7-contenido-lateral

animation-fill-mode: forwards

El objeto sobre el que se aplica la animación quedará con los valores y estilos que le aplique el último keyframe de la ejecución de la animación

Conoce mas

Para quienes quieran cambiar la orientación del texto y ponerlo en vertical. Pueden usar:

.nombre del contenedor a cambiar {
writing-mode: vertical-rl;
text-orientation: upright;
}

 
así vamos ;D código

Yo lo hice con posición absoluta;

CSS:

.container .aside-content {
  grid-area: aside;
  position: relative;
}

.aside-content .cont-yellow {
  width: 50%;
  height: 100%;
  background: var(--yellow);
  position: absolute;
  right: 0;
}

.aside-content h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 100;
  position: absolute;
  top: 50%;
  transform: translate(-30%, -50%) rotate(-90deg);
  opacity: 0;
  animation: nombre-superheroe 1.5s linear 3s forwards;
}

.aside-content img {
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  animation: move-superheroe 1.5s ease-in-out 3s forwards;
}
 

HTML:

<div class="aside-content">
        <div class="cont-yellow"></div>
        <h2>Superman</h2>
        <img src="https://i.ibb.co/x16pz1x/super-man.png" alt="superman" />
      </div>

Yo solucione el tema del z-index agregando

    animation-fill-mode: forwards;

Si utilizamos un linear gradient sobre el contenedor principal, nos evitamos estilar el div con el fondo amarillo:

.page .aside .aside__content {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(6, 1fr);
place-items: center;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 50%, rgba(255,250,0,1) 50%, rgba(255,250,0,1) 100%);
}

Por fin el mítico Yeeeiii! de la profe teff. 😄

Hi people!
En esta clase Teff utiliza un div para generar el fondo amarillo del Side, les quiero compartir otra manera de hacerlo. Simplemente establecemos el siguiente gradiente al fondo:

background-image: linear-gradient(90deg, var(--bg) 50%, var(--yellow) 50%);
/*Creamos un gradiente del color del fondo y el amarillo*/

Espero que lo prueben y les funcione también.

Mi trabajo va chulo, no lo enseño porque me pueden copiar. 😑 jaja ntc xD

esta fallando la cargacde los videos que triste ni pa eso sirve el internet

El superman se pudo haber hecho con position fixed y luego posicionar verticalmente al 50vh y tantear horizontalmente dependiendo del tamaño de rectángulo amarillo. Sin necesidad de grid!

Que buenos consejos como hacer una animacion y como planear posicionamiento de los elementos usando maquetacion! Me gusta mucho como se mueve Lego Superman!