generated from marquez.juan/Ejercicio-inicial--git-y-HTML
subida de archivos
This commit is contained in:
185
index.html
Normal file
185
index.html
Normal file
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tu mejor café</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Café de Especialidad</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container my-5">
|
||||
<h1>Bienvenido a la guía del café definitivo</h1>
|
||||
<p class="lead">Esto es un paso a paso para preparar un buen café.</p>
|
||||
|
||||
<article class="mt-4">
|
||||
<h2>El Café: Más que una Bebida, un Ritual Global</h2>
|
||||
<p>
|
||||
El café es una de las bebidas más consumidas en el mundo, pero su importancia trasciende el simple hecho de
|
||||
despertarnos por la mañana. Se ha convertido en un motor económico, un objeto de estudio científico y, sobre
|
||||
todo, un catalizador social que une a las personas en bares, oficinas y hogares.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<section class="my-4">
|
||||
<img src="img/Granos-de-cafe-47009229_s.jpg" alt="Granos de café" class="img-fluid rounded shadow" />
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-md-6">
|
||||
<h3>Ingredientes necesarios</h3>
|
||||
<ul>
|
||||
<li>Café en grano o molido</li>
|
||||
<li>Agua mineral</li>
|
||||
<li>Azúcar o endulzante (opcional)</li>
|
||||
<li>Leche (opcional)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3>Pasos para la preparación</h3>
|
||||
<ol>
|
||||
<li>Hervir el agua hasta que alcance los 90°C.</li>
|
||||
<li>Colocar el filtro en la cafetera y añadir el café.</li>
|
||||
<li>Verter el agua caliente lentamente sobre el café.</li>
|
||||
<li>Esperar 4 minutos para la infusión completa.</li>
|
||||
<li>Servir en una taza y disfrutar.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-5">
|
||||
<h3>Comparativa de Métodos</h3>
|
||||
<table class="table table-striped table-hover border">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Método</th>
|
||||
<th>Tipo de Molienda</th>
|
||||
<th>Resultado en Taza</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Espresso</strong></td>
|
||||
<td>Fina</td>
|
||||
<td>Intenso, con cuerpo y crema persistente.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Prensa Francesa</strong></td>
|
||||
<td>Gruesa</td>
|
||||
<td>Sabor robusto, aceitoso y con textura.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>V60 / Goteo</strong></td>
|
||||
<td>Media-Fina</td>
|
||||
<td>Limpio, resalta la acidez y notas frutales.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Moka (Italiana)</strong></td>
|
||||
<td>Media-Fina</td>
|
||||
<td>Fuerte, concentrado y amargo clásico.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Cold Brew</strong></td>
|
||||
<td>Muy Gruesa</td>
|
||||
<td>Suave, baja acidez y dulce natural.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="table-light">
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<small><em>Nota: La calidad del agua influye hasta en un 98% en el sabor final.</em></small>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<div class="my-4">
|
||||
<a href="https://theworlds100bestcoffeeshops.com/top-100-coffee-shops-south/" target="_blank"
|
||||
rel="noopener noreferrer" class="btn btn-outline-primary">
|
||||
Más información sobre el café
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr class="my-5" />
|
||||
|
||||
<section id="inscripcion" class="bg-light p-4 rounded shadow-sm">
|
||||
<h2>Formulario de Inscripción</h2>
|
||||
<form action="#" method="post">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label for="nombre" class="form-label">Nombre:</label>
|
||||
<input type="text" id="nombre" name="nombre" class="form-control" required />
|
||||
</div>
|
||||
<div class="col">
|
||||
<label for="apellido" class="form-label">Apellido:</label>
|
||||
<input type="text" id="apellido" name="apellido" class="form-control" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">¿Cómo prefiere recibir notificaciones?</label>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" id="whatsapp" name="contacto" value="w" />
|
||||
<label class="form-check-label" for="whatsapp">WhatsApp</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" id="llamada" name="contacto" value="ll" />
|
||||
<label class="form-check-label" for="llamada">Llamada telefónica</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Correo electrónico:</label>
|
||||
<input type="email" id="email" name="email" class="form-control" required placeholder="ejemplo@correo.com" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="cuotas" class="form-label">Cantidad de cuotas para el pago:</label>
|
||||
<input type="number" id="cuotas" name="cuotas" class="form-control" min="1" required />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="provincia" class="form-label">Provincia:</label>
|
||||
<select id="provincia" name="provincia" class="form-select">
|
||||
<option value="s">Santa Fe</option>
|
||||
<option value="e">Entre Ríos</option>
|
||||
<option value="c">Córdoba</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" id="estudiante" name="estudiante" class="form-check-input" value="si" />
|
||||
<label class="form-check-label" for="estudiante">¿Es usted estudiante?</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="comentarios" class="form-label">Comentarios o mensaje adicional:</label>
|
||||
<textarea id="comentarios" name="comentarios" class="form-control" rows="4"
|
||||
placeholder="Escriba aquí..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary px-5">Enviar formulario</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-dark text-white text-center py-4 mt-5">
|
||||
<div class="container">
|
||||
<p class="mb-0">© 2026 Tu Mejor Café. Todos los derechos reservados.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user