Planta 4 · Habitación 404
Room 404 doesn’t exist.
We have the key, but the door isn’t on any corridor. Reception will point you the right way.
Back to receptionHTML + CSS404
Hotel 404
The brass key of room 404 hangs from its hook, swaying gently while a glint runs across the fob.
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-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">Floor 4 · Room 404</span>
<h1 class="n4-title">Room 404 doesn’t exist.</h1>
<p class="n4-sub">We have the key, but the door isn’t on any corridor. Reception will point you the right way.</p>
<a class="n4-cta" href="/">Back to reception</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
Where to use it
People booking a hotel usually have five tabs open and compare prices between them. If an old offer or a room page from a booking platform leads to a broken link, that tab gets closed first. A hotel 404 page that still looks like your lobby buys you a second chance before they book elsewhere.
Send the button to your booking engine rather than the home page, since that is what the guest was looking for. The burgundy and brass feel like a classic or boutique hotel. For a surf hostel, change the colours or pick a lighter design.