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 Plan immobilier
Le plan bleu d'un logement se dessine trait par trait ; une pièce reste vide et hachurée avec la cote 404.
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-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">Salon</text>
<text class="n4-room" x="95" y="185">Cuisine</text>
<text class="n4-room" x="215" y="70">Chambre</text>
<text class="n4-room" x="215" y="185">Salle de bain</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, échelle 1:100</span>
<h1 class="n4-title">Cette maison n'existe encore que sur plan.</h1>
<p class="n4-sub">Le bien que tu cherches est vendu ou pas encore construit. Beaucoup d'autres attendent ta visite.</p>
<a class="n4-cta" href="/">Voir les biens</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
Les portails immobiliers retirent chaque jour des annonces dès qu'un bien est vendu ou loué, ce qui laisse beaucoup de liens morts dans les résultats de recherche. Cette page en fait un plan : les murs extérieurs se dessinent d'abord, puis les cloisons, les portes et les fenêtres, et enfin les noms des pièces. Une pièce reste vide, hachurée, avec un grand 404 et une surface inconnue.
Tout est en SVG intégré avec des animations CSS, léger et net à toute taille. Les noms des pièces sont du texte traduisible, le mouvement réduit montre le plan terminé et l'accent bleu clair se change selon ta marque.