Plato del día · nº 404
Ce plat n’est pas à la carte.
Le chef l’a cherché en cuisine, dans le garde-manger et jusque dans les desserts. Puis-je vous conseiller la spécialité de la maison ?
Voir la carteHTML + CSS404
404 Restaurant
Une assiette en porcelaine avec 404 écrit à la sauce et un petit pois solitaire qui roule lentement sur le bord.
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-restaurant {
--accent: #d4ae62;
--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-restaurant *,.n4-restaurant *::before,.n4-restaurant *::after {
box-sizing: border-box;
}
.n4-restaurant .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-restaurant .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-restaurant .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-restaurant .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-restaurant .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-restaurant .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-restaurant .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-restaurant .n4-stars,.n4-restaurant .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-restaurant .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-restaurant-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-restaurant .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-restaurant-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-restaurant [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-restaurant-tw {
from {
opacity: .3;
}
}
@keyframes n4-restaurant-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-restaurant-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-restaurant *,.n4-restaurant *::before,.n4-restaurant *::after {
animation: none!important;
transition: none!important;
}
}
.n4-restaurant {
background: repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px),radial-gradient(90% 70% at 50% 30%,#21402f,#0c1a14 72%);
color: #f4ead6;
font-family: "Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
}
.n4-restaurant .n4-dish {
width: min(80cqmin,500px);
height: auto;
margin-bottom: .4cqmin;
overflow: visible;
filter: drop-shadow(0 1.4cqmin 1.8cqmin rgba(0,0,0,.55));
animation: n4-restaurant-serve calc(1.1s / var(--k)) cubic-bezier(.2,.8,.2,1) both;
}
.n4-restaurant .n4-rim {
fill: none;
stroke: var(--accent);
stroke-width: 1.2;
opacity: .85;
}
.n4-restaurant .n4-sauce {
fill: none;
stroke: #5a2213;
stroke-width: 6;
stroke-linecap: round;
animation: n4-restaurant-draw calc(1.1s / var(--k)) calc(.7s / var(--k)) cubic-bezier(.6,0,.2,1) both;
}
.n4-restaurant .n4-drops {
animation: n4-restaurant-in calc(.5s / var(--k)) calc(1.6s / var(--k)) both;
}
.n4-restaurant .n4-num {
font-family: "Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
font-style: italic;
font-weight: 700;
font-size: 46px;
letter-spacing: -1px;
fill: #4a1c10;
animation: n4-restaurant-in calc(1s / var(--k)) calc(1.1s / var(--k)) both;
}
.n4-restaurant .n4-pea {
transform-box: view-box;
transform-origin: 160px 100px;
animation: n4-restaurant-roll calc(11s / var(--k)) cubic-bezier(.45,0,.55,1) calc(1.4s / var(--k)) infinite;
}
.n4-restaurant .n4-tag {
font-family: inherit;
font-style: italic;
font-weight: 400;
font-size: clamp(12px,2.2cqmin,16px);
letter-spacing: .14em;
text-transform: none;
color: var(--accent);
}
.n4-restaurant .n4-title {
font-style: italic;
font-weight: 500;
font-size: clamp(22px,5.6cqmin,48px);
letter-spacing: -.01em;
}
.n4-restaurant .n4-orn {
display: flex;
align-items: center;
gap: 1.4cqmin;
font-size: clamp(9px,1.6cqmin,13px);
color: var(--accent);
}
.n4-restaurant .n4-orn::before,.n4-restaurant .n4-orn::after {
content: "";
width: 9cqmin;
height: 1px;
background: linear-gradient(90deg,transparent,var(--accent));
}
.n4-restaurant .n4-orn::after {
background: linear-gradient(90deg,var(--accent),transparent);
}
.n4-restaurant .n4-sub {
color: #b9b09b;
font-size: clamp(14px,2.5cqmin,19px);
}
.n4-restaurant .n4-cta {
padding: 1em 2.2em;
border-radius: 0;
background: transparent;
color: var(--accent);
border: 1px solid color-mix(in srgb,var(--accent) 70%,transparent);
font-family: inherit;
font-size: clamp(11px,1.9cqmin,14px);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1),background .3s,color .3s;
}
.n4-restaurant .n4-cta:hover {
background: var(--accent);
color: #0c1a14;
}
.n4-restaurant .n4-copy>:not(.n4-dish) {
animation: n4-restaurant-fade calc(1s / var(--k)) calc(.5s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-restaurant-serve {
from {
opacity: 0;
transform: translateY(-3cqmin) scale(1.04);
}
}
@keyframes n4-restaurant-draw {
from {
stroke-dasharray: 0 100;
}
to {
stroke-dasharray: 100 100;
}
}
@keyframes n4-restaurant-in {
from {
opacity: 0;
}
}
@keyframes n4-restaurant-roll {
45% {
transform: rotate(235deg);
}
55% {
transform: rotate(222deg);
}
to {
transform: rotate(1turn);
}
}
</style>
</head>
<body>
<main class="n4-restaurant">
<div class="n4-copy">
<svg class="n4-dish" viewBox="0 0 320 200" aria-hidden="true">
<defs>
<radialGradient id="n4rs-plate" cx=".42" cy=".36" r=".75"><stop offset="0" stop-color="#ffffff"/><stop offset=".7" stop-color="#f3efe6"/><stop offset="1" stop-color="#d6cfc1"/></radialGradient>
<radialGradient id="n4rs-well" cx=".45" cy=".4" r=".7"><stop offset="0" stop-color="#fdfcf8"/><stop offset="1" stop-color="#ebe5d8"/></radialGradient>
<linearGradient id="n4rs-steel" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#8a8c90"/><stop offset=".35" stop-color="#f4f4f6"/><stop offset=".6" stop-color="#b9bbbf"/><stop offset="1" stop-color="#6f7175"/></linearGradient>
<radialGradient id="n4rs-pea" cx=".35" cy=".3" r=".8"><stop offset="0" stop-color="#c8f08f"/><stop offset=".6" stop-color="#6aa42c"/><stop offset="1" stop-color="#3f6d15"/></radialGradient>
</defs>
<g fill="url(#n4rs-steel)">
<rect x="36" y="22" width="2.6" height="30" rx="1.3"/><rect x="40.6" y="22" width="2.6" height="30" rx="1.3"/><rect x="45.2" y="22" width="2.6" height="30" rx="1.3"/><rect x="49.8" y="22" width="2.6" height="30" rx="1.3"/>
<path d="M35.5 48 H53 V54 Q53 64 47 68 H41 Q35.5 64 35.5 54 Z"/>
<rect x="40.5" y="66" width="7.4" height="110" rx="3.7"/>
<path d="M278 20 Q292 34 292 70 V84 H279 Z"/>
<rect x="278.6" y="82" width="8" height="96" rx="4"/>
</g>
<circle cx="160" cy="100" r="86" fill="url(#n4rs-plate)"/>
<circle class="n4-rim" cx="160" cy="100" r="80"/>
<circle cx="160" cy="100" r="58" fill="url(#n4rs-well)" stroke="rgba(0,0,0,.06)" stroke-width="3"/>
<path class="n4-sauce" pathLength="100" d="M116 130 C136 116 176 142 206 120"/>
<g class="n4-drops" fill="#5a2213"><circle cx="213" cy="115" r="3"/><circle cx="220" cy="110" r="2"/><circle cx="225" cy="106.5" r="1.3"/></g>
<text class="n4-num" x="160" y="114" text-anchor="middle">404</text>
<g class="n4-pea"><circle cx="160" cy="28" r="5.5" fill="url(#n4rs-pea)"/><circle cx="158.3" cy="26.2" r="1.4" fill="#fff" opacity=".7"/></g>
</svg>
<span class="n4-tag">Plat du jour · n° 404</span>
<h1 class="n4-title">Ce plat n’est pas à la carte.</h1>
<span class="n4-orn" aria-hidden="true">✦</span>
<p class="n4-sub">Le chef l’a cherché en cuisine, dans le garde-manger et jusque dans les desserts. Puis-je vous conseiller la spécialité de la maison ?</p>
<a class="n4-cta" href="/">Voir la carte</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
Un restaurant change de carte à chaque saison, et les anciens liens continuent de circuler : le menu dégustation du printemps dernier, le PDF de Noël, un plat vu sur Instagram. Celui qui clique a faim et s’apprête à réserver. Une page 404 de restaurant avec de l’humour le garde à table au lieu de le renvoyer vers Google Maps.
Faites pointer le bouton vers la carte ou directement vers la réservation, pas seulement vers l’accueil. L’italique à empattements et le liseré doré vont bien à un bistrot ou à une table gastronomique. Pour un burger ou un food truck, un modèle plus vif vous ressemblera davantage.