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
Immobilien-Grundriss-404
Ein blauer Grundriss zeichnet sich Strich für Strich; ein Raum bleibt leer und schraffiert, mit dem Maß 404.
Einstellungen
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 · Seite nicht gefunden</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">Wohnzimmer</text>
<text class="n4-room" x="95" y="185">Küche</text>
<text class="n4-room" x="215" y="70">Schlafzimmer</text>
<text class="n4-room" x="215" y="185">Bad</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, Maßstab 1:100</span>
<h1 class="n4-title">Dieses Haus existiert erst auf dem Plan.</h1>
<p class="n4-sub">Die gesuchte Immobilie ist verkauft oder noch nicht gebaut. Viele andere warten auf eine Besichtigung.</p>
<a class="n4-cta" href="/">Immobilien ansehen</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Alle ansehen: 404Wofür du ihn nutzen kannst
Immobilienportale nehmen täglich Anzeigen offline, sobald eine Wohnung verkauft oder vermietet ist, und hinterlassen tote Links in den Suchergebnissen. Diese Seite macht daraus einen Bauplan: Zuerst entstehen die Außenwände, dann Innenwände, Türen und Fenster, schließlich die Raumnamen. Ein Raum bleibt leer, gestrichelt und schraffiert, mit großer 404 und unbekannter Fläche.
Alles ist eingebettetes SVG mit CSS Animationen, leicht und in jeder Größe scharf. Die Raumnamen sind übersetzbarer Text, bei reduzierter Bewegung erscheint der fertige Plan, und der hellblaue Akzent lässt sich an deine Marke anpassen.