Recibo 404
Operación no encontrada.
Tranquilidad: tu dinero sigue en su sitio. Es solo esta página la que no aparece en el extracto.
Volver al inicioHTML + CSS404
404 Banco
Un cajero imprime un recibo línea a línea: operación 404, importe cero y una página que falta en el extracto.
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-bank {
--accent: #34d399;
--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-bank *,.n4-bank *::before,.n4-bank *::after {
box-sizing: border-box;
}
.n4-bank .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-bank .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-bank .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-bank .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-bank .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-bank .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-bank .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-bank .n4-stars,.n4-bank .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-bank .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-bank-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-bank .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-bank-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-bank [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-bank-tw {
from {
opacity: .3;
}
}
@keyframes n4-bank-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-bank-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-bank *,.n4-bank *::before,.n4-bank *::after {
animation: none!important;
transition: none!important;
}
}
.n4-bank {
background: radial-gradient(80% 70% at 50% 15%,#0f3d36,#04140f 75%);
color: #ecfdf5;
}
.n4-bank .n4-atm {
position: relative;
width: min(46cqmin,300px);
margin-bottom: 2cqmin;
}
.n4-bank .n4-slot {
display: block;
height: min(3cqmin,20px);
border-radius: 1em;
background: linear-gradient(#020807,#1a2b27);
box-shadow: inset 0 2px 4px #000,0 0 0 min(1.2cqmin,8px) #22332f,0 0 0 calc(min(1.2cqmin,8px) + 1px) rgba(255,255,255,.08);
}
.n4-bank .n4-roll {
width: 84%;
margin: -.6cqmin auto 0;
overflow: hidden;
}
.n4-bank .n4-paper {
padding: 2.4cqmin 2.4cqmin 4cqmin;
color: #1f2937;
background: #fbfbf7;
font: 500 clamp(8px,1.9cqmin,13px)/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
text-align: left;
-webkit-mask: conic-gradient(from -45deg at 50% calc(100% - 1.2cqmin),#000 90deg,transparent 0) 0 0/2.4cqmin 100%,linear-gradient(#000,#000) top/100% calc(100% - 1.2cqmin) no-repeat;
mask: conic-gradient(from -45deg at 50% calc(100% - 1.2cqmin),#000 90deg,transparent 0) 0 0/2.4cqmin 100%,linear-gradient(#000,#000) top/100% calc(100% - 1.2cqmin) no-repeat;
animation: n4-bank-print calc(2.4s / var(--k)) steps(14) .3s both;
box-shadow: 0 2cqmin 3cqmin -1cqmin rgba(0,0,0,.5);
}
.n4-bank .n4-paper p {
display: flex;
align-items: baseline;
gap: .4em;
margin: 0;
}
.n4-bank .n4-paper p i {
flex: 1;
border-bottom: 1px dotted #9ca3af;
}
.n4-bank .n4-paper .n4-c {
justify-content: center;
}
.n4-bank .n4-paper .n4-sm {
font-size: .85em;
color: #6b7280;
}
.n4-bank .n4-paper hr {
border: 0;
border-top: 1px dashed #9ca3af;
margin: .6em 0;
}
.n4-bank .n4-code {
height: min(5cqmin,32px);
margin-top: .8em;
background: repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px);
}
.n4-bank .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.025em;
}
.n4-bank .n4-sub {
color: #a7c4bb;
}
.n4-bank .n4-cta {
background: var(--accent);
color: #04140f;
}
@keyframes n4-bank-print {
from {
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<main class="n4-bank">
<div class="n4-copy">
<div class="n4-atm" aria-hidden="true">
<i class="n4-slot"></i>
<div class="n4-roll"><div class="n4-paper">
<p class="n4-c"><b>Cajero</b> 0404</p>
<p class="n4-c n4-sm">21/10/2026 10:04</p>
<hr>
<p><span>Operación</span><i></i><b>404</b></p>
<p><span>Concepto</span><i></i><b>Página</b></p>
<p><span>Estado</span><i></i><b>No encontrada</b></p>
<p><span>Importe</span><i></i><b>0,00 €</b></p>
<hr>
<p class="n4-c n4-sm">Gracias por su visita</p>
<div class="n4-code"></div>
</div></div>
</div>
<span class="n4-tag">Recibo 404</span>
<h1 class="n4-title">Operación no encontrada.</h1>
<p class="n4-sub">Tranquilidad: tu dinero sigue en su sitio. Es solo esta página la que no aparece en el extracto.</p>
<a class="n4-cta" href="/">Volver al inicio</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 la web de un banco una página que falta puede poner nervioso a cualquiera, por eso esta responde primero a la preocupación real. Un recibo sale de la ranura de un cajero a tirones cortos, como una impresora térmica, con la operación 404, la página como concepto, el estado no encontrada y un importe de cero, rematado con un código de barras y un borde rasgado.
Las filas del recibo son texto real que se traduce, con puntos guía entre etiqueta y valor. El mensaje tranquiliza sobre el dinero antes de mandar a la portada. El verde menta y el fondo verde profundo se pueden cambiar por los colores de tu marca.