Pizarra de hoy · Agotado
Diese Seite ist leider aus.
Wir haben den ganzen Server gemahlen und es kommt kein Tropfen raus. Darf es in der Zwischenzeit etwas anderes sein?
Zurück zur ThekeHTML + CSS404
Café-404
Die Null ist eine Kaffeetasse von oben, mit Untertasse und einem Latte-Art-Herz, das sich ganz langsam dreht.
Einstellungen
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 · Seite nicht gefunden</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">Heute auf der Tafel · Ausverkauft</span>
<h1 class="n4-title">Diese Seite ist leider aus.</h1>
<p class="n4-sub">Wir haben den ganzen Server gemahlen und es kommt kein Tropfen raus. Darf es in der Zwischenzeit etwas anderes sein?</p>
<a class="n4-cta" href="/">Zurück zur Theke</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Wofür du ihn nutzen kannst
Die Website eines Cafés wird fast immer am Handy aufgerufen, auf dem Gehweg, um kurz die Öffnungszeiten zu checken oder ob es Hafermilch gibt. Ist der Link kaputt, geht man eben ins Café nebenan. Eine so warme 404-Seite fürs Café hält die Stimmung, und die große 404 ist auch auf kleinen Bildschirmen gut lesbar.
Halte die Nachricht kurz, auf dem Weg zum Flat White liest niemand Absätze. Hast du eine Seite mit Öffnungszeiten und Adresse, lass den Button dorthin führen. Die Creme- und Brauntöne passen genauso gut zu einer Bäckerei oder einer kleinen Rösterei.