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
Cinema countdown 404
The curtain opens and the screen plays an old film leader countdown that ends in 404 instead of the movie.
Settings
1x
Code
<!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 · Page not found</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">Screen 4, row 04</span>
<h1 class="n4-title">This showing isn't on the bill.</h1>
<p class="n4-sub">The film you're looking for is no longer showing here. Check the listings to see what's on today.</p>
<a class="n4-cta" href="/">See listings</a>
</div>
</main>
</body>
</html>
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in 404
See all 404Where to use it
For cinemas, festivals and streaming catalogues, a page that is gone is like a film that is no longer showing. This error page opens a red velvet curtain onto a sepia screen with a classic film leader: crosshair, rings and a sweeping shadow that counts down three, two, one. Instead of the opening scene, the countdown lands on a red 404 and then starts again.
Silhouetted seats at the bottom complete the room. The countdown is pure CSS with an animated angle property, and reduced motion skips the curtain and shows the 404 directly. Send the button to your listings or showtimes page.