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
Ver todos: 404Dó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.