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
404 Parking
Vue du dessus d'un parking plein ; une voiture entre, met son clignotant à la place 404, ne trouve rien et repart.
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-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">Niveau −1, place 404</span>
<h1 class="n4-title">Aucune place pour cette page.</h1>
<p class="n4-sub">On a fait trois fois le tour du pâté de maisons sans la trouver. Essaie le niveau du dessus ou retourne à l'entrée.</p>
<a class="n4-cta" href="/">Sortir du parking</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
Tout conducteur connaît la sensation de tourner dans un parking plein, ce qui en fait une métaphore sympathique pour une page absente. Vu du dessus, deux rangées de voitures colorées occupent toutes les places sauf une, où 404 est peint sur l'asphalte. Une voiture blanche avance phares allumés, ralentit, met son clignotant devant la place vide puis continue sa route.
Idéal pour les gestionnaires de parkings, les applis de mobilité, les concessionnaires et les services municipaux. La scène est en SVG intégré animé en CSS, le jaune d'accent peint la voie et le numéro, et le bouton peut mener à l'entrée ou à une carte.