Teoría
Teoría

Ancho y relleno de las tarjetas

En la parte anterior conocimos las distribuciones de componentes. Ahora seguiremos trabajando con ellas. Para empezar, construiremos un carrusel.

El carrusel tiene un encabezado, una lista de tarjetas y botones para recorrerlas. El encabezado y los botones ya están listos. Los estilos decorativos de la lista y las tarjetas también están preparados. Solo faltan sus estilos de distribución.

Empecemos por la lista. Puede contener tantas tarjetas como queramos, pero solo se verán tres a la vez. Para ver las demás, habrá que recorrer el carrusel. En el carrusel terminado, un script se encargará de esto. Como todavía no lo tenemos, el HTML solo incluye las tres tarjetas «visibles».

La tarjeta central es la actual y es más grande que las otras dos.

<ul class="cards-list">
  <li class="card">
    <!-- Contenido de la tarjeta -->
    </li>
  <li class="card current">
    <!-- Contenido de la tarjeta central -->
  </li>
  <li class="card">
    <!-- Contenido de la tarjeta -->
  </li>
</ul>

Empecemos a construirlo. Primero pondremos en cero los márgenes y rellenos predeterminados de la lista. Después definiremos el ancho y el relleno de las tarjetas.

En una de las próximas partes veremos cómo crear botones con forma de flecha.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="carousel-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Crea tu smoothie</title> </head> <body> <section class="carousel"> <h2>Crea tu smoothie</h2> <button class="arrow arrow-back" type="button"><span class="visually-hidden">Anterior</span></button> <ul class="cards-list"> <li class="card"> <h3 class="title">Mandarina</h3> <img class="image" src="img/mandarin.jpg" alt="Mandarina" width="120" height="120"> <p class="description">Sabor dulce e intenso con un toque ácido.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card current"> <h3 class="title">Lima</h3> <img class="image" src="img/lime.jpg" alt="Lima" width="150" height="150"> <p class="description">Un toque ácido y un aroma único.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card"> <h3 class="title">Fresa</h3> <img class="image" src="img/strawberry.jpg" alt="Fresa" width="120" height="120"> <p class="description">Suave aroma floral y sabor a verano.</p> <a class="add-link" href="#">+ Agregar</a> </li> </ul> <button class="arrow arrow-forward" type="button"><span class="visually-hidden">Siguiente</span></button> </section> </body> </html>

CSS

ObjetivosRealizado

Crea una regla para la clase cards-list y pon en cero sus márgenes y rellenos.
Crea una regla para la clase card. Dale un ancho de 120px y un relleno de 15px en todos sus lados. La imagen de la segunda tarjeta sobresaldrá del contenedor.
Debajo, crea una regla para la clase current y dale un ancho de 150px.