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
404 Metro
El cartel esmaltado de una estación cerrada y el plano de la línea: el tren para en todas menos en la 404.
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-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>Página 404</b><small>Estación cerrada</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>Norte</span></span><span class="n4-st" style="--p:20"><i></i><span>Plaza</span></span><span class="n4-st" style="--p:40"><i></i><span>Museo</span></span><span class="n4-st n4-ghost" style="--p:60"><i></i><span>Página 404</span></span><span class="n4-st" style="--p:80"><i></i><span>Mercado</span></span><span class="n4-st" style="--p:100"><i></i><span>Sur</span></span>
<i class="n4-train"></i>
</div>
<h1 class="n4-title">Este tren no para en la página 404.</h1>
<p class="n4-sub">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.</p>
<a class="n4-cta" href="/">Volver al inicio de la línea</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
Las webs de transporte y las guías de ciudad pueden tomar prestada la señalética del metro para su página de error. Un cartel esmaltado blanco con el distintivo rojo de la línea dice Página 404, estación cerrada, con una cinta de obra en una esquina, y debajo un plano de la línea muestra seis estaciones sobre azulejo blanco.
Un tren pequeño recorre la línea, espera en cada parada y pasa por la estación 404, rayada y con un destello, sin detenerse. Todo es HTML y animaciones CSS. Cambia el color de la línea con el acento y enlaza el botón con la primera estación.