Planta −1, plaza 404
No hay plaza para esta página.
Hemos dado tres vueltas a la manzana y no aparece. Prueba en la planta de arriba o vuelve a la entrada.
Salir del parkingHTML + CSS404
Parkhaus-404
Ein volles Parkhaus von oben; ein Auto fährt herein, blinkt an Platz 404, findet nichts und fährt weiter.
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-parking {
--accent: #facc15;
--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-parking *,.n4-parking *::before,.n4-parking *::after {
box-sizing: border-box;
}
.n4-parking .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-parking .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-parking .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-parking .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-parking .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-parking .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-parking .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-parking .n4-stars,.n4-parking .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-parking .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-parking-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-parking .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-parking-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-parking [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-parking-tw {
from {
opacity: .3;
}
}
@keyframes n4-parking-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-parking-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-parking *,.n4-parking *::before,.n4-parking *::after {
animation: none!important;
transition: none!important;
}
}
.n4-parking {
background: linear-gradient(180deg,#3a3f47,#181b20);
color: #f4f4f5;
}
.n4-parking .n4-lot {
width: min(80cqmin,560px);
height: auto;
margin-bottom: 2cqmin;
border-radius: 2cqmin;
box-shadow: 0 3cqmin 5cqmin -2cqmin #000;
}
.n4-parking .n4-mark {
stroke: #e5e7eb;
stroke-width: 2.5;
opacity: .75;
}
.n4-parking .n4-lane {
stroke: var(--accent);
stroke-width: 2;
stroke-dasharray: 14 12;
opacity: .5;
}
.n4-parking .n4-spot {
font: 800 22px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
fill: var(--accent);
opacity: .85;
}
.n4-parking .n4-mover {
animation: n4-parking-drive calc(9s / var(--k)) linear infinite;
}
.n4-parking .n4-beam {
fill: rgba(254,249,195,.18);
}
.n4-parking .n4-blink {
fill: #f59e0b;
opacity: 0;
animation: n4-parking-blink calc(9s / var(--k)) linear infinite;
}
.n4-parking .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.02em;
}
.n4-parking .n4-tag {
color: var(--accent);
}
.n4-parking .n4-cta {
background: var(--accent);
color: #111;
}
@keyframes n4-parking-drive {
0% {
transform: translate(-80px,100px);
}
38% {
transform: translate(196px,100px);
}
46%,58% {
transform: translate(218px,100px);
}
66% {
transform: translate(244px,100px);
}
100% {
transform: translate(480px,100px);
}
}
@keyframes n4-parking-blink {
40%,59% {
opacity: 0;
}
44%,48%,52%,56% {
opacity: 1;
}
46%,50%,54%,58% {
opacity: 0;
}
}
</style>
</head>
<body>
<main class="n4-parking">
<div class="n4-copy">
<svg class="n4-lot" viewBox="0 0 408 244" aria-hidden="true">
<rect width="408" height="244" rx="14" fill="#2b2f36"/>
<path class="n4-mark" d="M30 6v86M30 238v-86"/><g transform="translate(37 16)"><rect width="44" height="68" rx="11" fill="#ef4444"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><g transform="translate(37 158) rotate(180 22 34)"><rect width="44" height="68" rx="11" fill="#22c55e"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><path class="n4-mark" d="M88 6v86M88 238v-86"/><g transform="translate(95 16)"><rect width="44" height="68" rx="11" fill="#3b82f6"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><g transform="translate(95 158) rotate(180 22 34)"><rect width="44" height="68" rx="11" fill="#f59e0b"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><path class="n4-mark" d="M146 6v86M146 238v-86"/><g transform="translate(153 16)"><rect width="44" height="68" rx="11" fill="#e5e7eb"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><g transform="translate(153 158) rotate(180 22 34)"><rect width="44" height="68" rx="11" fill="#a855f7"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><path class="n4-mark" d="M204 6v86M204 238v-86"/><text class="n4-spot" x="233" y="64" text-anchor="middle">404</text><g transform="translate(211 158) rotate(180 22 34)"><rect width="44" height="68" rx="11" fill="#ef4444"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><path class="n4-mark" d="M262 6v86M262 238v-86"/><g transform="translate(269 16)"><rect width="44" height="68" rx="11" fill="#f59e0b"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><g transform="translate(269 158) rotate(180 22 34)"><rect width="44" height="68" rx="11" fill="#3b82f6"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><path class="n4-mark" d="M320 6v86M320 238v-86"/><g transform="translate(327 16)"><rect width="44" height="68" rx="11" fill="#a855f7"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><g transform="translate(327 158) rotate(180 22 34)"><rect width="44" height="68" rx="11" fill="#e5e7eb"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g><path class="n4-mark" d="M378 6v86M378 238v-86"/>
<path class="n4-lane" d="M10 122H398"/>
<g class="n4-mover"><path class="n4-beam" d="M44 12l60-16v52l-60-16z"/><g transform="rotate(90 22 22)"><g transform="translate(0 0)"><rect width="44" height="68" rx="11" fill="#f8fafc"/><rect x="6" y="14" width="32" height="14" rx="4" fill="#0f172a" opacity=".75"/><rect x="7" y="46" width="30" height="10" rx="3" fill="#0f172a" opacity=".55"/></g></g><circle class="n4-blink" cx="38" cy="2" r="3.2"/><circle class="n4-blink" cx="-18" cy="2" r="3.2"/></g>
</svg>
<span class="n4-tag">Ebene −1, Platz 404</span>
<h1 class="n4-title">Für diese Seite ist kein Platz frei.</h1>
<p class="n4-sub">Wir sind dreimal um den Block gefahren, und sie taucht nicht auf. Versuch die Ebene darüber oder fahr zurück zur Einfahrt.</p>
<a class="n4-cta" href="/">Parkhaus verlassen</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
Jeder kennt das Kreisen durch ein volles Parkhaus, und genau das macht es zur freundlichen Metapher für eine fehlende Seite. Von oben gesehen füllen zwei Reihen bunter Autos alle Stellplätze außer einem, auf dessen Asphalt 404 steht. Ein weißes Auto rollt mit Licht durch die Gasse, bremst, blinkt vor dem leeren Platz und fährt dann weiter.
Passt zu Parkhausbetreibern, Mobilitäts Apps, Autohäusern und städtischen Diensten. Die Szene ist eingebettetes SVG mit CSS Animation, der gelbe Akzent färbt Fahrbahn und Zahl, und der Knopf kann zur Einfahrt oder zu einer Karte führen.