generated from marquez.juan/Ejercicio-inicial--git-y-HTML
394 lines
15 KiB
HTML
394 lines
15 KiB
HTML
<!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>
|
|
<div id="progress-bar"></div>
|
|
<header id="site-header">
|
|
<nav id="main-nav">
|
|
<a href="#" class="nav-logo">Brew<span>Box</span></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 principal con imagen de fondo y call to action -->
|
|
<div class="hero-content">
|
|
<span class="hero-eyebrow">Suscripción mensual</span>
|
|
<h1>Café de especialidad, <em>en tu puerta.</em></h1>
|
|
<p>
|
|
Granos de origen único, tostados a pedido y enviados frescos cada
|
|
mes. Sin contratos, sin compromiso.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="#formulario" class="cta-button">Empezar ahora</a>
|
|
<a href="#planes" class="hero-secondary">Ver planes</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-number">12+</span>
|
|
<span class="stat-label">Orígenes</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">500</span>
|
|
<span class="stat-label">Suscriptores</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-scroll">
|
|
<div class="scroll-line"></div>
|
|
<span>Scroll</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="beneficios">
|
|
<!-- Cards de beneficios -->
|
|
<article class="card">
|
|
<span class="card-eyebrow">Nuestra filosofía</span>
|
|
<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">
|
|
<span class="card-eyebrow">Lo que incluye</span>
|
|
<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">
|
|
<!-- Tabla comparativa de planes -->
|
|
<div class="section-header">
|
|
<span class="section-eyebrow">Precios</span>
|
|
<h2>Elegí tu plan</h2>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col"></th>
|
|
<th scope="col">Normal</th>
|
|
<th scope="col" class="col-premium">Premium</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Precio mensual</td>
|
|
<td>$10</td>
|
|
<td class="col-premium">$15</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Gramos por envío</td>
|
|
<td>250 g</td>
|
|
<td class="col-premium">500 g</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cafés de origen único</td>
|
|
<td>1 por mes</td>
|
|
<td class="col-premium">2 por mes</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Envío gratuito</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td class="col-premium"><span class="check">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Guía de preparación</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td class="col-premium"><span class="check">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Acceso a lotes exclusivos</td>
|
|
<td><span class="dash">—</span></td>
|
|
<td class="col-premium"><span class="check">✓</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section id="formulario">
|
|
<!-- Formulario de suscripción -->
|
|
<div class="formulario-header">
|
|
<span class="section-eyebrow">Unite</span>
|
|
<h2>Suscribite a BrewBox</h2>
|
|
<p>
|
|
Completá el formulario y recibís tu primer envío en menos de 72hs.
|
|
Estudiantes obtienen un descuento del 20%.
|
|
</p>
|
|
<div class="plan-preview" id="plan-preview">
|
|
<div class="plan-preview-inner">
|
|
<span class="plan-preview-label">Plan seleccionado</span>
|
|
<span class="plan-preview-name" id="plan-preview-name">—</span>
|
|
<span class="plan-preview-price" id="plan-preview-price"></span>
|
|
<ul class="plan-preview-features" id="plan-preview-features"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="#" method="post">
|
|
<fieldset id="fs-personal">
|
|
<legend>Datos personales</legend>
|
|
<div class="field-row">
|
|
<div class="field-group">
|
|
<label for="name">Nombre</label>
|
|
<input type="text" id="name" name="name" required />
|
|
<span class="field-error-msg"
|
|
>Ingresá al menos 2 caracteres</span
|
|
>
|
|
</div>
|
|
<div class="field-group">
|
|
<label for="lastname">Apellido</label>
|
|
<input type="text" id="lastname" name="lastname" required />
|
|
<span class="field-error-msg"
|
|
>Ingresá al menos 2 caracteres</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="field-group">
|
|
<label for="email">Correo electrónico</label>
|
|
<input type="email" id="email" name="email" required />
|
|
<span class="field-error-msg"
|
|
>Ingresá un correo electrónico válido</span
|
|
>
|
|
</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>
|
|
<span class="char-counter" id="reason-counter">0 / 300</span>
|
|
</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" id="cuotas-group" style="display: none">
|
|
<label for="cuotas">Cantidad de cuotas</label>
|
|
<input
|
|
type="number"
|
|
id="cuotas"
|
|
name="cuotas"
|
|
min="1"
|
|
max="12"
|
|
placeholder="1"
|
|
/>
|
|
<div class="field-group field-group--icon">
|
|
<label for="card">Número de tarjeta</label>
|
|
<div class="input-icon-wrapper">
|
|
<svg
|
|
class="input-icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
|
|
<line x1="1" y1="10" x2="23" y2="10"></line>
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
id="card"
|
|
name="card"
|
|
placeholder="XXXX-XXXX-XXXX-XXXX"
|
|
required
|
|
/>
|
|
<span class="card-brand" id="card-brand"></span>
|
|
</div>
|
|
<span class="field-error-msg">Número de tarjeta inválido</span>
|
|
</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
|
|
/>
|
|
<span class="field-error-msg">Formato MM/AA</span>
|
|
</div>
|
|
<div class="field-group">
|
|
<label for="cvv">CVV</label>
|
|
<input
|
|
type="text"
|
|
id="cvv"
|
|
name="cvv"
|
|
placeholder="123"
|
|
required
|
|
/>
|
|
<span class="field-error-msg">Ingresá un CVV válido</span>
|
|
</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="buenos-aires">Buenos Aires</option>
|
|
<option value="catamarca">Catamarca</option>
|
|
<option value="chaco">Chaco</option>
|
|
<option value="chubut">Chubut</option>
|
|
<option value="caba">Ciudad Autónoma de Buenos Aires</option>
|
|
<option value="cordoba">Córdoba</option>
|
|
<option value="corrientes">Corrientes</option>
|
|
<option value="entre-rios">Entre Ríos</option>
|
|
<option value="formosa">Formosa</option>
|
|
<option value="jujuy">Jujuy</option>
|
|
<option value="la-pampa">La Pampa</option>
|
|
<option value="la-rioja">La Rioja</option>
|
|
<option value="mendoza">Mendoza</option>
|
|
<option value="misiones">Misiones</option>
|
|
<option value="neuquen">Neuquén</option>
|
|
<option value="rio-negro">Río Negro</option>
|
|
<option value="salta">Salta</option>
|
|
<option value="san-juan">San Juan</option>
|
|
<option value="san-luis">San Luis</option>
|
|
<option value="santa-cruz">Santa Cruz</option>
|
|
<option value="santa-fe">Santa Fe</option>
|
|
<option value="santiago-del-estero">Santiago del Estero</option>
|
|
<option value="tierra-del-fuego">Tierra del Fuego</option>
|
|
<option value="tucuman">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>
|
|
|
|
<div class="form-submit">
|
|
<button type="submit" class="cta-button">Suscribirme</button>
|
|
</div>
|
|
</form>
|
|
<div id="form-confirmation">
|
|
<div class="confirmation-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<p class="confirmation-title">¡Bienvenido a BrewBox!</p>
|
|
<p class="confirmation-text">
|
|
Tu suscripción fue registrada. En las próximas horas vas a recibir
|
|
un email de confirmación con los detalles de tu primer envío.
|
|
</p>
|
|
<p class="confirmation-detail">
|
|
Primer envío estimado: <span id="confirm-date"></span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer id="site-footer">
|
|
<div class="footer-inner">
|
|
<a href="#" class="footer-logo">Brew<span>Box</span></a>
|
|
<ul class="footer-links">
|
|
<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>
|
|
<p class="footer-copy">© 2026 BrewBox</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|