- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="card-decorative.css">
<link rel="stylesheet" href="style.css">
<title>Plan</title>
</head>
<body>
<article class="card">
<h2 class="title">Plan «Charla sin fin» con un paquete adicional de SMS <!-- y almacenamiento en la nube --></h2>
<div class="description">
<p>El plan para quienes disfrutan conversar.</p>
<!-- <p>También hay espacio para tus fotos.</p>
<p>Incluye copias de seguridad diarias y sincronización automática entre 5 dispositivos.</p> -->
</div>
<ul class="options-list">
<li class="options-item">Llamadas ilimitadas.</li>
<li class="options-item">Redes sociales ilimitadas.</li>
<li class="options-item">Mensajería ilimitada.</li>
<li class="options-item">600 SMS al día.</li>
<!-- <li class="options-item">500 GB de almacenamiento en la nube.</li> -->
</ul>
<div class="price">999₽</div>
<div class="disclaimer">
No constituye una oferta vinculante.<br>
<!-- Consulta con un especialista antes de contratar. -->
</div>
</article>
<article class="card">
<h2 class="title">Plan «Simple»
</h2>
<div class="description">
<p>El plan para quienes no quieren hacer cuentas.</p>
</div>
<ul class="options-list">
<li class="options-item">1 llamada.</li>
<li class="options-item">1 SMS.</li>
</ul>
<div class="price">100000₽</div>
<div class="disclaimer">Solo para nuevos clientes.</div>
</article>
</body>
</html>
CSS
.card {
width: 540px;
padding: 20px;
display: grid;
grid-template-columns: 260px 120px 120px;
grid-template-areas: "title title price"
"options description description"
"options disclaimer disclaimer";
gap: 20px;
}
.title {
grid-area: title;
}
.price {
grid-area: price;
justify-self: end;
align-self: start;
}
.options-list {
grid-area: options;
}
.description {
grid-area: description;
}
.disclaimer {
grid-area: disclaimer;
align-self: end;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Comprueba que la distribución no se rompa. Para hacerlo, quita los delimitadores de comentario del código:
- en la línea 11,
- en las líneas 14–15,
- en la línea 22,
- en la línea 27.