Contenido principal

Las devTools de Chrome tiene una herramienta que me gusto mucho.
.

.
Que te permite modificar el

cubic-bezier

Tiene varios estados predeterminados para escoger.
.

.
Pero también puedes modificar los punto de Bézier a tu antojo.
.

.
Is Amazing!

Contenido Principal

Esta clase me gusto mucho, ya que el proyecto va madurando y teniendo vida con las animaciones, transiciones, y el display flex que fue nuestra solución para el problema de posición del logo:

• Les dejo mi resultado hasta el momento
  
  
  Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/6-contenido-principal

**Te dejo un enlace donde puedes ver el codigo por si tienes alguna duda
**
https://github.com/silfredo11/Lego-company-website-

Habia olvidado un pequeño detalle de las animaciones y me fui a la documentación. Esta brutal la doc 😮

Animaciones

Una explicacion muy profesional como trabajar con navbar y main content.

OJO

No le ponemos display: grid; al elemento main-content porque su elemento padre, container ya tiene esa propiedad, que lo convierte en un grid container y a sus hijos en grid items, como mini gridcitos jajaja, asi que heredan la capacidad de recibir propiedades asi tal cual.

Consejo

Una forma fácil para no tener que escribir una cantidad en píxeles es usar porcentajes.

.main-content {
  transform: translateY(-100%);
  animation: 
      main-content
      0.5s
      ease-in-out
      forwards
      2s;
}
@keyframes main-content {
 100% { transform: translateY(0) } 
}

para evitar el tema de las margenes y paddin que traen los elementos por defecto y siguiendo las buenas practicas del profesorDiego de granda lo que podemos hacer es esto en el archivo main.css

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

 
codigo

Me gustó la animación del main-content pero me gustó un poco más si la caja sale por un lado

@keyframes main-content {
  0% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(0px);
  }
}