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 Métro
La plaque émaillée d'une station fermée et le plan de ligne : la rame s'arrête partout sauf à la 404, qu'elle traverse.
Réglages
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 introuvable</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 fermée</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>Nord</span></span><span class="n4-st" style="--p:20"><i></i><span>Place</span></span><span class="n4-st" style="--p:40"><i></i><span>Musée</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>Marché</span></span><span class="n4-st" style="--p:100"><i></i><span>Sud</span></span>
<i class="n4-train"></i>
</div>
<h1 class="n4-title">Ce train ne s'arrête pas à la page 404.</h1>
<p class="n4-sub">La station est fermée depuis longtemps et les rames passent sans s'arrêter. Descends au prochain arrêt ou retourne au début de la ligne.</p>
<a class="n4-cta" href="/">Retour au début de la ligne</a>
</div>
</main>
</body>
</html>
Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans 404
Voir tout : 404Où l’utiliser
Les sites de transport et les guides de ville peuvent reprendre la signalétique du métro pour leur page d'erreur. Une plaque émaillée blanche avec le pastille rouge de la ligne indique Page 404, station fermée, barrée d'un ruban de chantier dans un coin, et dessous un plan montre six stations sur un carrelage blanc.
Une petite rame parcourt la ligne, attend à chaque arrêt et passe la station 404 hachurée sans s'arrêter, pendant qu'elle clignote. Tout est en HTML et animations CSS. Change la couleur de ligne avec l'accent et relie le bouton à la première station.