- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="list-decorative.css">
<link rel="stylesheet" href="style.css">
<title>Lista de tarjetas</title>
</head>
<body>
<ul class="cards-list">
<li class="card">
<img src="img/coffee-1.jpg" alt="Café: el largo viaje del cafeto a tu taza" width="110" height="110">
<h2>Café: el largo viaje del cafeto a tu taza</h2>
</li>
<li class="card">
<img src="img/coffee-2.jpg" alt="Las mejores cafeteras para casa" width="110" height="110">
<h2>Las mejores cafeteras para casa</h2>
</li>
<li class="card">
<img src="img/coffee-4.jpg" alt="Consejos de barista: ¿qué café elegir?" width="110" height="110">
<h2>Consejos de barista: ¿qué café elegir?</h2>
</li>
<li class="card">
<img src="img/coffee-5.jpg" alt="Recetas para Año Nuevo" width="110" height="110">
<h2>Recetas para Año Nuevo</h2>
</li>
<!--
<li class="card">
<img src="img/coffee-6.jpg" alt="20 cafeterías que vale la pena visitar" width="260" height="110">
<h2 class="accent">20 cafeterías que vale la pena visitar</h2>
</li>
-->
<li class="card">
<img src="img/coffee-7.jpg" alt="Guía de métodos alternativos de preparación" width="110" height="110">
<h2>Guía de métodos alternativos de preparación</h2>
</li>
</ul>
</body>
</html>
CSS
body {
width: 640px;
margin: 15px;
}
.cards-list {
display: grid;
grid-template-columns: repeat(auto-fit, 140px);
gap: 15px;
margin: 0;
padding: 20px;
}
.card {
padding: 15px;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- Cambia el valor de
grid-template-columnsarepeat(auto-fit, minmax(140px, 1fr)). Las tarjetas de la primera fila se ensancharán para ocupar todo el espacio libre. - Cambia el ancho de
bodya645px. Las tarjetas se estrecharán y habrá cuatro columnas. - En
index.html, descomenta el código de las líneas 28-31. Se añadirá una tarjeta cuyo contenido sobresaldrá de la columna.