Pizarra de hoy · Agotado
Se nos ha acabado esta página.
Hemos molido el servidor entero y no sale ni una gota. ¿Te ponemos otra cosa mientras?
Volver a la barraHTML + CSS404
404 Cafetería
El cero es una taza de café vista desde arriba, con un corazón de latte art que gira muy despacio.
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-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">Pizarra de hoy · Agotado</span>
<h1 class="n4-title">Se nos ha acabado esta página.</h1>
<p class="n4-sub">Hemos molido el servidor entero y no sale ni una gota. ¿Te ponemos otra cosa mientras?</p>
<a class="n4-cta" href="/">Volver a la barra</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
A la web de una cafetería se entra casi siempre desde el móvil, en la acera, para ver el horario o si hay leche de avena. Si ese enlace está roto, la gente se va al bar de al lado. Una página 404 para cafetería así de cálida mantiene el ambiente y se lee bien en pantalla pequeña.
Deja el mensaje corto, que nadie lee párrafos camino de un café con leche. Si tienes una página con horario y dirección, haz que el botón lleve ahí. Los tonos crema y marrón le van igual de bien a una panadería o a un pequeño tostador.