EDITOR
<!DOCTYPE html><html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intro Elegante - ENHD</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
background-color: #050510;
color: #f5f5f5;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.intro-hero {
position: relative;
min-height: 100vh;
padding: 40px 10% 60px 10%;
display: flex;
flex-direction: column;
justify-content: center;
background: url("tu-fondo.jpg") center/cover no-repeat;
color: #f5f5f5;
overflow: hidden;
}
.intro-overlay {
position: absolute;
inset: 0;
background: rgba(5, 5, 15, 0.82);
backdrop-filter: blur(10px);
}
/* ENHD grande y centrado */
.logo-center {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: 30px;
}
.logo-center span {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(5, 5, 15, 0.65);
backdrop-filter: blur(18px);
font-size: 2.6rem;
letter-spacing: 0.6em;
text-transform: uppercase;
font-weight: 700;
}
.intro-content {
position: relative;
max-width: 980px;
text-align: center;
z-index: 1;
margin: 0 auto;
}
.intro-content h1 {
font-size: 2.3rem;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0.8rem;
}
.intro-content p {
font-size: 1rem;
color: rgba(230, 230, 235, 0.8);
margin-bottom: 2.8rem;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.top-accent {
width: 56px;
height: 2px;
margin: 0 auto 10px auto;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.2)
);
}
.cards-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
}
.card-link {
text-decoration: none;
color: inherit;
}
.card-link .stat-card {
cursor: pointer;
}
.stat-card {
position: relative;
padding: 1.6rem 1.3rem;
border-radius: 18px;
background: rgba(20, 20, 30, 0.7);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(16px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
transition: transform 0.25s ease, box-shadow 0.25s ease,
background 0.25s ease, border-color 0.25s ease;
overflow: hidden;
}
.stat-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at top left,
rgba(255, 255, 255, 0.18),
transparent 55%
);
opacity: 0.35;
mix-blend-mode: screen;
pointer-events: none;
}
.stat-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(220, 220, 230, 0.85);
z-index: 1;
}
.stat-number {
font-size: 2.1rem;
font-weight: 600;
letter-spacing: 0.1em;
color: #ffffff;
z-index: 1;
}
.suffix {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(200, 200, 210, 0.7);
z-index: 1;
}
.stat-card:hover {
transform: translateY(-6px);
background: rgba(35, 35, 50, 0.85);
box-shadow: 0 26px 65px rgba(0, 0, 0, 0.7);
border-color: rgba(255, 255, 255, 0.16);
}
.cta-wrapper {
margin-top: 2.5rem;
display: flex;
justify-content: center;
}
.btn-entrar {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.9rem 2.6rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.02)
);
color: #ffffff;
font-size: 0.9rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
backdrop-filter: blur(16px);
transition: background 0.25s ease, transform 0.25s ease,
box-shadow 0.25s ease, border-color 0.25s ease;
}
.btn-entrar:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0.06)
);
border-color: rgba(255, 255, 255, 0.28);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
transform: translateY(-2px);
}
footer {
text-align: center;
padding: 18px 10%;
font-size: 0.8rem;
color: rgba(200, 200, 210, 0.7);
background: #050510;
}
@media (max-width: 900px) {
.intro-hero {
padding: 30px 6% 50px 6%;
}
.cards-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-center span {
font-size: 2.1rem;
letter-spacing: 0.45em;
}
.intro-content h1 {
font-size: 2rem;
}
}
@media (max-width: 600px) {
.intro-hero {
padding: 25px 1.5rem 40px 1.5rem;
}
.cards-grid {
grid-template-columns: 1fr;
}
.logo-center span {
font-size: 1.8rem;
letter-spacing: 0.35em;
padding: 0.45rem 1.1rem;
}
.intro-content h1 {
font-size: 1.7rem;
}
.intro-content p {
font-size: 0.95rem;
}
}
</style>
</head>
<body>
<main class="intro-hero">
<div class="intro-overlay"></div>
<!-- ENHD grande centrado -->
<div class="logo-center">
<span>ENHD</span>
</div>
<section class="intro-content" aria-label="Resumen de catálogo ENHD">
<div class="top-accent"></div>
<h1>Explora tu universo visual</h1>
<p>
Descubre una selección curada de películas, animación, documentales y
anime, pensada para que siempre tengas algo nuevo que ver.
</p>
<div class="cards-grid">
<a href="/peliculas" class="card-link">
<article class="stat-card">
<span class="stat-label">Películas</span>
<span class="stat-number" data-target="30">0</span>
<span class="suffix">títulos</span>
</article>
</a>
<a href="/animacion" class="card-link">
<article class="stat-card">
<span class="stat-label">Animación</span>
<span class="stat-number" data-target="20">0</span>
<span class="suffix">títulos</span>
</article>
</a>
<a href="/documentales" class="card-link">
<article class="stat-card">
<span class="stat-label">Documentales</span>
<span class="stat-number" data-target="6">0</span>
<span class="suffix">títulos</span>
</article>
</a>
<a href="/anime" class="card-link">
<article class="stat-card">
<span class="stat-label">Anime</span>
<span class="stat-number" data-target="5">0</span>
<span class="suffix">títulos</span>
</article>
</a>
</div>
<!-- Botón general de entrar -->
<div class="cta-wrapper">
<a href="/home" class="btn-entrar">Entrar</a>
</div>
</section>
</main>
<footer>
© 2026 ENHD. Todos los derechos reservados.
</footer>
<!-- Script para animar los contadores -->
<script>
document.addEventListener("DOMContentLoaded", () => {
const counters = document.querySelectorAll(".stat-number");
const duration = 1200;
counters.forEach(counter => {
const target = parseInt(counter.getAttribute("data-target"), 10);
const startTime = performance.now();
function update(now) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
const value = Math.floor(progress * target);
counter.textContent = value.toString().padStart(2, "0");
if (progress < 1) {
requestAnimationFrame(update);
} else {
counter.textContent = target.toString().padStart(2, "0");
}
}
requestAnimationFrame(update);
});
});
</script>
</body>
</html>