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
Vista cenital de un parking lleno; un coche entra, pone el intermitente en la plaza 404, no hay nada y sigue.
Ajustes
1x
Código
<!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 · Página no encontrada</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">Planta −1, plaza 404</span>
<h1 class="n4-title">No hay plaza para esta página.</h1>
<p class="n4-sub">Hemos dado tres vueltas a la manzana y no aparece. Prueba en la planta de arriba o vuelve a la entrada.</p>
<a class="n4-cta" href="/">Salir del parking</a>
</div>
</main>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Todo conductor ha dado vueltas por un parking lleno, una metáfora amable para una página que no está. Visto desde arriba, dos filas de coches de colores ocupan todas las plazas menos una, que tiene el 404 pintado en el asfalto. Un coche blanco avanza por el carril con las luces encendidas, frena, pone el intermitente ante la plaza vacía y sigue su camino.
Encaja en empresas de aparcamiento, apps de movilidad, concesionarios y servicios municipales. La escena es SVG en línea animado con CSS, el amarillo de acento pinta el carril y el número, y el botón puede llevar a la entrada o a un mapa.