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
Real estate floor plan 404
A blueprint of a home draws itself line by line; one room is left blank and hatched with the dimension 404.
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-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">Living room</text>
<text class="n4-room" x="95" y="185">Kitchen</text>
<text class="n4-room" x="215" y="70">Bedroom</text>
<text class="n4-room" x="215" y="185">Bathroom</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">Plan 404, scale 1:100</span>
<h1 class="n4-title">This house is still on paper.</h1>
<p class="n4-sub">The property you're looking for has been sold or hasn't been built yet. Plenty of others are waiting for a viewing.</p>
<a class="n4-cta" href="/">See properties</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
Property portals unpublish listings every day once homes are sold or rented, which leaves plenty of dead links in search results. This page turns the problem into a blueprint: outer walls draw in first, then the inner walls, doors and windows, and finally the room labels appear. One room stays empty with a dashed, hatched outline, a big 404 and an unknown floor area.
Everything is inline SVG with CSS animations, so it is light and sharp at any size. Room names are translatable text, reduced motion shows the finished plan, and the light blue accent can be changed to match your brand.