Sala 4, fila 04
Esta sesión no está en cartelera.
La película que buscas ya no se proyecta en esta sala. Consulta la cartelera para ver qué echan hoy.
Ver carteleraHTML + CSS404
404 Cine
Se abre el telón y la pantalla proyecta una cuenta atrás de película antigua que acaba en 404 en vez de empezar.
Ajustes
1x
Código
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-cinema {
--accent: #ef4444;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-cinema *,.n4-cinema *::before,.n4-cinema *::after {
box-sizing: border-box;
}
.n4-cinema .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-cinema .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-cinema .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-cinema .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-cinema .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-cinema .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-cinema .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-cinema .n4-stars,.n4-cinema .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-cinema .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-cinema-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-cinema .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-cinema-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-cinema [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-cinema-tw {
from {
opacity: .3;
}
}
@keyframes n4-cinema-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-cinema-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-cinema *,.n4-cinema *::before,.n4-cinema *::after {
animation: none!important;
transition: none!important;
}
}
.n4-cinema {
background: radial-gradient(70% 50% at 50% 28%,#3b0d12,#0c0405 75%);
color: #fff5f5;
}
.n4-cinema .n4-hall {
position: relative;
width: min(84cqmin,600px);
aspect-ratio: 16/9;
margin-bottom: 1cqmin;
overflow: hidden;
border-radius: 1cqmin;
}
.n4-cinema .n4-screen {
position: absolute;
left: 12%;
right: 12%;
top: 8%;
height: 66%;
display: grid;
place-items: center;
overflow: hidden;
background: radial-gradient(circle,#d6d3d1,#78716c);
box-shadow: 0 0 4cqmin rgba(255,255,255,.25);
filter: sepia(.5);
}
.n4-cinema .n4-sweep {
position: absolute;
width: 80%;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(rgba(0,0,0,.35) var(--a,0deg),transparent 0);
animation: n4-cinema-sweep calc(1s / var(--k)) linear infinite;
}
.n4-cinema .n4-cross {
position: absolute;
inset: 0;
background: linear-gradient(#1c1917,#1c1917) center/100% 1.5px no-repeat,linear-gradient(#1c1917,#1c1917) center/1.5px 100% no-repeat,radial-gradient(circle,transparent 27%,#1c1917 27.5% 28.5%,transparent 29% 35%,#1c1917 35.5% 36.5%,transparent 37%);
}
.n4-cinema .n4-n {
position: absolute;
font: 800 clamp(30px,13cqmin,96px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: #1c1917;
opacity: 0;
animation: n4-cinema-count calc(4s / var(--k)) linear infinite;
animation-delay: calc(var(--i) * 1s / var(--k));
}
.n4-cinema .n4-end {
color: var(--accent);
font-size: clamp(26px,10cqmin,76px);
}
.n4-cinema .n4-curtain {
position: absolute;
top: 0;
bottom: 0;
width: 52%;
background: repeating-linear-gradient(90deg,#7f1d1d 0 3%,#b91c1c 5%,#7f1d1d 8%),#7f1d1d;
box-shadow: inset 0 -3cqmin 3cqmin rgba(0,0,0,.5);
}
.n4-cinema .n4-cl {
left: 0;
transform-origin: 0 0;
animation: n4-cinema-openl calc(1.6s / var(--k)) .3s cubic-bezier(.6,0,.3,1) forwards;
}
.n4-cinema .n4-cr {
right: 0;
transform-origin: 100% 0;
animation: n4-cinema-openr calc(1.6s / var(--k)) .3s cubic-bezier(.6,0,.3,1) forwards;
}
.n4-cinema .n4-seats {
position: absolute;
left: -2%;
right: -2%;
bottom: -4%;
height: 22%;
background: radial-gradient(circle at 50% 100%,#000 55%,transparent 57%) 0 0/6.4% 100%,radial-gradient(circle at 50% 100%,#120607 55%,transparent 57%) 3.2% 40%/6.4% 100%;
}
.n4-cinema .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.02em;
}
.n4-cinema .n4-sub {
color: #d6b4b4;
}
.n4-cinema .n4-cta {
background: var(--accent);
color: #fff;
}
@property --a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes n4-cinema-sweep {
to {
--a: 360deg;
}
}
@keyframes n4-cinema-count {
0%,24.9% {
opacity: 1;
}
25%,100% {
opacity: 0;
}
}
@keyframes n4-cinema-openl {
to {
transform: scaleX(.2);
}
}
@keyframes n4-cinema-openr {
to {
transform: scaleX(.2);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-cinema .n4-curtain {
display: none;
}
.n4-cinema .n4-end {
opacity: 1;
}
}
</style>
</head>
<body>
<main class="n4-cinema">
<div class="n4-copy">
<div class="n4-hall" aria-hidden="true">
<div class="n4-screen"><i class="n4-sweep"></i><i class="n4-cross"></i><b class="n4-n" style="--i:0">3</b><b class="n4-n" style="--i:1">2</b><b class="n4-n" style="--i:2">1</b><b class="n4-n n4-end" style="--i:3">404</b></div>
<i class="n4-curtain n4-cl"></i><i class="n4-curtain n4-cr"></i>
<i class="n4-seats"></i>
</div>
<span class="n4-tag">Sala 4, fila 04</span>
<h1 class="n4-title">Esta sesión no está en cartelera.</h1>
<p class="n4-sub">La película que buscas ya no se proyecta en esta sala. Consulta la cartelera para ver qué echan hoy.</p>
<a class="n4-cta" href="/">Ver cartelera</a>
</div>
</main>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Para cines, festivales y plataformas, una página perdida es una película que ya no se proyecta. Esta página de error abre un telón de terciopelo rojo sobre una pantalla sepia con la cola clásica de una película: cruz, anillos y una sombra que barre la cuenta atrás de tres, dos, uno. En lugar de la primera escena, la cuenta acaba en un 404 rojo y vuelve a empezar.
Las siluetas de las butacas completan la sala. La cuenta atrás es CSS puro con una propiedad de ángulo animada, y con movimiento reducido no hay telón y el 404 se ve directamente. Lleva el botón a la cartelera o a los horarios.