Planta 4 · Habitación 404
Zimmer 404 gibt es nicht.
Den Schlüssel haben wir, aber die Tür ist auf keinem Flur zu finden. An der Rezeption zeigen wir dir den Weg.
Zurück zur RezeptionHTML + CSS404
Hotel-404
Der Messingschlüssel von Zimmer 404 hängt am Haken und schwingt sacht, während ein Lichtreflex über den Anhänger wandert.
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-hotel {
--accent: #d9b168;
--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-hotel *,.n4-hotel *::before,.n4-hotel *::after {
box-sizing: border-box;
}
.n4-hotel .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-hotel .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-hotel .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-hotel .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-hotel .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-hotel .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-hotel .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-hotel .n4-stars,.n4-hotel .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-hotel .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-hotel-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-hotel .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-hotel-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-hotel [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-hotel-tw {
from {
opacity: .3;
}
}
@keyframes n4-hotel-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-hotel-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-hotel *,.n4-hotel *::before,.n4-hotel *::after {
animation: none!important;
transition: none!important;
}
}
.n4-hotel {
background: radial-gradient(46cqmin 40cqmin at 50% 28%,rgba(255,196,120,.16),transparent 70%),radial-gradient(90% 70% at 50% 30%,#4a1220,#1f060c 72%,#140307);
color: #f7ead6;
}
.n4-hotel .n4-key {
flex: none;
width: auto;
height: clamp(240px,44cqmin,360px);
margin-bottom: 1.6cqmin;
overflow: visible;
filter: drop-shadow(0 2.4cqmin 2.4cqmin rgba(0,0,0,.55));
animation: n4-hotel-drop calc(1.2s / var(--k)) cubic-bezier(.2,.8,.2,1) both;
}
.n4-hotel .n4-swing {
transform-box: view-box;
transform-origin: 100px 12px;
animation: n4-hotel-swing calc(3.2s / var(--k)) ease-in-out infinite alternate;
}
.n4-hotel .n4-num {
font: 700 38px/1 "Baskerville","Libre Baskerville","Big Caslon",Georgia,serif;
fill: #4a2e06;
}
.n4-hotel .n4-no {
font: 600 6.4px/1 "Baskerville","Libre Baskerville","Big Caslon",Georgia,serif;
letter-spacing: 1.6px;
fill: #4a2e06;
fill-opacity: .75;
}
.n4-hotel .n4-hi {
fill: #fff3cf;
fill-opacity: .5;
}
.n4-hotel .n4-shine {
animation: n4-hotel-shine calc(5s / var(--k)) ease-in-out infinite;
}
.n4-hotel .n4-tag {
color: var(--accent);
}
.n4-hotel .n4-title {
font-family: "Baskerville","Libre Baskerville","Big Caslon",Georgia,serif;
font-weight: 600;
font-size: clamp(24px,6cqmin,52px);
letter-spacing: -.01em;
}
.n4-hotel .n4-sub {
color: #c9ab9c;
}
.n4-hotel .n4-cta {
background: linear-gradient(180deg,#f6dc9a,var(--accent) 55%,#b8862f);
color: #2a0911;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6),0 .6cqmin 1.6cqmin rgba(0,0,0,.4);
}
.n4-hotel .n4-copy>:not(.n4-key) {
animation: n4-hotel-fade calc(1s / var(--k)) calc(.5s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-hotel-drop {
from {
opacity: 0;
transform: translateY(-4cqmin);
}
}
@keyframes n4-hotel-swing {
from {
transform: rotate(4deg);
}
to {
transform: rotate(-4deg);
}
}
@keyframes n4-hotel-shine {
0%,55% {
transform: rotate(18deg) translateX(-90px);
}
100% {
transform: rotate(18deg) translateX(110px);
}
}
</style>
</head>
<body>
<main class="n4-hotel">
<div class="n4-copy">
<svg class="n4-key" viewBox="0 0 200 290" aria-hidden="true">
<defs>
<linearGradient id="n4ht-brass" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#6b4510"/><stop offset=".28" stop-color="#d6ac55"/><stop offset=".44" stop-color="#fff0c2"/><stop offset=".62" stop-color="#c8963a"/><stop offset="1" stop-color="#5c3a0b"/></linearGradient>
<linearGradient id="n4ht-metal" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff0c2"/><stop offset=".5" stop-color="#c8963a"/><stop offset="1" stop-color="#6b4510"/></linearGradient>
<linearGradient id="n4ht-shine" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".5" stop-color="#fff" stop-opacity=".75"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>
<clipPath id="n4ht-fob"><path d="M100 50 C116 50 126 60 128 74 L144 206 C147 240 124 264 100 264 C76 264 53 240 56 206 L72 74 C74 60 84 50 100 50 Z"/></clipPath>
</defs>
<circle cx="100" cy="12" r="6" fill="url(#n4ht-metal)"/>
<g class="n4-swing">
<g transform="translate(100 62) rotate(-38)" fill="url(#n4ht-metal)">
<circle cx="0" cy="10" r="9" fill="none" stroke="url(#n4ht-metal)" stroke-width="4.5"/>
<rect x="-4.5" y="20" width="9" height="4" rx="1.5"/>
<rect x="-2.6" y="23" width="5.2" height="96" rx="2"/>
<rect x="-4.5" y="30" width="9" height="3" rx="1.5"/>
<path d="M2.6 98 H16 V104 H10 V108 H16 V116 H2.6 Z"/>
</g>
<path d="M100 50 C116 50 126 60 128 74 L144 206 C147 240 124 264 100 264 C76 264 53 240 56 206 L72 74 C74 60 84 50 100 50 Z" fill="url(#n4ht-brass)"/>
<path d="M100 58 C112 58 119 66 120.5 77 L135.5 206 C138 234 119 255 100 255 C81 255 62 234 64.5 206 L79.5 77 C81 66 88 58 100 58 Z" fill="none" stroke="#4a2e06" stroke-opacity=".45" stroke-width="1.2"/>
<circle cx="100" cy="68" r="5" fill="#2a0a12" stroke="#4a2e06" stroke-opacity=".6"/>
<text class="n4-no" x="100" y="136" text-anchor="middle">HABITACIÓN</text>
<text class="n4-num n4-hi" x="100" y="187.8" text-anchor="middle">404</text>
<text class="n4-num" x="100" y="187" text-anchor="middle">404</text>
<text class="n4-no" x="100" y="222" text-anchor="middle">GRAN HOTEL</text>
<g clip-path="url(#n4ht-fob)"><rect class="n4-shine" x="40" y="40" width="44" height="240" fill="url(#n4ht-shine)" transform="rotate(18 100 150)"/></g>
<circle cx="100" cy="42" r="26" fill="none" stroke="url(#n4ht-metal)" stroke-width="3.6"/>
</g>
</svg>
<span class="n4-tag">4. Stock · Zimmer 404</span>
<h1 class="n4-title">Zimmer 404 gibt es nicht.</h1>
<p class="n4-sub">Den Schlüssel haben wir, aber die Tür ist auf keinem Flur zu finden. An der Rezeption zeigen wir dir den Weg.</p>
<a class="n4-cta" href="/">Zurück zur Rezeption</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
Wofür du ihn nutzen kannst
Wer ein Hotel bucht, hat meist fünf Tabs offen und vergleicht Preise. Führt ein altes Angebot oder eine Zimmerseite von einem Buchungsportal ins Leere, wird genau dieser Tab zuerst geschlossen. Eine 404-Seite fürs Hotel, die immer noch nach deiner Lobby aussieht, verschafft dir eine zweite Chance, bevor woanders gebucht wird.
Lass den Button zu deiner Buchungsmaschine führen statt zur Startseite, denn danach hat der Gast gesucht. Bordeaux und Messing wirken nach klassischem Haus oder Boutiquehotel. Für ein Surf-Hostel änderst du die Farben oder nimmst ein leichteres Design.