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
Car park 404
A top down view of a full car park; one car drives in, indicates at space 404, finds nothing and drives 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-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">Level −1, space 404</span>
<h1 class="n4-title">There's no space for this page.</h1>
<p class="n4-sub">We've circled the block three times and it isn't here. Try the level above or head back to the entrance.</p>
<a class="n4-cta" href="/">Exit the car park</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
Every driver knows the feeling of circling a full car park, which makes it a friendly metaphor for a page that is not there. Seen from above, two rows of colorful cars fill every bay except one, where 404 is painted on the asphalt. A white car rolls along the lane with its headlights on, slows down, flashes its indicator at the empty space and then carries on.
It suits parking operators, mobility apps, car dealers and city services. The scene is inline SVG animated with CSS, the yellow accent paints the lane and the number, and the button can lead back to the entrance or to a map.