Tablas HTML-CSS
Ejercicio para practicar habilidades de HTML y CSS. Ventana emergente o modal para todos los dispositivos sin framework. Distribución de tarjetas con grid.
Podés visitar el ejercicio que desarrollaremos aquí ↩
💻 Ver explicación en video de youtube.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Ventanas Emergentes</title>
</head>
<body>
<header>
<h1>Explora la Riqueza de África</h1>
<p>Un recorrido fascinante por 6 joyas del continente africano</p>
</header>
<main>
<div class="tarjeta">
<img src="imagenes/egipto.jpg" alt="">
<div class="contenido">
<h2>Egipto</h2>
<h4>Capital: El Cairo</h4>
<p>Tierra de faraones, pirámides milenarias y el majestuoso río Nilo.</p>
<button class="btn" commandfor="emergente-1" command="show-modal">Explorar Más</button>
</div>
<dialog id="emergente-1" class="emergente">
<div class="encabezado-dialog">
<form method="dialog">
<button class="cerrar-ventana">X</button>
</form>
<img src="imagenes/egipto.jpg" alt="">
</div>
<div class="contenido-dialog">
<h2>Egipto</h2>
<h4>Capital: El Cairo</h4>
<div class="tema">
<h3>Geografía</h3>
<p>Ubicado en el noreste de África. Dominado por el desierto del Sáhara, pero cruzado de sur a norte por el fértil valle del río Nilo.</p>
</div>
<div class="tema">
<h3>Actividades Importantes</h3>
<p>Ubicado en el noreste de África. Dominado por el desierto del Sáhara, pero cruzado de sur a norte por el fértil valle del río Nilo.</p>
</div>
<div class="tema">
<h3>Un poco de Historia</h3>
<p>Ubicado en el noreste de África. Dominado por el desierto del Sáhara, pero cruzado de sur a norte por el fértil valle del río Nilo.</p>
</div>
</div>
</dialog>
</div>
<div class="tarjeta">
<img src="imagenes/kenia.jpg" alt="">
<div class="contenido">
<h2>Kenia</h2>
<h4>Capital: Nairobi</h4>
<p>El corazón del safari africano y la increíble Gran Migración.</p>
<button class="btn" commandfor="emergente-2" command="show-modal">Explorar Más</button>
</div>
<dialog id="emergente-2" class="emergente">
<div class="encabezado-dialog">
<form method="dialog">
<button class="cerrar-ventana">X</button>
</form>
<img src="imagenes/kenia.jpg" alt="Kenia">
</div>
<div class="contenido-dialog">
<h2>Kenia</h2>
<h4>Capital: Nairobi</h4>
<div class="tema">
<h3>Geografía</h3>
<p>Ubicado en África Oriental, cuenta con costas en el Océano Índico, sabanas extensas, montañas altas como el Monte Kenia y el Valle del Gran Rift.</p>
</div>
<div class="tema">
<h3>Actividades Importantes</h3>
<p>Ecoturismo, safaris fotográficos en Masai Mara, exportación de té, café y flores de corte.</p>
</div>
<div class="tema">
<h3>Un poco de Historia</h3>
<p>Poblado por diversos grupos étnicos como los Masái. Fue colonia británica hasta obtener su independencia en 1963 liderada por Jomo Kenyatta.</p>
</div>
</div>
</dialog>
</div>
<div class="tarjeta">
<img src="imagenes/sudafrica.jpg" alt="">
<div class="contenido">
<h2>Sudáfrica</h2>
<h4>Capital: Pretoria</h4>
<p>La nación del arcoíris, famosa por su biodiversidad y riqueza cultural.</p>
<button class="btn" commandfor="emergente-3" command="show-modal">Explorar Más</button>
</div>
<dialog id="emergente-3" class="emergente" >
<div class="encabezado-dialog">
<form method="dialog">
<button class="cerrar-ventana">X</button>
</form>
<img src="imagenes/sudafrica.jpg" alt="">
</div>
<div class="contenido-dialog">
<h2>Sudáfrica</h2>
<h4>Capital: Pretoria</h4>
<div class="tema">
<h3>Geografía</h3>
<p>Extremo sur del continente. Abundan mesetas altas, sabanas y una vasta costa entre el Atlántico e Índico.</p>
</div>
<div class="tema">
<h3>Actividades Importantes</h3>
<p>Minería (oro y diamantes), producción vinícola, turismo de fauna silvestre.</p>
</div>
<div class="tema">
<h3>Un poco de Historia</h3>
<p>Marcada por el Apartheid y la histórica transición a la democracia liderada por Nelson Mandela.</p>
</div>
</div>
</dialog>
</div>
<div class="tarjeta">
<img src="https://images.unsplash.com/photo-1539037116277-4db20889f2d4?auto=format&fit=crop&w=600&q=80" alt="">
<div class="contenido">
<h2>Marruecos</h2>
<h4>Capital: Rabat</h4>
<p>Encrucijada entre el mundo árabe, berber y la influencia europea.</p>
<button class="btn" commandfor="emergente-4" command="show-modal">Explorar Más</button>
</div>
<dialog id="emergente-4" class="emergente" >
<div class="encabezado-dialog">
<form method="dialog">
<button class="cerrar-ventana">X</button>
</form>
<img src="https://images.unsplash.com/photo-1539037116277-4db20889f2d4?auto=format&fit=crop&w=600&q=80" alt="">
</div>
<div class="contenido-dialog">
<h2>Marruecos</h2>
<h4>Capital: Rabat</h4>
<div class="tema">
<h3>Geografía</h3>
<p>Noroeste de África. Posee costas en el Atlántico y el Mediterráneo, dominado por el Atlas y el Sáhara.</p>
</div>
<div class="tema">
<h3>Actividades Importantes</h3>
<p>Turismo cultural y de aventura, comercio de artesanías, pesca y extracción de fosfatos.</p>
</div>
<div class="tema">
<h3>Un poco de Historia</h3>
<p>Con una herencia bereber milenaria, ha sido punto de encuentro comercial y un reino independiente.</p>
</div>
</div>
</dialog>
</div>
<div class="tarjeta">
<img src="imagenes/madagascar.jpg" alt="">
<div class="contenido">
<h2>Madagascar</h2>
<h4>Capital: Antananarivo</h4>
<p>Una isla única llena de biodiversidad, baobabs y lémures extraordinarios.</p>
<button class="btn" commandfor="emergente-4" command="show-modal">Explorar Más</button>
</div>
<dialog id="emergente-4" class="emergente" >
<div class="encabezado-dialog">
<form method="dialog">
<button class="cerrar-ventana">X</button>
</form>
<img src="imagenes/madagascar.jpg" alt="">
</div>
<div class="contenido-dialog">
<h2>Madagascar</h2>
<h4>Capital: Antananarivo</h4>
<div class="tema">
<h3>Geografía</h3>
<p>Cuarta isla más grande del mundo en el Océano Índico. Selvas tropicales y bosques secos.</p>
</div>
<div class="tema">
<h3>Actividades Importantes</h3>
<p>Ecoturismo, agricultura (primer productor mundial de vainilla) y especias.</p>
</div>
<div class="tema">
<h3>Un poco de Historia</h3>
<p>Ecosistema aislado donde el 90% de su flora y fauna no existe en ninguna otra parte del mundo.</p>
</div>
</div>
</dialog>
</div>
<div class="tarjeta">
<img src="imagenes/nigeria.jpg" alt="">
<div class="contenido">
<h2>Nigeria</h2>
<h4>Capital: Abuya</h4>
<p>El gigante demográfico y económico del oeste del continente.</p>
<button class="btn" commandfor="emergente-4" command="show-modal">Explorar Más</button>
</div>
<dialog id="emergente-4" class="emergente" >
<div class="encabezado-dialog">
<form method="dialog">
<button class="cerrar-ventana">X</button>
</form>
<img src="imagenes/nigeria.jpg" alt="">
</div>
<div class="contenido-dialog">
<h2>Nigeria</h2>
<h4>Capital: Abuya</h4>
<div class="tema">
<h3>Geografía</h3>
<p>Golfo de Guinea. Transiciona de manglares costeros a sabanas tropicales y zonas áridas.</p>
</div>
<div class="tema">
<h3>Actividades Importantes</h3>
<p>Extracción y exportación de petróleo, industria del cine (Nollywood) y tecnología.</p>
</div>
<div class="tema">
<h3>Un poco de Historia</h3>
<p>Hogar de reinos antiguos como Benín. Hoy es la mayor economía y el país más poblado de África.</p>
</div>
</div>
</dialog>
</div>
</main>
<footer>
<p>
Creado con fines didácticos por <strong>caterinaweb.net</strong>
</p>
</footer>
</body>
</html>CSS
/*Colores que usaremos. En general en el diseño siempre tenemos que elegir colores para mantener la uniformidad del sitio web*/
:root {
--color-texto: #2b2d42;
--color-texto-titulos: #3d405b;
--color-texto-parrafos: #6c757d;
--color-resaltador-fuerte: #e07a5f;
--color-resaltador-suave: #f4a261;
--color-fondo: #f4f1de;
--fondo-tarjeta: #ffffff;
}
/* CSS RESET & VARIABLES */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--color-fondo);
color: var(--color-texto);
padding: 2rem 1rem;
}
header {
text-align: center;
margin-bottom: 3rem;
}
header h1 {
font-size: 2.5rem;
color: var(--color-texto-titulos);
margin-bottom: 0.5rem;
}
header p {
font-size: 1.1rem;
color: var(--color-texto-parrafos);
}
/* GRID DE TARJETAS . En nuestro caso , el contenedor de las tarjetas va a ser el main*/
main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* TARJETAS */
main .tarjeta {
max-width: 390px;
margin: 0 auto;
background-color: var(--fondo-tarjeta);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
main .tarjeta:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}
main .tarjeta img {
width: 100%;
height: 200px;
object-fit: cover;
}
main .tarjeta .contenido {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
main .tarjeta .contenido h2 {
font-size: 1.5rem;
color: var(--color-texto-titulos);
margin-bottom: 0.5rem;
}
main .tarjeta .contenido h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-resaltador-fuerte);
margin-bottom: 1rem;
}
main .tarjeta .contenido p {
font-size: 0.9rem;
color: var(--color-texto-parrafos);
margin-bottom: 1.5rem;
line-height: 1.4;
flex-grow: 1;
}
.btn {
background-color: var(--color-resaltador-fuerte);
color: white;
border: none;
padding: 0.8rem 1.2rem;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
width: 100%;
text-align: center;
}
.btn:hover {
background-color: #d0694e;
}
/* ESTILOS DE LA ETIQUETA DIALOG (NATIVO) */
dialog {
margin: auto;
border: none;
border-radius: 16px;
max-width: 600px;
width: 90%;
max-height: 85vh;
padding: 0;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
/* Fondo oscuro nativo con ::backdrop */
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
dialog.emergente .encabezado-dialog {
position: relative;
}
dialog.emergente .encabezado-dialog img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
dialog.emergente .encabezado-dialog button{
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
dialog.emergente .contenido-dialog {
padding: 1.5rem 2rem 2rem;
overflow-y: auto;
max-height: calc(85vh - 220px);
}
dialog.emergente .contenido-dialog h2 {
color: var(--secondary-color);
}
dialog.emergente .contenido-dialog h4 {
color: var(--color-resaltador-fuerte);
margin-bottom: 1.2rem;
}
dialog.emergente .contenido-dialog .tema {
margin-bottom: 1rem;
}
dialog.emergente .contenido-dialog .tema h3 {
font-size: 1rem;
color: var(--secondary-color);
margin-bottom: 0.3rem;
border-bottom: 2px solid var(--color-resaltador-suave);
display: inline-block;
}
dialog.emergente .contenido-dialog .tema p {
font-size: 0.95rem;
line-height: 1.5;
}
footer{
margin: 2rem 0;
text-align: center;
}Recursos
Íconos y fuentes: https://fonts.google.com