Plano 404, escala 1:100
Esta casa todavía está en planos.
La propiedad que buscas se ha vendido o aún no se ha construido. Tenemos muchas más esperando visita.
Ver propiedadesHTML + CSS404
404 Inmobiliaria
Un plano azul de una vivienda se dibuja trazo a trazo; una habitación queda en blanco y rayada con la cota 404.
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-realestate {
--accent: #7dd3fc;
--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-realestate *,.n4-realestate *::before,.n4-realestate *::after {
box-sizing: border-box;
}
.n4-realestate .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-realestate .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-realestate .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-realestate .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-realestate .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-realestate .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-realestate .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-realestate .n4-stars,.n4-realestate .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-realestate .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-realestate-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-realestate .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-realestate-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-realestate [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-realestate-tw {
from {
opacity: .3;
}
}
@keyframes n4-realestate-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-realestate-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-realestate *,.n4-realestate *::before,.n4-realestate *::after {
animation: none!important;
transition: none!important;
}
}
.n4-realestate {
background: #0b3a75;
color: #e0f2fe;
}
.n4-realestate::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size: 8cqmin 8cqmin,8cqmin 8cqmin,1.6cqmin 1.6cqmin,1.6cqmin 1.6cqmin;
}
.n4-realestate .n4-plan {
width: min(78cqmin,560px);
height: auto;
margin-bottom: 1cqmin;
overflow: visible;
}
.n4-realestate .n4-plan path {
fill: none;
stroke: #e0f2fe;
stroke-linecap: round;
}
.n4-realestate .n4-wall {
stroke-width: 5;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: n4-realestate-draw calc(1.6s / var(--k)) ease-out forwards;
}
.n4-realestate .n4-in {
stroke-width: 3;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: n4-realestate-draw calc(1.4s / var(--k)) calc(1.2s / var(--k)) ease-out forwards;
}
.n4-realestate .n4-plan .n4-door {
stroke-width: 1.2;
stroke-dasharray: 1;
stroke-dashoffset: 1;
opacity: .7;
animation: n4-realestate-draw calc(.8s / var(--k)) calc(2.4s / var(--k)) ease-out forwards;
}
.n4-realestate .n4-plan .n4-win {
stroke: var(--accent);
stroke-width: 7;
opacity: 0;
animation: n4-realestate-show calc(.5s / var(--k)) calc(2.6s / var(--k)) forwards;
}
.n4-realestate .n4-void {
fill: url(#n4re-hatch);
fill: repeating-linear-gradient(45deg,transparent 0 6px,rgba(125,211,252,.2) 6px 7px);
stroke: var(--accent);
stroke-width: 1.5;
stroke-dasharray: 6 5;
opacity: 0;
animation: n4-realestate-show calc(.6s / var(--k)) calc(2.8s / var(--k)) forwards,n4-realestate-dash calc(6s / var(--k)) linear infinite;
}
.n4-realestate .n4-plan .n4-dim {
stroke: var(--accent);
stroke-width: 1;
opacity: 0;
animation: n4-realestate-show calc(.5s / var(--k)) calc(3s / var(--k)) forwards;
}
.n4-realestate .n4-room {
font: 500 12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
fill: #bae6fd;
text-anchor: middle;
opacity: 0;
animation: n4-realestate-show calc(.6s / var(--k)) calc(2.6s / var(--k)) forwards;
}
.n4-realestate .n4-404 {
font: 800 34px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
fill: var(--accent);
text-anchor: middle;
opacity: 0;
animation: n4-realestate-show calc(.6s / var(--k)) calc(3s / var(--k)) forwards;
}
.n4-realestate .n4-m {
font: 600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
fill: var(--accent);
text-anchor: middle;
opacity: 0;
animation: n4-realestate-show calc(.5s / var(--k)) calc(3.1s / var(--k)) forwards;
}
.n4-realestate .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.02em;
}
.n4-realestate .n4-sub {
color: #bcd7f2;
}
.n4-realestate .n4-cta {
background: #e0f2fe;
color: #0b3a75;
}
@keyframes n4-realestate-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes n4-realestate-show {
to {
opacity: 1;
}
}
@keyframes n4-realestate-dash {
to {
stroke-dashoffset: -44;
}
}
@media (prefers-reduced-motion:reduce) {
.n4-realestate .n4-plan * {
stroke-dashoffset: 0!important;
opacity: 1!important;
}
}
</style>
</head>
<body>
<main class="n4-realestate">
<div class="n4-copy">
<svg class="n4-plan" viewBox="0 0 400 250" aria-hidden="true">
<path class="n4-wall" pathLength="1" d="M20 20H380V230H20Z"/>
<path class="n4-in" pathLength="1" d="M170 20V120M170 150V230M20 130H90M120 130H170M170 120H260M290 120H380M260 120V230"/>
<path class="n4-door" pathLength="1" d="M90 130A30 30 0 0 1 120 100M260 150A30 30 0 0 0 290 120"/>
<path class="n4-win" d="M50 20h80M50 230h80M380 50v50M220 230h30"/>
<rect class="n4-void" x="262" y="122" width="116" height="106"/>
<path class="n4-dim" d="M262 240H378M262 236v8M378 236v8"/>
<text class="n4-room" x="95" y="80">Salón</text>
<text class="n4-room" x="95" y="185">Cocina</text>
<text class="n4-room" x="215" y="70">Dormitorio</text>
<text class="n4-room" x="215" y="185">Baño</text>
<text class="n4-404" x="320" y="185">404</text>
<text class="n4-m" x="320" y="248">? m²</text>
</svg>
<span class="n4-tag">Plano 404, escala 1:100</span>
<h1 class="n4-title">Esta casa todavía está en planos.</h1>
<p class="n4-sub">La propiedad que buscas se ha vendido o aún no se ha construido. Tenemos muchas más esperando visita.</p>
<a class="n4-cta" href="/">Ver propiedades</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
Los portales inmobiliarios despublican anuncios a diario cuando una casa se vende o se alquila, y eso deja muchos enlaces muertos en los buscadores. Esta página convierte el problema en un plano: primero se dibujan los muros exteriores, luego los interiores, las puertas y las ventanas, y al final aparecen los nombres de las estancias. Una habitación queda vacía, rayada, con un 404 grande y la superficie desconocida.
Todo es SVG en línea con animaciones CSS, así que pesa poco y se ve nítido a cualquier tamaño. Los nombres de las estancias son texto traducible, con movimiento reducido se ve el plano terminado y el azul claro de acento se puede cambiar.