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
Bankbeleg-404
Ein Geldautomat druckt Zeile für Zeile einen Beleg: Vorgang 404, Betrag null und eine Seite, die im Auszug fehlt.
Einstellungen
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 · Seite nicht gefunden</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>Automat</b> 0404</p>
<p class="n4-c n4-sm">21/10/2026 10:04</p>
<hr>
<p><span>Vorgang</span><i></i><b>404</b></p>
<p><span>Verwendung</span><i></i><b>Seite</b></p>
<p><span>Status</span><i></i><b>Nicht gefunden</b></p>
<p><span>Betrag</span><i></i><b>0,00 €</b></p>
<hr>
<p class="n4-c n4-sm">Danke für Ihren Besuch</p>
<div class="n4-code"></div>
</div></div>
</div>
<span class="n4-tag">Beleg 404</span>
<h1 class="n4-title">Vorgang nicht gefunden.</h1>
<p class="n4-sub">Keine Sorge, dein Geld ist noch da. Nur diese Seite fehlt auf dem Kontoauszug.</p>
<a class="n4-cta" href="/">Zur Startseite</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Alle ansehen: 404Wofür du ihn nutzen kannst
Auf einer Bankseite macht eine fehlende Seite schnell nervös, deshalb beantwortet diese zuerst die eigentliche Sorge. Ein Beleg schiebt sich ruckweise wie aus einem Thermodrucker aus dem Schlitz eines Automaten und nennt Vorgang 404, die Seite als Verwendung, den Status nicht gefunden und einen Betrag von null, mit Strichcode und Abrisskante.
Die Belegzeilen sind echter, übersetzbarer Text mit gepunkteten Linien zwischen Bezeichnung und Wert. Der Text beruhigt, dass das Geld sicher ist, bevor er zur Startseite führt. Mintgrün und tiefgrüner Hintergrund lassen sich durch deine Markenfarben ersetzen.