Planta 4 · Habitación 404
La chambre 404 n’existe pas.
Nous avons la clé, mais la porte n’est dans aucun couloir. La réception vous indiquera le chemin.
Retour à la réceptionHTML + CSS404
404 Hôtel
La clé en laiton de la chambre 404 pend à son crochet et se balance doucement, un reflet glissant sur le porte-clés.
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-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">4e étage · Chambre 404</span>
<h1 class="n4-title">La chambre 404 n’existe pas.</h1>
<p class="n4-sub">Nous avons la clé, mais la porte n’est dans aucun couloir. La réception vous indiquera le chemin.</p>
<a class="n4-cta" href="/">Retour à la réception</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
Où l’utiliser
Quand on réserve un hôtel, on a souvent cinq onglets ouverts pour comparer les prix. Si une ancienne offre ou la fiche d’une chambre sur une plateforme de réservation mène à un lien cassé, c’est cet onglet qu’on ferme en premier. Une page 404 d’hôtel qui ressemble encore à votre hall vous laisse une seconde chance.
Faites pointer le bouton vers votre moteur de réservation plutôt que vers l’accueil : c’est ce que le client cherchait. Le bordeaux et le laiton évoquent un hôtel classique ou de charme. Pour une auberge de surf, changez les couleurs ou choisissez un modèle plus léger.