EJERCICIO CREACION DE TABS EN HTML
Abra VSCode y a partir de los siguientes codigos muestre en pantalla el resultado
Codigo: tabs.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabs de Café con HTML y CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contenedor-tabs">
<!-- Inputs Radio (ocultos) - Uno por cada pestaña -->
<input type="radio" id="tab-espresso" name="grupo-tabs" checked>
<input type="radio" id="tab-latte" name="grupo-tabs">
<input type="radio" id="tab-cappuccino" name="grupo-tabs">
<!-- Labels (las pestañas visibles) -->
<div class="navegacion-tabs">
<label for="tab-espresso" class="tab-label">Espresso</label>
<label for="tab-latte" class="tab-label">Latte</label>
<label for="tab-cappuccino" class="tab-label">Cappuccino</label>
</div>
<!-- Contenido de cada pestaña -->
<div class="contenido-tabs">
<div class="panel-contenido" id="contenido-espresso">
<h2>Espresso</h2>
<p>El espresso es un café fuerte y concentrado, preparado forzando una pequeña cantidad de agua casi hirviendo a través de granos de café finamente molidos. Es la base de muchas otras bebidas de café.</p>
<img src="https://edutechsiglo21.com/2025/imgs/espreso.jpg" alt="Taza de Espresso">
</div>
<div class="panel-contenido" id="contenido-latte">
<h2>Latte</h2>
<p>Un caffè latte, o simplemente latte, es una bebida de café hecha con espresso y leche vaporizada. Típicamente tiene una capa delgada de espuma de leche en la parte superior. Es más lechoso que un cappuccino.</p>
<img src="https://edutechsiglo21.com/2025/imgs/latte.jpg" alt="Taza de Latte">
</div>
<div class="panel-contenido" id="contenido-cappuccino">
<h2>Cappuccino</h2>
<p>Un cappuccino es una bebida de café italiana que se prepara tradicionalmente con partes iguales de espresso doble, leche vaporizada y espuma de leche vaporizada encima. La textura es clave: la espuma debe ser rica y aterciopelada.</p>
<img src="https://edutechsiglo21.com/2025/imgs/cappuccino.jpg" alt="Taza de Cappuccino">
</div>
</div>
</div>
</body>
</html>
ATENTOS A LA EXPLICACION...
Codigo: style.css
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start; /* Alinea al inicio para ver bien el contenedor */
min-height: 100vh;
}
.contenedor-tabs {
width: 90%;
max-width: 700px;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden; /* Para que los bordes redondeados afecten a todo */
}
/* Ocultamos los radio buttons originales */
.contenedor-tabs > input[type="radio"] {
display: none;
}
.navegacion-tabs {
display: flex; /* Coloca los labels en línea */
background-color: #e9ecef;
}
.tab-label {
padding: 15px 20px;
cursor: pointer;
flex-grow: 1; /* Hace que cada pestaña ocupe el mismo espacio */
text-align: center;
color: #495057;
border-bottom: 3px solid transparent; /* Borde inferior sutil para estado no activo */
transition: background-color 0.3s, color 0.3s, border-bottom-color 0.3s;
}
.tab-label:hover {
background-color: #dee2e6;
}
/* Estilos para el contenido de las pestañas */
.contenido-tabs {
padding: 20px;
border-top: 1px solid #dee2e6; /* Línea divisoria */
}
.panel-contenido {
display: none; /* Ocultamos todos los paneles por defecto */
animation: fadeIn 0.5s ease-in-out; /* Animación sutil */
}
.panel-contenido h2 {
margin-top: 0;
color: #333;
}
.panel-contenido p {
line-height: 1.6;
color: #555;
}
.panel-contenido img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin-top: 15px;
display: block;
margin-left: auto;
margin-right: auto;
}
/* --- La Magia del CSS --- */
/* Cuando un input radio está 'checked', mostramos su panel de contenido asociado Y estilizamos su label */
/* Estilo para la pestaña activa (label) */
#tab-espresso:checked ~ .navegacion-tabs label[for="tab-espresso"],
#tab-latte:checked ~ .navegacion-tabs label[for="tab-latte"],
#tab-cappuccino:checked ~ .navegacion-tabs label[for="tab-cappuccino"] {
background-color: #ffffff; /* Mismo color que el fondo del contenido */
color: #007bff;
font-weight: bold;
border-bottom-color: #007bff; /* Borde inferior que indica la pestaña activa */
}
/* Mostrar el panel de contenido correspondiente al radio button chequeado */
#tab-espresso:checked ~ .contenido-tabs #contenido-espresso {
display: block;
}
#tab-latte:checked ~ .contenido-tabs #contenido-latte {
display: block;
}
#tab-cappuccino:checked ~ .contenido-tabs #contenido-cappuccino {
display: block;
}
/* Animación de aparición */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
