Este tren no para en la página 404.
La estación lleva tiempo cerrada y los trenes pasan sin detenerse. Baja en la siguiente parada o vuelve al inicio de la línea.
Volver al inicio de la líneaHTML + CSS404
Metro line 404
The enamel sign of a closed station and the line map: the train stops everywhere except at 404, where it rolls on.
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-metro {
--accent: #e03a3e;
--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-metro *,.n4-metro *::before,.n4-metro *::after {
box-sizing: border-box;
}
.n4-metro .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-metro .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-metro .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-metro .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-metro .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-metro .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-metro .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-metro .n4-stars,.n4-metro .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-metro .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-metro-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-metro .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-metro-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-metro [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-metro-tw {
from {
opacity: .3;
}
}
@keyframes n4-metro-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-metro-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-metro *,.n4-metro *::before,.n4-metro *::after {
animation: none!important;
transition: none!important;
}
}
.n4-metro {
background: linear-gradient(#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(90deg,#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(#fbfcfc,#edf0f1);
color: #1d1d1f;
font-family: "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
.n4-metro .n4-sign {
position: relative;
display: flex;
align-items: center;
gap: .8em;
overflow: hidden;
font-size: min(2.6cqmin,19px);
padding: .75em 3.6em .75em .85em;
border-radius: .9em;
background: #fff;
box-shadow: inset 0 0 0 .22em #1d1d1f,0 .9em 1.4em -.8em rgba(0,0,0,.35);
}
.n4-metro .n4-sign::after {
content: "";
position: absolute;
right: -3.4em;
top: 1em;
width: 8em;
height: 1em;
rotate: 38deg;
background: repeating-linear-gradient(-45deg,var(--accent) 0 .7em,#fff .7em 1.4em);
box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}
.n4-metro .n4-line {
display: grid;
place-items: center;
flex: none;
width: 2.1em;
height: 2.1em;
border-radius: 50%;
background: var(--accent);
color: #fff;
font: 800 1.3em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
.n4-metro .n4-name {
display: grid;
gap: .15em;
text-align: left;
}
.n4-metro .n4-name b {
font: 800 1.9em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: -.02em;
}
.n4-metro .n4-name small {
font: 700 .72em/1.2 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
color: #6b6b70;
text-transform: uppercase;
letter-spacing: .16em;
}
.n4-metro .n4-map {
position: relative;
width: min(70cqmin,480px);
height: 4.6em;
font-size: min(1.8cqmin,13px);
margin: 2.2cqmin 0 .6cqmin;
}
.n4-metro .n4-track {
position: absolute;
left: 4%;
right: 4%;
top: 1.4em;
height: .7em;
border-radius: 1em;
background: var(--accent);
}
.n4-metro .n4-st {
position: absolute;
top: 1.75em;
left: calc(4% + var(--p) * .92%);
display: grid;
justify-items: center;
translate: -50% -.75em;
}
.n4-metro .n4-st i {
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 .32em #1d1d1f;
}
.n4-metro .n4-st span {
margin-top: .5em;
font: 700 .95em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
white-space: nowrap;
}
.n4-metro .n4-ghost i {
background: repeating-linear-gradient(45deg,#fff 0 .2em,#dcdce0 .2em .4em);
box-shadow: inset 0 0 0 .32em #9a9aa0;
animation: n4-metro-flick calc(14s / var(--k)) linear infinite alternate;
}
.n4-metro .n4-ghost span {
color: #8d8d93;
text-decoration: line-through;
text-decoration-color: var(--accent);
}
.n4-metro .n4-train {
position: absolute;
z-index: 2;
top: 1.75em;
left: 4%;
width: 3.4em;
height: 1.4em;
translate: -50% -50%;
border-radius: .7em;
background: linear-gradient(90deg,transparent .5em,rgba(255,255,255,.85) .5em 1em,transparent 1em 1.3em,rgba(255,255,255,.85) 1.3em 1.8em,transparent 1.8em 2.1em,rgba(255,255,255,.85) 2.1em 2.6em,transparent 2.6em) 0 50%/100% .5em no-repeat,#1d1d1f;
box-shadow: 0 .2em .4em rgba(0,0,0,.35);
animation: n4-metro-ride calc(14s / var(--k)) ease-in-out infinite alternate;
}
.n4-metro .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-metro .n4-sub {
color: #5d5d63;
}
.n4-metro .n4-cta {
background: #1d1d1f;
color: #fff;
}
@keyframes n4-metro-ride {
0%,4% {
left: 4%;
}
16%,22% {
left: 22.4%;
}
38%,44% {
left: 40.8%;
}
70%,76% {
left: 77.6%;
}
92%,100% {
left: 96%;
}
}
@keyframes n4-metro-flick {
0%,52%,62%,100% {
box-shadow: inset 0 0 0 .32em #9a9aa0;
}
55%,59% {
box-shadow: inset 0 0 0 .32em var(--accent),0 0 0 .5em color-mix(in srgb,var(--accent) 35%,transparent);
}
}
</style>
</head>
<body>
<main class="n4-metro">
<div class="n4-copy">
<div class="n4-sign" aria-hidden="true">
<span class="n4-line" translate="no">4</span>
<span class="n4-name"><b>Page 404</b><small>Station closed</small></span>
</div>
<div class="n4-map" aria-hidden="true">
<i class="n4-track"></i>
<span class="n4-st" style="--p:0"><i></i><span>North</span></span><span class="n4-st" style="--p:20"><i></i><span>Square</span></span><span class="n4-st" style="--p:40"><i></i><span>Museum</span></span><span class="n4-st n4-ghost" style="--p:60"><i></i><span>Page 404</span></span><span class="n4-st" style="--p:80"><i></i><span>Market</span></span><span class="n4-st" style="--p:100"><i></i><span>South</span></span>
<i class="n4-train"></i>
</div>
<h1 class="n4-title">This train doesn't stop at page 404.</h1>
<p class="n4-sub">The station has been closed for a while and trains pass straight through. Get off at the next stop or go back to the start of the line.</p>
<a class="n4-cta" href="/">Back to the start of the line</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
Transport sites and city guides can borrow the look of underground signage for their error page. A white enamel sign with a red line badge reads Page 404, closed station, with warning tape across one corner, and below it a line diagram shows six stations on white subway tiles.
A small train moves along the line, waits at each stop and passes the hatched 404 station without stopping while it flickers. It is all HTML and CSS keyframes. Change the line color with the accent and link the button to the first station.