Diseño de tarjetas en Grid
Parte de la sección CSS Mastery del Journey de HTML de Coddy. Lección 42 de 43.
Desafío
FácilCrea un diseño simple de 2 columnas para las tarjetas usando CSS Grid.
- Las tarjetas deben mostrarse en dos columnas iguales.
- Debe haber algo de espacio entre las tarjetas.
Pruébalo tú mismo
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>
Todas las lecciones de CSS Mastery
1Dominio de selectores – Combinación
IntroducciónSelector de descendienteSelector de hijoSelector de hermano adyacenteSelector de hermano generalDesafío de repaso2Pseudoclases interactivas
PseudoclasesEfectos de hoverEfectos de focusEstilos de estado activoDesafío de repaso3Pseudoclases estructurales
Pseudoclases estructuralesSeleccionando el primer hijoSeleccionando el último hijoEl poder de los patrones: Usando nth-childDesafío de repaso6Landing Page
Dar estilo a la sección del encabezadoDar estilo al botónDiseño de la secciónDiseño de tarjetasAñadir los toques finales9Desafíos finales
Resaltar menú activoFilas de tabla tipo cebraEfecto hover en botonesDiseño de tarjetas en GridImagen Hero desenfocadaPractica por tu cuenta: Playground de Web