Diseño de cuadrículas CSS para contenido web

Clase 7 de 12 • Curso Práctico de Maquetación y Animaciones con CSS

Resumen

¿Cómo trabajar con grid en el site content?

Para muchos, el uso de CSS Green y la organización mediante grid son elementos cruciales al iniciar proyectos web. Este texto te guiará detalladamente a través del proceso de creación de un site content con columnas, alineación y disposición de contenidos usando grid en CSS. No solo aprenderás a manejar estas herramientas, sino que además exploraremos técnicas para optimizar el uso; así convertirás un diseño básico en una maqueta visual impresionante y funcional.

¿Cuántas columnas necesitamos?

La clave del diseño visual con grid es definir correctamente la cantidad de columnas necesarias:

Seis columnas: Independientemente del contenido, seis columnas nos permitirán manejar la disposición visual de manera flexible y adaptativa.
Columnas iguales: Las columnas deben ser uniformes para una disposición equilibrada del contenido en cada sección.
Ajuste a requerimientos: Si necesitas ajustar el tamaño de las columnas, puedes establecer divisiones adicionales según las necesidades del contenido, como con Superman en este caso.

.site-content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
}

¿Cómo ubicar elementos en líneas específicas?

La colocación de elementos en un grid requiere que pienses en términos de líneas:

Identificación de líneas: Cada línea sirve como guía para posicionar elementos de forma precisa y coherente.
Uso de posiciones: Cada elemento puede ser ubicado entre líneas específicas para ajustar su tamaño y posición a lo largo del grid.

Por ejemplo, para colocar a Superman entre líneas:

grid-column: 2 / 6;
grid-row: 1 / 2;

¿Qué ocurre con el texto y las imágenes dentro del grid?

Para estilizar tanto texto como imágenes, aplicaremos transformaciones y propiedades de css animaciones:

Rotación y tamaño del texto: Rotar el texto con transform y ajustar su tamaño para su correcta visualización.
Animaciones en texto: Usar @keyframes y opacity para animar la aparición del texto realizando transiciones suaves.

.side-content p {
    transform: rotate(-90deg);
    font-size: 36px;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

@keyframes example {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.side-content img {
    width: 100%;
    grid-column: 2 / 6;
    grid-row: 1 / 2;
}

¿Cómo estilizar y ubicar un div suelto en el grid?

Finalmente, estilizar un div es esencial para lograr el acabado visual adecuado:

Establecer color de fondo: Usa variables CSS para facilitar los cambios a futuro.
Configurar la ubicación en grid: Mediante propiedades como grid-column y grid-row, ajusta su posición.

div.suelto {
    background: var(--color-amarillo);
    grid-column: 4 / 7;
    grid-row: 1 / 2;
    height: 100%;
}

Al aplicar bien estos fundamentos de CSS Grid implementarás layouts ordenados y estéticamente agradables. Intenta explorar variaciones y personalizaciones para que cada diseño sea único y refleje tu estilo como desarrollador. ¡Sigue codificando y haciendo magia en el mundo del diseño web!

Jeffer Steven Nuñez Aragon

student•

Asi va el mio :D

Libia Perez

student•

me encanta como sube el superman

Jhon Ramirez

student•

asi mismo me quedo pero en X, que cool se ve !

Jhoana España Urresty

student•

super

silfredo mario

student•

Que buen trabajo, eres una crack. Puedes intentar que se vea la diferencia en los tiempos de llegada del <main> y el <nav>

Daniel Omar Hernández Muñoz

student•

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

Omar Alejandro Morales Mendoza

student•

Se ve genial!

Paolo Joaquin Pinto Perez

student•

++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:

Luis Alejandro Vera Hernandez

student•

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

Antonio Sánchez Olalla

student•

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

Jose Miguel Perdomo

student•

Tengo una pregunta, cuando estoy en loader el superman alcanza a verse pasar por unos segundos como evito eso?

Estefany Aguilar

teacher•

Muéstrame el código porfa !

Jose Miguel Perdomo

student•

Tranqui profe ya solucione, el body tenia margenes, ese era el error

marco antonio

student•

así vamos ;D código

Christian Michelle Torres Martínez

student•

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>
        <h3>Superman</h3>
        <img src="https://i.ibb.co/x16pz1x/super-man.png" alt="superman" />
      </div>

Camilo Torres camayo

student•

Ya somos dos, se me hace mas fácil a mi con position absolute

Carlos Mazzaroli

student•

Yo solucione el tema del z-index agregando

    animation-fill-mode: forwards;

Jhoana España Urresty

student•

¿Como hago que la frase "App design" quede en una sola línea, y no se corte como está en el ejemplo?

Estefany Aguilar

teacher•

Wow, amo este resultado !!! Me mandas el código para poder ayudarte ? 😊✨

Jhoana España Urresty

student•

HTML

  <body>
    <div class="page">
      <!-- Main content -->
      <section class="container">
        <nav class="navbar">
          <div class="navbar__content">
            <img src="./imgs/logo.png" alt="logo">
            <ul>
              <li><a href="">DESIGN</a></li>
              <li><a href="">DEVELOP</a></li>
              <li><a href="">APP</a></li>
              <li><a href="">WEB</a></li>
            </ul>
          </div>
        </nav>

        <section class="main-content">
          <p>Custom</p>
          <h2>Web Design</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
        </section>

        <section class="aside-content">
          <div></div>
          <p>App Design</p>
          <img src="./imgs/apps.png" alt="apllicaciones">
        </section >

        <section class="footer">
          <div id="button1">
            <img src="./imgs/movil.png" alt="movil">
          </div>
          <div>
            <img src="./imgs/pc.png" alt="desktop">
          </div>
          <div>
            <img src="./imgs/server.png" alt="server">
          </div>
        </section>
      </section>

      
      <!-- Loader -->
      <section class="loader">
        <div></div>
        <div></div>
        <div></div>
      </section>

      <!-- Modal --> 
      <section class="modal hidden">
        <div class="modal__content">
          <img class="modal__content--close" src="./imgs/outline_cancel_black_24dp.png"/>

          <div class="modal__content--slider">
            <input type="radio" name="slider-1" id="radio-1" checked>
            <input type="radio" name="slider-1" id="radio-2">
            <input type="radio" name="slider-1" id="radio-3">

            <div class="cards">
              <label for="radio-1" id="card-1" class="card">
                <img src="./imgs/sl-1.png" alt="slider 1">
              </label>
              <label for="radio-2" id="card-2" class="card">
                <img src="./imgs/sl-2.png" alt="slider 2">
              </label>
              <label for="radio-3" id="card-3" class="card">
                <img src="./imgs/sl-3.png" alt="slider 3">
              </label>
            </div>
          </div>
          <div>
            <input type="button" class="button" value="LO QUIERO">
          </div>
        </div>
      </section>
    </div>
  </body>
  <script src="./index.js"></script>
</html>

CSS

body{
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--gris);
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

:root{
  --azul: #203166;
  --gris: #F6F6F6;
  --azulclaro: #2387E1;
}

.page{
  position: relative;
  height: 100vh;
  width: 100%;
}

.container{
  position: absolute;
  z-index: 1;

  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: 20% 50% 30%;
  grid-template-areas:  "nav      aside"
                        "section  aside"
                        "footer   aside";
height: 100%;
width: 100%;
}

.navbar{
  /* background: var(--gris); */
  grid-area: nav;
  display: flex;
}

.navbar__content{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 0 0 80px;
  border-bottom: 1px solid var(--azulclaro);

  animation: 2s navbar 0.5s ease-in-out;
}
@keyframes navbar {
  0%{
    transform: translateY(-200px);
  }
  100%{
    transform: translateY(0px);
  }
}

.navbar__content img{
  width: 120px;
}

.navbar__content ul{
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding: 0;
  width: 450px;
}

.navbar__content ul li a{
  color: var(--azul);
  text-decoration: none;
  font-weight: 300;
}

.main-content{
  grid-area: section;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 80px;

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

.main-content p:first-child{
  font-size: 36px;
  font-weight: 300;
  margin: 0 0 -14px 50px;
  color: var(--azul);
}

.main-content p:last-child{
  font-weight: 100px;
  margin: 20px 400px 0 0;
  color: var(--azul);
}

.main-content h1{
  font-size: 48px;
  font-weight: 700;
  margin: 0;
  color: var(--azul);
}

.aside-content{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;

  grid-area: aside;
}

.aside-content p{
  transform: rotate(-90deg);
  font-size: 30px;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  color: var(--azulclaro);

  opacity: 0;

  animation-name: aside-content-text;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes aside-content-text{
  0%{
  opacity: 0;
  }
  100%{
  opacity: 1;
  }
}

.aside-content img{
  width: 100%;
  grid-column: 2 / 6;
  grid-row: 1 / 2;

  animation: 2s aside-content-img 0.5s ease-in-out;
}
@keyframes aside-content-img {
  0%{
    transform: translateX(600px);
  }
  100%{
    transform: translateX(0px);
  }
}

.aside-content div{
  background: var(--azul);
  grid-column: 4 / 7;
  grid-row: 1 / 2;
  height: 100%;
}

.footer{
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  background: var(--azul);
  border-radius: 0 80px 0 0;
  transform: translateY(100%);

  animation-name: footer;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes footer{
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0px);
  }
}

.footer div{
  background: var(--azulclaro);
  width: 200px;
  height: 150px;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: center;
}

.footer div img{
  width: 180px;
  position: absolute;
  bottom: 30px;

  transform: translateY(0px) scale(1); 
  transition: transform 0.5s ease-in-out;

}

.footer div:hover img{
  cursor: pointer;
  transform: translateY(-30px) scale(1.1); 
  transition: transform 0.3s ease-in-out;
}

.hidden{
  display: none;
}
.visible{
  display: grid;
}

.modal{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 3;
 place-items: center;
}

.modal__content{
  background: var(--gris);
  width: 40%;
  height: 40%;
  padding: 50px;
  display: grid;
  place-items: center;
}

.modal__content--slider{
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
}

.modal__content--close{
    place-self: end;
    align-self: start;
}

.cards{
  position: relative;
  width: 100%;
  height: 100%;
}

.card{
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: transform 0.5s ease;
  cursor: pointer;
  /* // para centrar */
  display: grid;
  place-items: center;
  
}

.card img{
  width: 200px;
}

#radio-1:checked ~ .cards #card-1,
#radio-2:checked ~ .cards #card-2,
#radio-3:checked ~ .cards #card-3{
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 1;
}

#radio-1:checked ~ .cards #card-2,
#radio-2:checked ~ .cards #card-3,
#radio-3:checked ~ .cards #card-1{
  transform: translateX(80%) scale(0.8);
  opacity: 0.5;
  z-index: 0;
}

#radio-1:checked ~ .cards #card-3,
#radio-2:checked ~ .cards #card-1,
#radio-3:checked ~ .cards #card-2{
  transform: translateX(-80%) scale(0.8);
  opacity: 0.5;
  z-index: 0;
}

#radio-1,
#radio-2,
#radio-3 {
  display: none;
}

.button{
  background-color: var(--azulclaro);
  border: none;
  margin-top: 100px;
  color: var(--gris);
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
}

.loader{
  background: var(--gris);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 3;
  /* Animando el loader */
  animation: loader 2s linear forwards;
}

@keyframes loader{
  0%{
    opacity: 1;
    visibility: visible;
  }
  95%{
    opacity: 1;
    visibility: visible;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

.loader div{
  background: var(--azulclaro);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;

  transform: scale(0);

  animation: scaling 1s ease-in-out infinite;
}

.loader div:nth-child(1){
  animation-delay: 0.1s;
}
.loader div:nth-child(2){
  animation-delay: 0.2s;
}
.loader div:nth-child(3){
  animation-delay: 0.3s;
}
@keyframes scaling{
  0%, 100%{
    transform: scale(0.2);
  }
  40%{
    transform: scale(1);
  }
  50%{
    transform: scale(1);
  }
}

Agustin Cammarota Muti

student•

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

Jeffer Steven Nuñez Aragon

student•

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

Moises Hernandez

student••

La imagen del superman esta exageradamente pesada 732kb casi un mega Podrían usar esta web para convertirlo en formato webp y reduce su peso a solo 46kb:

La imagen podrían guardarla en un servicio de alojamiento o crear una carpeta assets en su proyecto

Lauro Iván Ibáñez Castellanos

student•

Una pregunta, de donde descargo el material?

Javier Mauricio Medina Valencia

student•

Hola, Lauro que tal Haciendo scroll encontrarás el apartado de archivos de la clase, ahí puedes descargar el material

Espero te sirva

Diana María Betancur Franco

student•

Ya no me aparece el inicio de los punticos cuando carga la página. Y revisé y no encuentro el error.

Mateo Roldán

student•

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.

Rubén Ernesto Aragón Gil

student•

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

Luis Felipe Correa Agudelo

student•

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

Carlos Rodríguez

student•

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!

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

  <body>
    <div class="page">
      <!-- Main content -->
      <section class="container">
        <nav class="navbar">
          <div class="navbar__content">
            <img src="./imgs/logo.png" alt="logo">
            <ul>
              <li><a href="">DESIGN</a></li>
              <li><a href="">DEVELOP</a></li>
              <li><a href="">APP</a></li>
              <li><a href="">WEB</a></li>
            </ul>
          </div>
        </nav>

        <section class="main-content">
          <p>Custom</p>
          <h2>Web Design</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
        </section>

        <section class="aside-content">
          <div></div>
          <p>App Design</p>
          <img src="./imgs/apps.png" alt="apllicaciones">
        </section >

        <section class="footer">
          <div id="button1">
            <img src="./imgs/movil.png" alt="movil">
          </div>
          <div>
            <img src="./imgs/pc.png" alt="desktop">
          </div>
          <div>
            <img src="./imgs/server.png" alt="server">
          </div>
        </section>
      </section>

      
      <!-- Loader -->
      <section class="loader">
        <div></div>
        <div></div>
        <div></div>
      </section>

      <!-- Modal --> 
      <section class="modal hidden">
        <div class="modal__content">
          <img class="modal__content--close" src="./imgs/outline_cancel_black_24dp.png"/>

          <div class="modal__content--slider">
            <input type="radio" name="slider-1" id="radio-1" checked>
            <input type="radio" name="slider-1" id="radio-2">
            <input type="radio" name="slider-1" id="radio-3">

            <div class="cards">
              <label for="radio-1" id="card-1" class="card">
                <img src="./imgs/sl-1.png" alt="slider 1">
              </label>
              <label for="radio-2" id="card-2" class="card">
                <img src="./imgs/sl-2.png" alt="slider 2">
              </label>
              <label for="radio-3" id="card-3" class="card">
                <img src="./imgs/sl-3.png" alt="slider 3">
              </label>
            </div>
          </div>
          <div>
            <input type="button" class="button" value="LO QUIERO">
          </div>
        </div>
      </section>
    </div>
  </body>
  <script src="./index.js"></script>
</html>

body{
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--gris);
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

:root{
  --azul: #203166;
  --gris: #F6F6F6;
  --azulclaro: #2387E1;
}

.page{
  position: relative;
  height: 100vh;
  width: 100%;
}

.container{
  position: absolute;
  z-index: 1;

  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: 20% 50% 30%;
  grid-template-areas:  "nav      aside"
                        "section  aside"
                        "footer   aside";
height: 100%;
width: 100%;
}

.navbar{
  /* background: var(--gris); */
  grid-area: nav;
  display: flex;
}

.navbar__content{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 0 0 80px;
  border-bottom: 1px solid var(--azulclaro);

  animation: 2s navbar 0.5s ease-in-out;
}
@keyframes navbar {
  0%{
    transform: translateY(-200px);
  }
  100%{
    transform: translateY(0px);
  }
}

.navbar__content img{
  width: 120px;
}

.navbar__content ul{
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding: 0;
  width: 450px;
}

.navbar__content ul li a{
  color: var(--azul);
  text-decoration: none;
  font-weight: 300;
}

.main-content{
  grid-area: section;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 80px;

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

.main-content p:first-child{
  font-size: 36px;
  font-weight: 300;
  margin: 0 0 -14px 50px;
  color: var(--azul);
}

.main-content p:last-child{
  font-weight: 100px;
  margin: 20px 400px 0 0;
  color: var(--azul);
}

.main-content h1{
  font-size: 48px;
  font-weight: 700;
  margin: 0;
  color: var(--azul);
}

.aside-content{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;

  grid-area: aside;
}

.aside-content p{
  transform: rotate(-90deg);
  font-size: 30px;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  color: var(--azulclaro);

  opacity: 0;

  animation-name: aside-content-text;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes aside-content-text{
  0%{
  opacity: 0;
  }
  100%{
  opacity: 1;
  }
}

.aside-content img{
  width: 100%;
  grid-column: 2 / 6;
  grid-row: 1 / 2;

  animation: 2s aside-content-img 0.5s ease-in-out;
}
@keyframes aside-content-img {
  0%{
    transform: translateX(600px);
  }
  100%{
    transform: translateX(0px);
  }
}

.aside-content div{
  background: var(--azul);
  grid-column: 4 / 7;
  grid-row: 1 / 2;
  height: 100%;
}

.footer{
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  background: var(--azul);
  border-radius: 0 80px 0 0;
  transform: translateY(100%);

  animation-name: footer;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes footer{
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0px);
  }
}

.footer div{
  background: var(--azulclaro);
  width: 200px;
  height: 150px;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: center;
}

.footer div img{
  width: 180px;
  position: absolute;
  bottom: 30px;

  transform: translateY(0px) scale(1); 
  transition: transform 0.5s ease-in-out;

}

.footer div:hover img{
  cursor: pointer;
  transform: translateY(-30px) scale(1.1); 
  transition: transform 0.3s ease-in-out;
}

.hidden{
  display: none;
}
.visible{
  display: grid;
}

.modal{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 3;
 place-items: center;
}

.modal__content{
  background: var(--gris);
  width: 40%;
  height: 40%;
  padding: 50px;
  display: grid;
  place-items: center;
}

.modal__content--slider{
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
}

.modal__content--close{
    place-self: end;
    align-self: start;
}

.cards{
  position: relative;
  width: 100%;
  height: 100%;
}

.card{
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: transform 0.5s ease;
  cursor: pointer;
  /* // para centrar */
  display: grid;
  place-items: center;
  
}

.card img{
  width: 200px;
}

#radio-1:checked ~ .cards #card-1,
#radio-2:checked ~ .cards #card-2,
#radio-3:checked ~ .cards #card-3{
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 1;
}

#radio-1:checked ~ .cards #card-2,
#radio-2:checked ~ .cards #card-3,
#radio-3:checked ~ .cards #card-1{
  transform: translateX(80%) scale(0.8);
  opacity: 0.5;
  z-index: 0;
}

#radio-1:checked ~ .cards #card-3,
#radio-2:checked ~ .cards #card-1,
#radio-3:checked ~ .cards #card-2{
  transform: translateX(-80%) scale(0.8);
  opacity: 0.5;
  z-index: 0;
}

#radio-1,
#radio-2,
#radio-3 {
  display: none;
}

.button{
  background-color: var(--azulclaro);
  border: none;
  margin-top: 100px;
  color: var(--gris);
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
}

.loader{
  background: var(--gris);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 3;
  /* Animando el loader */
  animation: loader 2s linear forwards;
}

@keyframes loader{
  0%{
    opacity: 1;
    visibility: visible;
  }
  95%{
    opacity: 1;
    visibility: visible;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

.loader div{
  background: var(--azulclaro);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;

  transform: scale(0);

  animation: scaling 1s ease-in-out infinite;
}

.loader div:nth-child(1){
  animation-delay: 0.1s;
}
.loader div:nth-child(2){
  animation-delay: 0.2s;
}
.loader div:nth-child(3){
  animation-delay: 0.3s;
}
@keyframes scaling{
  0%, 100%{
    transform: scale(0.2);
  }
  40%{
    transform: scale(1);
  }
  50%{
    transform: scale(1);
  }
}

Diseño de cuadrículas CSS para contenido web

Visión general y requisitos del curso

Animaciones Prácticas con CSS: Proyecto de Layout y Modal Interactivo

Estructura HTML para Maquetación de Proyectos Web

Maquetación y animaciones con CSS

Animaciones y Estilos para Loader en HTML/CSS

Maquetación de Layouts con CSS Grid en iPad

Creación y Animación de un Navbar con Flexbox y Grid

Estilización de Main Content con Flexbox y Animaciones CSS

Diseño de cuadrículas CSS para contenido web

Maquetación de Footers con Animaciones CSS

Maquetación con JavaScript

Acceso al DOM con JavaScript para Mostrar Modales

Eventos de Clic y Modales en JavaScript: Interactividad Básica

Carrusel de Imágenes con CSS y JavaScript

Continúa aprendiendo

Proyectos Finales: Animaciones y Transiciones con CSS