generated from marquez.juan/Ejercicio-inicial--git-y-HTML
feat(web) : Add initial HTML structure, CSS styles, and JavaScript file for BrewBox subscription website
This commit is contained in:
Facundo White
254
src/index.html
Normal file
254
src/index.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BrewBox</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header id="site-header">
|
||||
<nav id="main-nav">
|
||||
<a href="#" class="nav-logo">BrewBox</a>
|
||||
<ul>
|
||||
<li><a href="#hero">Inicio</a></li>
|
||||
<li><a href="#beneficios">Beneficios</a></li>
|
||||
<li><a href="#planes">Planes</a></li>
|
||||
<li><a href="#formulario">Suscribirse</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section id="hero">
|
||||
<!-- Hero princiapl de la web con call to action -->
|
||||
<img src="assets/hero.jpg" alt="hero image" class="hero-image">
|
||||
<h1>Café de especialidad en tu puerta, cada mes.</h1>
|
||||
<p>
|
||||
Seleccionamos los mejores granos de origen único de todo el mundo
|
||||
y los enviamos frescos, tostados a pedido, directo a tu casa.
|
||||
</p>
|
||||
<a href="#formulario" class="cta-button">Empezar ahora</a>
|
||||
</section>
|
||||
|
||||
<section id="beneficios">
|
||||
<article class="card">
|
||||
<h2>¿Por qué BrewBox?</h2>
|
||||
<p>
|
||||
Trabajamos con tostadores independientes y fincas de origen único.
|
||||
Cada envío viene con notas de cata, origen del grano y método de preparación recomendado.
|
||||
Sin contratos. Cancelás cuando querés.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Beneficios de la suscripción</h2>
|
||||
<ul>
|
||||
<li>Acceso a lotes exclusivos y ediciones limitadas</li>
|
||||
<li>Descuentos especiales para suscriptores</li>
|
||||
<li>Envío gratuito en cada pedido</li>
|
||||
<li>Notas de cata y guías de preparación en cada envío</li>
|
||||
<li>Podés pausar o cancelar cuando quieras</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="planes">
|
||||
<h2>Elegí tu plan</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Plan</th>
|
||||
<th scope="col">Normal</th>
|
||||
<th scope="col">Premium</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Precio mensual</td>
|
||||
<td>$10</td>
|
||||
<td>$15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gramos por envío</td>
|
||||
<td>250 g</td>
|
||||
<td>500 g</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cafés de origen único</td>
|
||||
<td>1 por mes</td>
|
||||
<td>2 por mes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Envío gratuito</td>
|
||||
<td>✓</td>
|
||||
<td>✓</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Guía de preparación</td>
|
||||
<td>✓</td>
|
||||
<td>✓</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acceso a lotes exclusivos</td>
|
||||
<td>—</td>
|
||||
<td>✓</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="formulario">
|
||||
<h2>Suscribite a BrewBox</h2>
|
||||
<form action="#" method="post">
|
||||
|
||||
<fieldset id="fs-personal">
|
||||
<legend>Datos personales</legend>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="name">Nombre</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="lastname">Apellido</label>
|
||||
<input type="text" id="lastname" name="lastname" required>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="email">Correo electrónico</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="field-group checkbox-group">
|
||||
<input type="checkbox" id="student" name="student">
|
||||
<label for="student">Soy estudiante</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="fs-plan">
|
||||
<legend>Plan</legend>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Plan elegido</label>
|
||||
<div class="radio-group">
|
||||
<label><input type="radio" name="plan" value="normal" required> Normal — $10/mes</label>
|
||||
<label><input type="radio" name="plan" value="premium"> Premium — $15/mes</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="reason">¿Por qué te suscribís?</label>
|
||||
<textarea id="reason" name="reason" rows="4"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="fs-pago">
|
||||
<legend>Método de pago</legend>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="payment">Tipo de tarjeta</label>
|
||||
<select id="payment" name="payment" required>
|
||||
<option value="">Seleccioná un método</option>
|
||||
<option value="credit">Tarjeta de crédito</option>
|
||||
<option value="debit">Tarjeta de débito</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="card">Número de tarjeta</label>
|
||||
<input type="text" id="card" name="card" placeholder="1234 5678 9012 3456" required>
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field-group">
|
||||
<label for="expiry">Vencimiento</label>
|
||||
<input type="text" id="expiry" name="expiry" placeholder="MM/AA" required>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label for="cvv">CVV</label>
|
||||
<input type="text" id="cvv" name="cvv" placeholder="123" required>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="fs-envio">
|
||||
<legend>Dirección de envío</legend>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="address">Dirección</label>
|
||||
<input type="text" id="address" name="address" placeholder="Calle, número, piso/depto" required>
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field-group">
|
||||
<label for="postal">Código postal</label>
|
||||
<input type="text" id="postal" name="postal" required>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label for="city">Ciudad</label>
|
||||
<input type="text" id="city" name="city" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="state">Provincia</label>
|
||||
<select id="state" name="state" required>
|
||||
<option value="">Seleccioná una provincia</option>
|
||||
<option value="BS">Buenos Aires</option>
|
||||
<option value="CAT">Catamarca</option>
|
||||
<option value="CHA">Chaco</option>
|
||||
<option value="CHU">Chubut</option>
|
||||
<option value="CBA">Córdoba</option>
|
||||
<option value="COR">Corrientes</option>
|
||||
<option value="ER">Entre Ríos</option>
|
||||
<option value="FO">Formosa</option>
|
||||
<option value="JU">Jujuy</option>
|
||||
<option value="LP">La Pampa</option>
|
||||
<option value="LR">La Rioja</option>
|
||||
<option value="MZA">Mendoza</option>
|
||||
<option value="MI">Misiones</option>
|
||||
<option value="NQN">Neuquén</option>
|
||||
<option value="RN">Río Negro</option>
|
||||
<option value="SA">Salta</option>
|
||||
<option value="SJ">San Juan</option>
|
||||
<option value="SL">San Luis</option>
|
||||
<option value="SF">Santa Fe</option>
|
||||
<option value="SE">Santiago del Estero</option>
|
||||
<option value="TF">Tierra del Fuego</option>
|
||||
<option value="TUC">Tucumán</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="fs-legal">
|
||||
<legend>Preferencias</legend>
|
||||
|
||||
<div class="field-group checkbox-group">
|
||||
<input type="checkbox" id="terms" name="terms" required>
|
||||
<label for="terms">Acepto los términos y condiciones</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group checkbox-group">
|
||||
<input type="checkbox" id="offers" name="offers">
|
||||
<label for="offers">Quiero recibir ofertas y novedades por email</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" class="cta-button">Suscribirme</button>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="site-footer">
|
||||
<p>© 2026 BrewBox. Todos los derechos reservados.</p>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user