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:
BIN
public/assets/bg-1.jpg
Normal file
BIN
public/assets/bg-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 MiB |
BIN
public/assets/bg-2.jpg
Normal file
BIN
public/assets/bg-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 MiB |
BIN
public/assets/bg-3.jpg
Normal file
BIN
public/assets/bg-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 MiB |
539
src/index.html
539
src/index.html
@@ -1,254 +1,335 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
|
<head>
|
||||||
<head>
|
<meta charset="UTF-8" />
|
||||||
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>BrewBox</title>
|
<title>BrewBox</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header id="site-header">
|
<header id="site-header">
|
||||||
<nav id="main-nav">
|
<nav id="main-nav">
|
||||||
<a href="#" class="nav-logo">BrewBox</a>
|
<a href="#" class="nav-logo">Brew<span>Box</span></a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#hero">Inicio</a></li>
|
<li><a href="#hero">Inicio</a></li>
|
||||||
<li><a href="#beneficios">Beneficios</a></li>
|
<li><a href="#beneficios">Beneficios</a></li>
|
||||||
<li><a href="#planes">Planes</a></li>
|
<li><a href="#planes">Planes</a></li>
|
||||||
<li><a href="#formulario">Suscribirse</a></li>
|
<li><a href="#formulario">Suscribirse</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
<section id="hero">
|
||||||
<section id="hero">
|
<!-- Hero principal con imagen de fondo y call to action -->
|
||||||
<!-- Hero princiapl de la web con call to action -->
|
<div class="hero-content">
|
||||||
<img src="assets/hero.jpg" alt="hero image" class="hero-image">
|
<span class="hero-eyebrow">Suscripción mensual</span>
|
||||||
<h1>Café de especialidad en tu puerta, cada mes.</h1>
|
<h1>Café de especialidad, <em>en tu puerta.</em></h1>
|
||||||
<p>
|
<p>
|
||||||
Seleccionamos los mejores granos de origen único de todo el mundo
|
Granos de origen único, tostados a pedido y enviados frescos cada
|
||||||
y los enviamos frescos, tostados a pedido, directo a tu casa.
|
mes. Sin contratos, sin compromiso.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
<a href="#formulario" class="cta-button">Empezar ahora</a>
|
<a href="#formulario" class="cta-button">Empezar ahora</a>
|
||||||
</section>
|
<a href="#planes" class="hero-secondary">Ver planes</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section id="beneficios">
|
<div class="hero-stats">
|
||||||
<article class="card">
|
<div class="stat-item">
|
||||||
<h2>¿Por qué BrewBox?</h2>
|
<span class="stat-number">12+</span>
|
||||||
<p>
|
<span class="stat-label">Orígenes</span>
|
||||||
Trabajamos con tostadores independientes y fincas de origen único.
|
</div>
|
||||||
Cada envío viene con notas de cata, origen del grano y método de preparación recomendado.
|
<div class="stat-item">
|
||||||
Sin contratos. Cancelás cuando querés.
|
<span class="stat-number">500</span>
|
||||||
</p>
|
<span class="stat-label">Suscriptores</span>
|
||||||
</article>
|
</div>
|
||||||
<article class="card">
|
</div>
|
||||||
<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">
|
<div class="hero-scroll">
|
||||||
<h2>Elegí tu plan</h2>
|
<div class="scroll-line"></div>
|
||||||
<table>
|
<span>Scroll</span>
|
||||||
<thead>
|
</div>
|
||||||
<tr>
|
</section>
|
||||||
<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">
|
<section id="beneficios">
|
||||||
<h2>Suscribite a BrewBox</h2>
|
<!-- Cards de beneficios -->
|
||||||
<form action="#" method="post">
|
<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">
|
<section id="planes">
|
||||||
<legend>Datos personales</legend>
|
<!-- 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">
|
<section id="formulario">
|
||||||
<label for="name">Nombre</label>
|
<!-- Formulario de suscripción -->
|
||||||
<input type="text" id="name" name="name" required>
|
<div class="formulario-header">
|
||||||
</div>
|
<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">
|
<form action="#" method="post">
|
||||||
<label for="lastname">Apellido</label>
|
<fieldset id="fs-personal">
|
||||||
<input type="text" id="lastname" name="lastname" required>
|
<legend>Datos personales</legend>
|
||||||
</div>
|
<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">
|
<fieldset id="fs-plan">
|
||||||
<label for="email">Correo electrónico</label>
|
<legend>Plan</legend>
|
||||||
<input type="email" id="email" name="email" required>
|
<div class="field-group">
|
||||||
</div>
|
<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">
|
<fieldset id="fs-pago">
|
||||||
<input type="checkbox" id="student" name="student">
|
<legend>Método de pago</legend>
|
||||||
<label for="student">Soy estudiante</label>
|
<div class="field-group">
|
||||||
</div>
|
<label for="payment">Tipo de tarjeta</label>
|
||||||
</fieldset>
|
<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">
|
<fieldset id="fs-envio">
|
||||||
<legend>Plan</legend>
|
<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">
|
<fieldset id="fs-legal">
|
||||||
<label>Plan elegido</label>
|
<legend>Preferencias</legend>
|
||||||
<div class="radio-group">
|
<div class="field-group checkbox-group">
|
||||||
<label><input type="radio" name="plan" value="normal" required> Normal — $10/mes</label>
|
<input type="checkbox" id="terms" name="terms" required />
|
||||||
<label><input type="radio" name="plan" value="premium"> Premium — $15/mes</label>
|
<label for="terms">Acepto los términos y condiciones</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="field-group checkbox-group">
|
||||||
|
<input type="checkbox" id="offers" name="offers" />
|
||||||
<div class="field-group">
|
<label for="offers"
|
||||||
<label for="reason">¿Por qué te suscribís?</label>
|
>Quiero recibir ofertas y novedades por email</label
|
||||||
<textarea id="reason" name="reason" rows="4"></textarea>
|
>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</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>
|
|
||||||
|
|
||||||
|
<div class="form-submit">
|
||||||
|
<button type="submit" class="cta-button">Suscribirme</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer id="site-footer">
|
<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>
|
</footer>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
</html>
|
|
||||||
|
|||||||
797
src/styles.css
797
src/styles.css
@@ -1,9 +1,804 @@
|
|||||||
|
/* Global Styles */
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: #f5f0e8;
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
/* Navbar */
|
/* Navbar */
|
||||||
#site-header {
|
#site-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-color: rgba(10, 10, 10, 0.85);
|
background-color: rgba(10, 10, 10, 0.95);
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
letter-spacing: 0.12rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #f5f0e8;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo span {
|
||||||
|
color: #c8a96e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul a {
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(245, 240, 232, 0.425);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #c8a96e;
|
||||||
|
transition: width 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul a:hover {
|
||||||
|
color: #f5f0e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul a:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul li:last-child a {
|
||||||
|
color: #0a0a0a;
|
||||||
|
background: #c8a96e;
|
||||||
|
padding: 0.45rem 1.1rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul li:last-child a::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-nav ul li:last-child a:hover {
|
||||||
|
background: #b8946a;
|
||||||
|
color: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
#hero {
|
||||||
|
position: relative;
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
background-image: url('/public/assets/bg-1.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(10, 10, 10, 0.6) 0%,
|
||||||
|
rgba(10, 10, 10, 0.5) 40%,
|
||||||
|
rgba(10, 10, 10, 0.75) 70%,
|
||||||
|
rgba(10, 10, 10, 0.97) 100%
|
||||||
|
);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem 10rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-eyebrow {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c8a96e;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
border-left: 2px solid #c8a96e;
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero h1 {
|
||||||
|
font-size: clamp(2.8rem, 6vw, 5.5rem);
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.05;
|
||||||
|
color: #f5f0e8;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
max-width: 14ch;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero h1 em {
|
||||||
|
font-style: italic;
|
||||||
|
color: #c8a96e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: rgba(245, 240, 232, 0.55);
|
||||||
|
max-width: 42ch;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #0a0a0a;
|
||||||
|
background: #c8a96e;
|
||||||
|
padding: 0.85rem 2rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
background: #b8946a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-secondary {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(245, 240, 232, 0.4);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid rgba(245, 240, 232, 0.2);
|
||||||
|
padding-bottom: 1px;
|
||||||
|
transition: color 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-secondary:hover {
|
||||||
|
color: #f5f0e8;
|
||||||
|
border-color: rgba(245, 240, 232, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6rem;
|
||||||
|
right: 2rem;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #f5f0e8;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(245, 240, 232, 0.35);
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-scroll {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2.5rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
right: auto;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: rgba(245, 240, 232, 0.25);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-line {
|
||||||
|
width: 1px;
|
||||||
|
height: 40px;
|
||||||
|
background: linear-gradient(to bottom, rgba(245, 240, 232, 0.25), transparent);
|
||||||
|
animation: scrollpulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scrollpulse {
|
||||||
|
0%, 100% { opacity: 0.3; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Benefits Section */
|
||||||
|
|
||||||
|
#beneficios {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 6rem 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios .card {
|
||||||
|
background: #111;
|
||||||
|
padding: 3rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios .card:first-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios .card:hover {
|
||||||
|
border-color: rgba(200, 169, 110, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-eyebrow {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c8a96e;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios h2 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #f5f0e8;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios p {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgba(245, 240, 232, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios ul li {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: rgba(245, 240, 232, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios ul li::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 16px;
|
||||||
|
min-width: 16px;
|
||||||
|
height: 1px;
|
||||||
|
background: #c8a96e;
|
||||||
|
margin-top: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#beneficios {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beneficios .card:first-child {
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plans section */
|
||||||
|
|
||||||
|
#planes {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 6rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-eyebrow {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c8a96e;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes h2 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #f5f0e8;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes thead tr {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes thead th {
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
color: rgba(245, 240, 232, 0.35);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes thead th.col-premium {
|
||||||
|
color: #c8a96e;
|
||||||
|
border-top: 1px solid rgba(200, 169, 110, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes tbody tr {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes tbody tr:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes tbody td {
|
||||||
|
padding: 1.1rem 1.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes tbody td:first-child {
|
||||||
|
color: rgba(245, 240, 232, 0.4);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#planes tbody td:not(:first-child) {
|
||||||
|
color: #f5f0e8;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-premium {
|
||||||
|
background: rgba(200, 169, 110, 0.04);
|
||||||
|
border-left: 1px solid rgba(200, 169, 110, 0.12);
|
||||||
|
border-right: 1px solid rgba(200, 169, 110, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.check { color: #c8a96e; }
|
||||||
|
.dash { color: rgba(245, 240, 232, 0.15); }
|
||||||
|
|
||||||
|
/* Subscription Form */
|
||||||
|
|
||||||
|
#formulario {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 6rem 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
gap: 6rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulario-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulario-header .section-eyebrow {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c8a96e;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulario-header h2 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.15;
|
||||||
|
color: #f5f0e8;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulario-header p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgba(245, 240, 232, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
padding: 2rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(245, 240, 232, 0.25);
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
padding: 0;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(245, 240, 232, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
color: #f5f0e8;
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0.6rem 0.75rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s, background 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="email"]:focus,
|
||||||
|
textarea:focus,
|
||||||
|
select:focus {
|
||||||
|
border-bottom-color: #c8a96e;
|
||||||
|
background: rgba(255, 255, 255, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
color: rgba(245, 240, 232, 0.2);
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(245,240,232,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 0.75rem center;
|
||||||
|
padding-right: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
select option {
|
||||||
|
background: #111;
|
||||||
|
color: #f5f0e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 100px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-transform: none;
|
||||||
|
color: rgba(245, 240, 232, 0.6);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group input[type="radio"] {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 16px;
|
||||||
|
min-width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid rgba(245, 240, 232, 0.25);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group input[type="radio"]:checked {
|
||||||
|
border-color: #c8a96e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group input[type="radio"]::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #c8a96e;
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group input[type="radio"]:checked::after {
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group input[type="checkbox"] {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 15px;
|
||||||
|
min-width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border: 1px solid rgba(245, 240, 232, 0.25);
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: border-color 0.2s, background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group input[type="checkbox"]:checked {
|
||||||
|
background: #c8a96e;
|
||||||
|
border-color: #c8a96e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group input[type="checkbox"]::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: 5px;
|
||||||
|
width: 4px;
|
||||||
|
height: 7px;
|
||||||
|
border: 1px solid #0a0a0a;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none;
|
||||||
|
transform: rotate(45deg) scale(0);
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group input[type="checkbox"]:checked::after {
|
||||||
|
transform: rotate(45deg) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
text-transform: none;
|
||||||
|
color: rgba(245, 240, 232, 0.5);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: #c8a96e;
|
||||||
|
border: 1px solid rgba(200, 169, 110, 0.3);
|
||||||
|
padding: 0.1rem 0.4rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-submit {
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.75rem;
|
||||||
|
color: rgba(245, 240, 232, 0.25);
|
||||||
|
pointer-events: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon-wrapper input {
|
||||||
|
padding-left: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon-wrapper:focus-within .input-icon {
|
||||||
|
color: #c8a96e;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#formulario {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulario-header {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
|
#site-footer {
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
margin-top: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-inner {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo {
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(245, 240, 232, 0.3);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo span {
|
||||||
|
color: rgba(200, 169, 110, 0.4);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo:hover { color: rgba(245, 240, 232, 0.6); }
|
||||||
|
.footer-logo:hover span { color: #c8a96e; }
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(245, 240, 232, 0.2);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a:hover { color: rgba(245, 240, 232, 0.6); }
|
||||||
|
|
||||||
|
.footer-copy {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: rgba(245, 240, 232, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer-inner {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user