generated from marquez.juan/Ejercicio-inicial--git-y-HTML
Compare commits
2 Commits
ac9ca96522
...
9d02f1a160
| Author | SHA1 | Date | |
|---|---|---|---|
| 9d02f1a160 | |||
| affa53d7fa |
19
.gitignore
vendored
Normal file
19
.gitignore
vendored
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
# Python
|
||||||
|
__pycache__/
|
||||||
|
*.pyc
|
||||||
|
*.pyo
|
||||||
|
|
||||||
|
# Entorno virtual de Python
|
||||||
|
venv/
|
||||||
|
.venv/
|
||||||
|
env/
|
||||||
|
|
||||||
|
# Variables de entorno y configuración sensible
|
||||||
|
.env
|
||||||
|
|
||||||
|
# Sistemas operativos
|
||||||
|
.DS_Store # macOS
|
||||||
|
Thumbs.db # Windows
|
||||||
|
|
||||||
|
# Node.js (por si se utiliza npm en algún momento)
|
||||||
|
node_modules/
|
||||||
1
TP-Diagnostico
Submodule
1
TP-Diagnostico
Submodule
Submodule TP-Diagnostico added at ac9ca96522
BIN
img/Granos-de-cafe-47009229_s.jpg
Normal file
BIN
img/Granos-de-cafe-47009229_s.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
img/hero2.jpg
Normal file
BIN
img/hero2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
img/hero3.jpg
Normal file
BIN
img/hero3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
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>
|
||||||
143
style.css
Normal file
143
style.css
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
/* Configuración General */
|
||||||
|
:root {
|
||||||
|
--cafe-oscuro: #3c2a21;
|
||||||
|
--cafe-medio: #5e4226;
|
||||||
|
--cafe-claro: #d4a373;
|
||||||
|
--crema: #faedcd;
|
||||||
|
--blanco-hueso: #fefae0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--blanco-hueso);
|
||||||
|
color: var(--cafe-oscuro);
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Encabezados */
|
||||||
|
h1, h2, h3 {
|
||||||
|
color: var(--cafe-oscuro);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
border-bottom: 3px solid var(--cafe-claro);
|
||||||
|
display: inline-block;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navegación */
|
||||||
|
.navbar {
|
||||||
|
background-color: var(--cafe-oscuro) !important;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
color: var(--crema) !important;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Imágenes */
|
||||||
|
img.container {
|
||||||
|
display: block;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
max-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Listas */
|
||||||
|
ul, ol {
|
||||||
|
background: white;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablas (Personalizando las clases de Bootstrap) */
|
||||||
|
.table {
|
||||||
|
margin-top: 30px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table thead {
|
||||||
|
background-color: var(--cafe-medio);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Formulario */
|
||||||
|
form {
|
||||||
|
background-color: white;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus, textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--cafe-claro);
|
||||||
|
box-shadow: 0 0 5px var(--cafe-claro);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type="submit"] {
|
||||||
|
background-color: var(--cafe-medio);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type="submit"]:hover {
|
||||||
|
background-color: var(--cafe-oscuro);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
background-color: var(--cafe-oscuro);
|
||||||
|
color: var(--crema);
|
||||||
|
padding: 20px 0;
|
||||||
|
margin-top: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enlaces */
|
||||||
|
a.container {
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--cafe-medio);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.container:hover {
|
||||||
|
color: var(--cafe-claro);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user