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
U-Bahn-404
Das Emailleschild einer geschlossenen Station und der Linienplan: Der Zug hält überall, nur an der 404 fährt er durch.
Einstellungen
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 · Seite nicht gefunden</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>Seite 404</b><small>Station geschlossen</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>Platz</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>Seite 404</span></span><span class="n4-st" style="--p:80"><i></i><span>Markt</span></span><span class="n4-st" style="--p:100"><i></i><span>Süd</span></span>
<i class="n4-train"></i>
</div>
<h1 class="n4-title">Dieser Zug hält nicht an Seite 404.</h1>
<p class="n4-sub">Die Station ist seit Langem geschlossen, und die Züge fahren durch. Steig an der nächsten Haltestelle aus oder fahr zurück zum Anfang der Linie.</p>
<a class="n4-cta" href="/">Zurück zum Linienanfang</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Alle ansehen: 404Wofür du ihn nutzen kannst
Verkehrsbetriebe und Stadtführer können für ihre Fehlerseite die Optik der U-Bahn-Beschilderung übernehmen. Ein weißes Emailleschild mit rotem Linienkreis meldet Seite 404, geschlossene Station, mit Absperrband über einer Ecke, darunter zeigt ein Linienplan sechs Stationen auf weißen Metrofliesen.
Ein kleiner Zug fährt die Linie ab, wartet an jeder Station und rollt an der schraffierten 404 vorbei, die kurz aufblinkt. Alles besteht aus HTML und CSS-Keyframes. Ändere die Linienfarbe über den Akzent und verlinke den Button mit der ersten Station.