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
Bank receipt 404
An ATM prints a receipt line by line: transaction 404, amount zero and a page missing from the statement.
Settings
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 · Page not found</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>ATM</b> 0404</p>
<p class="n4-c n4-sm">21/10/2026 10:04</p>
<hr>
<p><span>Transaction</span><i></i><b>404</b></p>
<p><span>Reference</span><i></i><b>Page</b></p>
<p><span>Status</span><i></i><b>Not found</b></p>
<p><span>Amount</span><i></i><b>0,00 €</b></p>
<hr>
<p class="n4-c n4-sm">Thank you for your visit</p>
<div class="n4-code"></div>
</div></div>
</div>
<span class="n4-tag">Receipt 404</span>
<h1 class="n4-title">Transaction not found.</h1>
<p class="n4-sub">Relax, your money is right where it was. It's only this page that's missing from the statement.</p>
<a class="n4-cta" href="/">Back to home</a>
</div>
</main>
</body>
</html>
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in 404
See all 404Where to use it
On a banking site a missing page can make people nervous, so this one answers the real worry first. A receipt slides out of an ATM slot in short jerky steps like a thermal printer, listing transaction 404, the page as reference, a not found status and an amount of zero, finished with a barcode and a torn edge.
The receipt rows are real text that translates, with dotted leaders between label and value. The message reassures users that their money is safe before sending them home. The mint accent and deep green background can be swapped for your brand colors.