Pizarra de hoy · Agotado
Nous n’avons plus cette page.
Nous avons moulu tout le serveur et il n’en sort pas une goutte. On vous sert autre chose en attendant ?
Retour au comptoirHTML + CSS404
404 Café
Le zéro est une tasse de café vue d’en haut, avec un cœur en latte art qui tourne très lentement.
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-cafe {
--accent: #b8703a;
--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-cafe *,.n4-cafe *::before,.n4-cafe *::after {
box-sizing: border-box;
}
.n4-cafe .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-cafe .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-cafe .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-cafe .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-cafe .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-cafe .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-cafe .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-cafe .n4-stars,.n4-cafe .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-cafe .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-cafe-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-cafe .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-cafe-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-cafe [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-cafe-tw {
from {
opacity: .3;
}
}
@keyframes n4-cafe-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-cafe-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-cafe *,.n4-cafe *::before,.n4-cafe *::after {
animation: none!important;
transition: none!important;
}
}
.n4-cafe {
background: radial-gradient(80% 60% at 50% 36%,#fbf6ef,#f0e5d6 62%,#e6d5bf);
color: #2b1a10;
}
.n4-cafe .n4-num {
margin: 0 0 1.4cqmin;
display: flex;
align-items: center;
font-size: clamp(84px,30cqmin,300px);
font-weight: 800;
letter-spacing: -.05em;
line-height: .9;
}
.n4-cafe .n4-num b {
background: linear-gradient(180deg,#4a2c1a 10%,#2b1a10 90%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: n4-cafe-rise calc(1.2s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
.n4-cafe .n4-num b:last-child {
animation-delay: calc(.15s / var(--k));
}
.n4-cafe .n4-cup {
display: block;
width: .86em;
height: .86em;
margin: 0 .04em 0 .02em;
filter: drop-shadow(0 .03em .05em rgba(59,36,22,.18)) drop-shadow(0 .08em .14em rgba(59,36,22,.16));
animation: n4-cafe-serve calc(1.2s / var(--k)) calc(.1s / var(--k)) cubic-bezier(.2,.8,.2,1) both;
}
.n4-cafe .n4-cup svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.n4-cafe .n4-art {
transform-box: view-box;
transform-origin: 100px 100px;
animation: n4-cafe-spin calc(40s / var(--k)) linear infinite;
}
.n4-cafe .n4-tag {
color: var(--accent);
}
.n4-cafe .n4-title {
font-size: clamp(22px,5.6cqmin,48px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-cafe .n4-sub {
color: #7a5a44;
}
.n4-cafe .n4-cta {
background: #2b1a10;
color: #fbf6ef;
box-shadow: 0 .8cqmin 2cqmin -.8cqmin rgba(43,26,16,.6);
}
.n4-cafe .n4-copy>:not(.n4-num) {
animation: n4-cafe-fade calc(1s / var(--k)) calc(.5s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-cafe-rise {
from {
opacity: 0;
transform: translateY(.12em);
filter: blur(.04em);
}
}
@keyframes n4-cafe-serve {
from {
opacity: 0;
transform: translateY(-.1em) rotate(-60deg) scale(.9);
}
}
</style>
</head>
<body>
<main class="n4-cafe">
<div class="n4-copy">
<p class="n4-num" aria-hidden="true"><b>4</b><span class="n4-cup"><svg viewBox="0 0 200 200">
<defs>
<radialGradient id="n4cf-plate" cx=".42" cy=".38" r=".7"><stop offset="0" stop-color="#ffffff"/><stop offset=".75" stop-color="#f6f0e8"/><stop offset="1" stop-color="#e2d6c6"/></radialGradient>
<radialGradient id="n4cf-rim" cx=".4" cy=".35" r=".75"><stop offset="0" stop-color="#ffffff"/><stop offset=".8" stop-color="#f7f1e9"/><stop offset="1" stop-color="#dccdb9"/></radialGradient>
<radialGradient id="n4cf-coffee" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#c98a4e"/><stop offset=".55" stop-color="#8a4a22"/><stop offset=".9" stop-color="#4f2810"/><stop offset="1" stop-color="#3a1c0a"/></radialGradient>
</defs>
<circle cx="100" cy="100" r="98" fill="url(#n4cf-plate)"/>
<circle cx="100" cy="100" r="74" fill="none" stroke="#e6dccd" stroke-width="1.5"/>
<g transform="rotate(38 100 100)"><rect x="150" y="89" width="42" height="22" rx="11" fill="url(#n4cf-rim)" stroke="#e2d6c6"/></g>
<g transform="rotate(-128 100 100)"><rect x="164" y="96" width="30" height="8" rx="4" fill="#c9c9ce"/><ellipse cx="160" cy="100" rx="11" ry="7.5" fill="#dcdce0"/></g>
<circle cx="104" cy="106" r="66" fill="#3b2416" opacity=".1"/>
<circle cx="100" cy="100" r="66" fill="url(#n4cf-rim)" stroke="#e2d6c6"/>
<circle cx="100" cy="100" r="55" fill="url(#n4cf-coffee)"/>
<circle cx="100" cy="100" r="52" fill="none" stroke="#e9c79c" stroke-opacity=".35" stroke-width="3"/>
<g class="n4-art"><path d="M100 136 C70 116 64 96 72 84 C80 72 94 74 100 88 C106 74 120 72 128 84 C136 96 130 116 100 136 Z" fill="#f7e6cd"/><path d="M100 128 C84 114 80 100 86 92 C91 86 97 88 100 96 C103 88 109 86 114 92 C120 100 116 114 100 128 Z" fill="#d9ab78" opacity=".55"/></g>
<path d="M62 78 A44 44 0 0 1 90 54" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="3" stroke-linecap="round"/>
</svg></span><b>4</b></p>
<span class="n4-tag">Ardoise du jour · Épuisé</span>
<h1 class="n4-title">Nous n’avons plus cette page.</h1>
<p class="n4-sub">Nous avons moulu tout le serveur et il n’en sort pas une goutte. On vous sert autre chose en attendant ?</p>
<a class="n4-cta" href="/">Retour au comptoir</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
On consulte le site d’un café presque toujours sur son téléphone, sur le trottoir, pour vérifier les horaires ou s’il y a du lait d’avoine. Si le lien est cassé, on entre chez le voisin. Une page 404 de café aussi chaleureuse garde l’ambiance, et le grand 404 reste lisible sur un petit écran.
Gardez un message court : personne ne lit de paragraphes en allant chercher son flat white. Si vous avez une page avec les horaires et l’adresse, faites pointer le bouton vers elle. Les tons crème et brun conviennent aussi bien à une boulangerie ou à un petit torréfacteur.