Planta 4 · Habitación 404
La habitación 404 no existe.
Tenemos la llave, pero la puerta no aparece en ningún pasillo. En recepción te indicamos el camino.
Volver a recepciónHTML + CSS404
404 Hotel
La llave de latón de la habitación 404 cuelga de su gancho y se balancea despacio mientras un brillo recorre el llavero.
Ajustes
1x
Código
<!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 · Página no encontrada</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">Planta 4 · Habitación 404</span>
<h1 class="n4-title">La habitación 404 no existe.</h1>
<p class="n4-sub">Tenemos la llave, pero la puerta no aparece en ningún pasillo. En recepción te indicamos el camino.</p>
<a class="n4-cta" href="/">Volver a recepción</a>
</div>
</main>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Dónde usarlo
Quien reserva hotel suele tener cinco pestañas abiertas comparando precios. Si una oferta antigua o la ficha de una habitación en un portal de reservas acaba en un enlace roto, esa es la primera pestaña que se cierra. Una página 404 de hotel que sigue pareciendo tu recepción te da una segunda oportunidad antes de que reserve en otro sitio.
Lleva el botón a tu motor de reservas en vez de al inicio, que es lo que el huésped estaba buscando. El granate y el latón piden un hotel clásico o boutique. Para un albergue de surf, cambia los colores o elige un diseño más ligero.