- 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
.cards-list {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.card {
display: flex;
flex-direction: column;
width: 120px;
margin-right: 10px;
padding: 15px;
}
.card:nth-child(3) {
margin-right: 0;
}
.current {
width: 150px;
}
.image {
order: -1;
margin-bottom: 15px;
}
.title {
align-self: center;
margin-top: 0;
margin-bottom: 10px;
}
.description {
margin-top: 0;
margin-bottom: 5px;
}
.add-link {
margin-top: 10px;
padding: 5px;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- En la línea 22, cambia a
240los atributoswidthyheightde la imagen.
La imagen sobresaldrá de la tarjeta.