generated from marquez.juan/Ejercicio-inicial--git-y-HTML
refactor(HTML): HTML structure and enhance styles for BrewBox landing page
- Updated HTML to improve semantic structure and accessibility. - Enhanced CSS styles for better visual appeal and responsiveness. - Added new background images for hero section. - Improved navigation and footer layout for better user experience.
This commit is contained in:
539
src/index.html
539
src/index.html
@@ -1,254 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
<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 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>
|
||||
<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>
|
||||
</section>
|
||||
<a href="#planes" class="hero-secondary">Ver planes</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<div class="hero-scroll">
|
||||
<div class="scroll-line"></div>
|
||||
<span>Scroll</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="formulario">
|
||||
<h2>Suscribite a BrewBox</h2>
|
||||
<form action="#" method="post">
|
||||
<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>
|
||||
|
||||
<fieldset id="fs-personal">
|
||||
<legend>Datos personales</legend>
|
||||
<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>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="name">Nombre</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="lastname">Apellido</label>
|
||||
<input type="text" id="lastname" name="lastname" required>
|
||||
</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 />
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label for="lastname">Apellido</label>
|
||||
<input type="text" id="lastname" name="lastname" required />
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="field-group">
|
||||
<label for="email">Correo electrónico</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="field-group checkbox-group">
|
||||
<input type="checkbox" id="student" name="student">
|
||||
<label for="student">Soy estudiante</label>
|
||||
</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 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="1234 5678 9012 3456"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</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-plan">
|
||||
<legend>Plan</legend>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer id="site-footer">
|
||||
<p>© 2026 BrewBox. Todos los derechos reservados.</p>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user