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!

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.

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

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

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

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.

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

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