Landing — Minimal Clean (Azul)
Landing generalista con UI limpia: hero con CTA, features, estadísticas, pricing, FAQ y contacto.
landingSubido: 2025-09-29FREEFreeinformative
Galería
Abrir demo →Highlights
- Header pegajoso con menú móvil
- Hero con ilustración SVG y CTA dual
- Secciones: features, stats, pricing, FAQ, contacto
Detalles
- 100% responsive (grid adaptable)
- Variables CSS para paleta
- Scrollspy ligero y theme toggle con localStorage
Código
Ver demo →Landing — Minimal Clean (Azul)
Freeindex.htmlhtml
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing — Minimal Clean (Azul)</title>
</head>
<body>
<header>
<div class="container nav" role="navigation" aria-label="Principal">
<div class="brand">
<span class="brand-badge" aria-hidden="true"></span>
<span>Nombre del Sitio</span>
</div>
<button class="btn ghost menu-toggle" aria-expanded="false" aria-controls="mobile-nav">
Menú
</button>
<nav id="mobile-nav" aria-label="Secciones">
<ul>
<li><a href="#inicio" class="navlink">Inicio</a></li>
<li><a href="#caracteristicas" class="navlink">Características</a></li>
<li><a href="#precios" class="navlink">Precios</a></li>
<li><a href="#faq" class="navlink">Preguntas</a></li>
<li><a href="#contacto" class="navlink">Contacto</a></li>
</ul>
</nav>
<div style="display: flex; gap: 0.5rem; align-items: center">
<button class="btn ghost" id="themeBtn" aria-pressed="false" title="Cambiar tema">
Tema
</button>
<a href="#contacto" class="btn primary">Empezar</a>
</div>
</div>
</header>
<!-- ================= Hero ================= -->
<section id="inicio" class="container">
<div class="hero">
<div>
<span class="chip">Ejemplo</span>
<h1 class="h1" style="margin: 0.6rem 0 1rem">Título de ejemplo atractivo</h1>
<p class="lead">
Texto demostrativo y genérico para una propuesta clara. Este copy es solo de muestra y
puede reemplazarse por el mensaje que se requiera.
</p>
<div style="display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem">
<a class="btn primary" href="#precios">Ver planes</a>
<a class="btn" href="#caracteristicas">Cómo funciona</a>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(3, auto);
gap: 12px;
margin-top: 18px;
align-items: center;
"
>
<div class="muted" style="font-size: 0.9rem">Sin costo de ejemplo</div>
<div class="muted" style="font-size: 0.9rem">Entrega demostrativa</div>
<div class="muted" style="font-size: 0.9rem">Soporte ficticio</div>
</div>
</div>
<div class="hero-ill" aria-hidden="true">
<svg viewBox="0 0 400 300" width="85%" height="85%">
<defs>
<linearGradient id="g1" x1="0" x2="1">
<stop offset="0" stop-color="var(--primary-500)" />
<stop offset="1" stop-color="var(--accent-500)" />
</linearGradient>
</defs>
<rect
x="40"
y="40"
width="320"
height="220"
rx="16"
fill="url(#g1)"
opacity=".1"
stroke="var(--border)"
></rect>
<g opacity=".9">
<circle cx="100" cy="120" r="22" fill="var(--primary-500)" />
<rect x="140" y="105" width="160" height="10" rx="5" fill="var(--primary-500)" />
<rect x="140" y="125" width="110" height="10" rx="5" fill="var(--primary-300)" />
</g>
<g opacity=".9">
<circle cx="100" cy="190" r="22" fill="var(--accent-500)" />
<rect x="140" y="175" width="130" height="10" rx="5" fill="var(--accent-500)" />
<rect x="140" y="195" width="150" height="10" rx="5" fill="var(--accent-300)" />
</g>
</svg>
</div>
</div>
</section>
<!-- ================= Features ================= -->
<section id="caracteristicas">
<div class="container">
<div
style="
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
"
>
<div>
<h2 class="h2">Características de ejemplo</h2>
<p class="muted">Lista genérica para ilustrar secciones y bloques.</p>
</div>
<a class="btn ghost" href="#faq">Ver preguntas</a>
</div>
<div class="grid features">
<article class="card">
<div class="icon" aria-hidden="true">⚡</div>
<h3 style="margin: 0.6rem 0 0.2rem">Rendimiento demo</h3>
<p class="muted">
Descripción corta totalmente sustituible, pensada solo como relleno.
</p>
</article>
<article class="card">
<div class="icon" aria-hidden="true">🔒</div>
<h3 style="margin: 0.6rem 0 0.2rem">Seguridad ejemplo</h3>
<p class="muted">Texto de prueba para un punto clave que luego se personaliza.</p>
</article>
<article class="card">
<div class="icon" aria-hidden="true">🎯</div>
<h3 style="margin: 0.6rem 0 0.2rem">Objetivo claro</h3>
<p class="muted">Copia neutral que guía sin limitar el tipo de proyecto.</p>
</article>
<article class="card">
<div class="icon" aria-hidden="true">📈</div>
<h3 style="margin: 0.6rem 0 0.2rem">Escala flexible</h3>
<p class="muted">Sección de muestra con enfoque en crecimiento y cambios.</p>
</article>
<article class="card">
<div class="icon" aria-hidden="true">🧩</div>
<h3 style="margin: 0.6rem 0 0.2rem">Bloques modulares</h3>
<p class="muted">Elementos intercambiables para adaptar fácilmente.</p>
</article>
<article class="card">
<div class="icon" aria-hidden="true">✨</div>
<h3 style="margin: 0.6rem 0 0.2rem">Interfaz cuidada</h3>
<p class="muted">Detalles de UX genéricos y consistentes.</p>
</article>
</div>
<div class="grid stats" style="margin-top: 26px">
<div class="card" style="text-align: center">
<div class="h2">10K+</div>
<div class="muted">Usuarios demo</div>
</div>
<div class="card" style="text-align: center">
<div class="h2">2K+</div>
<div class="muted">Entregas muestra</div>
</div>
<div class="card" style="text-align: center">
<div class="h2">5+</div>
<div class="muted">Años ejemplo</div>
</div>
<div class="card" style="text-align: center">
<div class="h2">24/7</div>
<div class="muted">Soporte ficticio</div>
</div>
</div>
</div>
</section>
<!-- ================= Pricing ================= -->
<section id="precios">
<div class="container">
<div style="text-align: center; margin-bottom: 20px">
<h2 class="h2">Planes de ejemplo</h2>
<p class="muted">Precios orientativos en MXN y USD (solo demostración).</p>
</div>
<div class="grid pricing">
<article class="card plan">
<h3 class="h3" style="margin: 0 0 0.4rem">Básico</h3>
<p class="muted" style="margin: 0 0 1rem">Para comenzar con lo esencial.</p>
<div class="price">$9,999 <small class="sub">MXN</small></div>
<div class="muted" style="margin: 0.2rem 0 1.2rem">
$599 <span class="sub">USD</span>
</div>
<ul
class="muted"
style="padding-left: 1.1rem; margin: 0 0 1.1rem; display: grid; gap: 0.35rem"
>
<li>Sección ilustrativa 1</li>
<li>Sección ilustrativa 2</li>
<li>Soporte genérico</li>
</ul>
<a class="btn primary" href="#contacto">Elegir</a>
</article>
<article
class="card plan"
style="
border-color: transparent;
background: linear-gradient(
180deg,
color-mix(in oklab, var(--primary-500) 18%, var(--panel)),
var(--panel)
);
"
>
<div
class="chip"
style="
background: color-mix(in oklab, var(--secondary-100) 60%, white);
color: var(--secondary-800);
"
>
Recomendado
</div>
<h3 class="h3" style="margin: 0.5rem 0 0.4rem">Intermedio</h3>
<p class="muted" style="margin: 0 0 1rem">Equilibrio entre funciones y valor.</p>
<div class="price">$19,999 <small class="sub">MXN</small></div>
<div class="muted" style="margin: 0.2rem 0 1.2rem">
$1,199 <span class="sub">USD</span>
</div>
<ul
class="muted"
style="padding-left: 1.1rem; margin: 0 0 1.1rem; display: grid; gap: 0.35rem"
>
<li>Todo lo del Básico ejemplo</li>
<li>Bloques extra de muestra</li>
<li>Atención prioritaria</li>
</ul>
<a class="btn primary" href="#contacto">Elegir</a>
</article>
<article class="card plan">
<h3 class="h3" style="margin: 0 0 0.4rem">Avanzado</h3>
<p class="muted" style="margin: 0 0 1rem">Para una demo completa.</p>
<div class="price">$34,999 <small class="sub">MXN</small></div>
<div class="muted" style="margin: 0.2rem 0 1.2rem">
$2,099 <span class="sub">USD</span>
</div>
<ul
class="muted"
style="padding-left: 1.1rem; margin: 0 0 1.1rem; display: grid; gap: 0.35rem"
>
<li>Secciones avanzadas de ejemplo</li>
<li>Integraciones ficticias</li>
<li>Soporte extendido</li>
</ul>
<a class="btn primary" href="#contacto">Elegir</a>
</article>
</div>
</div>
</section>
<!-- ================= CTA ================= -->
<section>
<div
class="container card"
style="
display: grid;
align-items: center;
gap: 14px;
grid-template-columns: 1fr auto;
background: linear-gradient(
120deg,
color-mix(in oklab, var(--accent-100) 60%, white),
var(--panel)
);
"
>
<div>
<h3 class="h2" style="margin: 0 0 0.3rem">¿Listo para una demo de ejemplo?</h3>
<p class="muted" style="margin: 0">
Llamado a la acción genérico, adaptable a cualquier caso.
</p>
</div>
<a class="btn primary" href="#contacto">Solicitar muestra</a>
</div>
</section>
<!-- ================= FAQ ================= -->
<section id="faq">
<div class="container">
<h2 class="h2" style="margin-bottom: 12px">Preguntas frecuentes</h2>
<div class="grid" style="grid-template-columns: 1fr 1fr">
<div class="faq grid" style="gap: 12px">
<details>
<summary>¿El contenido es definitivo?</summary>
<p class="muted">
No, todo es texto de ejemplo y puede reemplazarse sin restricciones.
</p>
</details>
<details>
<summary>¿Los enlaces redirigen fuera?</summary>
<p class="muted">
No, llevan a secciones de esta misma página o sirven como placeholders.
</p>
</details>
</div>
<div class="faq grid" style="gap: 12px">
<details>
<summary>¿Se puede cambiar la paleta?</summary>
<p class="muted">
Sí, las variables CSS permiten ajustar colores de forma centralizada.
</p>
</details>
<details>
<summary>¿Incluye integraciones reales?</summary>
<p class="muted">No, esta es una plantilla demostrativa sin dependencias.</p>
</details>
</div>
</div>
</div>
</section>
<!-- ================= Contacto ================= -->
<section id="contacto">
<div class="container">
<div class="grid" style="grid-template-columns: 1.1fr 0.9fr">
<form class="card" onsubmit="event.preventDefault()">
<h3 class="h2" style="margin-top: 0">Contacto de ejemplo</h3>
<p class="muted">Formulario no funcional, pensado como referencia visual.</p>
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px">
<label class="grid" style="gap: 6px">
<span>Nombre</span>
<input
type="text"
placeholder="Nombre de ejemplo"
required
style="
padding: 0.75rem 0.9rem;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--fg);
"
/>
</label>
<label class="grid" style="gap: 6px">
<span>Correo</span>
<input
type="email"
placeholder="correo@ejemplo.com"
required
style="
padding: 0.75rem 0.9rem;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--fg);
"
/>
</label>
<label class="grid" style="gap: 6px; grid-column: 1 / -1">
<span>Mensaje</span>
<textarea
rows="5"
placeholder="Escribe tu texto de muestra aquí"
style="
padding: 0.75rem 0.9rem;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--fg);
"
></textarea>
</label>
</div>
<div style="display: flex; gap: 0.6rem; margin-top: 14px">
<button class="btn primary" type="submit">Enviar</button>
<button class="btn ghost" type="reset">Limpiar</button>
</div>
</form>
<aside class="card">
<h3 class="h2" style="margin-top: 0">Información genérica</h3>
<p class="muted">
Datos ficticios de referencia. Sustituir por información real cuando corresponda.
</p>
<ul class="muted" style="padding-left: 1.1rem; display: grid; gap: 0.35rem">
<li>Dirección de ejemplo</li>
<li>Horario demostrativo</li>
<li>Teléfono de muestra</li>
</ul>
<div
style="
height: 180px;
margin-top: 14px;
border-radius: 12px;
border: 1px solid var(--border);
background: repeating-linear-gradient(
45deg,
color-mix(in oklab, var(--primary-50) 60%, white) 0 12px,
transparent 12px 24px
);
"
></div>
</aside>
</div>
</div>
</section>
<!-- ================= Footer ================= -->
<footer>
<div class="container" style="display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap">
<div>© <span id="year"></span> Nombre del Sitio — Plantilla de ejemplo</div>
<div style="display: flex; gap: 10px">
<a href="#inicio">Arriba</a>
<a href="#">Aviso</a>
<a href="#">Privacidad</a>
</div>
</div>
</footer>
</body>
</html>