Referencia 404 · Sin existencias
Esta página está agotada.
La hemos buscado en el almacén, en la trastienda y debajo del mostrador. El resto de la tienda sigue abierta.
Seguir comprandoHTML + CSS404
404 Tienda online
Una etiqueta con código de barras que el láser rojo escanea una y otra vez hasta que cae el sello de «Agotado».
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-shop {
--accent: #ff3b30;
--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-shop *,.n4-shop *::before,.n4-shop *::after {
box-sizing: border-box;
}
.n4-shop .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-shop .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-shop .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-shop .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-shop .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-shop .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-shop .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-shop .n4-stars,.n4-shop .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-shop .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-shop-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-shop .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-shop-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-shop [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-shop-tw {
from {
opacity: .3;
}
}
@keyframes n4-shop-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-shop-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-shop *,.n4-shop *::before,.n4-shop *::after {
animation: none!important;
transition: none!important;
}
}
.n4-shop {
background: radial-gradient(80% 60% at 50% 34%,#ffffff,#f3f2ef 60%,#e9e7e2);
color: #1d1d1f;
}
.n4-shop .n4-label {
flex: none;
width: min(76cqmin,470px);
height: auto;
margin-bottom: 1.6cqmin;
overflow: visible;
filter: drop-shadow(0 .4cqmin .6cqmin rgba(0,0,0,.08)) drop-shadow(0 3cqmin 4cqmin rgba(0,0,0,.14));
animation: n4-shop-in calc(.9s / var(--k)) cubic-bezier(.2,.8,.2,1) both;
}
.n4-shop .n4-card {
fill: #fff;
}
.n4-shop .n4-bars {
fill: #1d1d1f;
}
.n4-shop .n4-code {
font: 700 30px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: 14px;
fill: #1d1d1f;
}
.n4-shop .n4-laser {
fill: var(--accent);
filter: drop-shadow(0 0 3px var(--accent));
animation: n4-shop-scan calc(1.6s / var(--k)) ease-in-out infinite alternate;
}
.n4-shop .n4-laser rect:first-child {
fill: url(#n4sh-glow);
}
.n4-shop .n4-stamp {
transform-box: fill-box;
transform-origin: center;
animation: n4-shop-stamp calc(.5s / var(--k)) calc(1.8s / var(--k)) cubic-bezier(.5,0,.7,1.4) both;
}
.n4-shop .n4-stamp rect {
fill: rgba(255,255,255,.88);
stroke: var(--accent);
stroke-width: 3.5;
}
.n4-shop .n4-stamp text {
font: 900 28px -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
letter-spacing: 4px;
fill: var(--accent);
}
.n4-shop .n4-tag {
color: color-mix(in srgb,var(--accent) 80%,#000);
}
.n4-shop .n4-title {
font-size: clamp(24px,6cqmin,52px);
font-weight: 800;
letter-spacing: -.035em;
}
.n4-shop .n4-sub {
color: #6e6e73;
}
.n4-shop .n4-cta {
background: #1d1d1f;
color: #fff;
}
.n4-shop .n4-cta::after {
content: "→";
transition: transform .3s cubic-bezier(.25,.1,.25,1);
}
.n4-shop .n4-cta:hover::after {
transform: translateX(3px);
}
.n4-shop .n4-copy>:not(.n4-label) {
animation: n4-shop-fade calc(1s / var(--k)) calc(.5s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-shop-in {
from {
opacity: 0;
transform: translateY(3cqmin) scale(.97);
}
}
@keyframes n4-shop-scan {
from {
transform: translateY(34px);
}
to {
transform: translateY(132px);
}
}
@keyframes n4-shop-stamp {
from {
opacity: 0;
transform: scale(1.8);
}
}
</style>
</head>
<body>
<main class="n4-shop">
<div class="n4-copy">
<svg class="n4-label" viewBox="0 0 320 200" aria-hidden="true">
<rect class="n4-card" x="10" y="8" width="300" height="184" rx="16"/>
<g class="n4-bars"><rect x="40.00" y="30" width="2.53" height="108" class="n4-guard"/><rect x="45.05" y="30" width="2.53" height="108" class="n4-guard"/><rect x="50.11" y="30" width="2.53" height="98"/><rect x="60.21" y="30" width="5.05" height="98"/><rect x="72.84" y="30" width="5.05" height="98"/><rect x="80.42" y="30" width="2.53" height="98"/><rect x="85.47" y="30" width="2.53" height="98"/><rect x="95.58" y="30" width="5.05" height="98"/><rect x="103.16" y="30" width="2.53" height="98"/><rect x="113.26" y="30" width="5.05" height="98"/><rect x="125.89" y="30" width="5.05" height="98"/><rect x="133.47" y="30" width="2.53" height="98"/><rect x="138.53" y="30" width="2.53" height="98"/><rect x="148.63" y="30" width="5.05" height="98"/><rect x="156.21" y="30" width="2.53" height="108" class="n4-guard"/><rect x="161.26" y="30" width="2.53" height="108" class="n4-guard"/><rect x="166.32" y="30" width="7.58" height="98"/><rect x="178.95" y="30" width="2.53" height="98"/><rect x="184.00" y="30" width="2.53" height="98"/><rect x="189.05" y="30" width="7.58" height="98"/><rect x="201.68" y="30" width="7.58" height="98"/><rect x="214.32" y="30" width="2.53" height="98"/><rect x="219.37" y="30" width="2.53" height="98"/><rect x="224.42" y="30" width="7.58" height="98"/><rect x="237.05" y="30" width="7.58" height="98"/><rect x="249.68" y="30" width="2.53" height="98"/><rect x="254.74" y="30" width="2.53" height="98"/><rect x="259.79" y="30" width="7.58" height="98"/><rect x="272.42" y="30" width="2.53" height="108" class="n4-guard"/><rect x="277.47" y="30" width="2.53" height="108" class="n4-guard"/></g>
<text class="n4-code" x="167" y="176" text-anchor="middle">404</text>
<g class="n4-stamp"><g transform="rotate(-10 160 84)"><rect x="76" y="58" width="168" height="52" rx="8"/><text x="160" y="95" text-anchor="middle">AGOTADO</text></g></g>
<g class="n4-laser"><rect x="-6" y="-9" width="332" height="18" fill="url(#n4sh-glow)"/><rect x="-6" y="-1" width="332" height="2" rx="1"/></g>
<defs><linearGradient id="n4sh-glow" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff3b30" stop-opacity="0"/><stop offset=".5" stop-color="#ff3b30" stop-opacity=".35"/><stop offset="1" stop-color="#ff3b30" stop-opacity="0"/></linearGradient></defs>
</svg>
<span class="n4-tag">Referencia 404 · Sin existencias</span>
<h1 class="n4-title">Esta página está agotada.</h1>
<p class="n4-sub">La hemos buscado en el almacén, en la trastienda y debajo del mostrador. El resto de la tienda sigue abierta.</p>
<a class="n4-cta" href="/">Seguir comprando</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
En una tienda online la mayoría de los 404 vienen de productos que ya no existen. Google conserva la URL, alguien llega desde una búsqueda y se encuentra con la nada. Una página 404 para ecommerce que dice «agotado» con buen humor explica lo que ha pasado, y el botón de «Seguir comprando» lo devuelve al catálogo al momento.
Si un producto tiene un sustituto claro, una redirección a él o a su categoría es mejor que cualquier 404. Esta página es para todo lo demás. La tarjeta blanca y el rojo encajan en casi cualquier tienda, y puedes cambiar título, mensaje y botón.