Última hora: esta página no existe.
Nuestra redacción la sigue buscando. Mientras tanto, en la portada tienes el resto de la actualidad.
Ir a la portadaHTML + CSS404
Zeitungs-404
Eine Titelseite wirbelt herein wie in alten Filmen und meldet in Schlagzeilen, dass eine Seite verschwunden ist.
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-newspaper {
--accent: #c8102e;
--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-newspaper *,.n4-newspaper *::before,.n4-newspaper *::after {
box-sizing: border-box;
}
.n4-newspaper .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-newspaper .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-newspaper .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-newspaper .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-newspaper .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-newspaper .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-newspaper .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-newspaper .n4-stars,.n4-newspaper .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-newspaper .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-newspaper-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-newspaper .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-newspaper-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-newspaper [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-newspaper-tw {
from {
opacity: .3;
}
}
@keyframes n4-newspaper-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-newspaper-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-newspaper *,.n4-newspaper *::before,.n4-newspaper *::after {
animation: none!important;
transition: none!important;
}
}
.n4-newspaper {
background: radial-gradient(60% 50% at 50% 32%,#3b3128,#120e0b 75%);
color: #f5ecd9;
font-family: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
.n4-newspaper .n4-paper {
width: min(72cqmin,500px);
font-size: min(1.85cqmin,13px);
margin-bottom: 2cqmin;
padding: 1.4em 1.6em 1.6em;
text-align: left;
color: #1d1a16;
background: radial-gradient(circle at 20% 30%,rgba(120,90,40,.08),transparent 40%),radial-gradient(circle at 80% 70%,rgba(120,90,40,.07),transparent 45%),#f2ead6;
box-shadow: 0 2em 3em -1.4em #000,inset 0 0 3em rgba(120,90,40,.18);
rotate: -2deg;
animation: n4-newspaper-spinin calc(1.5s / var(--k)) cubic-bezier(.2,.75,.25,1) both;
transition: rotate .4s,translate .4s;
}
.n4-newspaper .n4-paper:hover {
rotate: 0deg;
translate: 0 -.3em;
}
.n4-newspaper .n4-mast {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: end;
gap: .8em;
padding-bottom: .4em;
border-bottom: .35em double #1d1a16;
font: 600 .78em/1.2 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
}
.n4-newspaper .n4-mast span:last-child {
text-align: right;
}
.n4-newspaper .n4-mast b {
font: 700 3.4em/.95 "Old English Text MT","Engravers Old English","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
letter-spacing: -.01em;
text-transform: none;
}
.n4-newspaper .n4-flash {
display: inline-block;
margin: .9em 0 .35em;
padding: .25em .6em;
background: var(--accent);
color: #fff;
font: 800 .82em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.n4-newspaper .n4-head {
margin: 0 0 .6em;
font: 700 2.75em/.98 "Didot","Bodoni 72","Times New Roman",Times,serif;
letter-spacing: -.025em;
text-wrap: balance;
}
.n4-newspaper .n4-cols {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: 1em;
}
.n4-newspaper .n4-pic {
display: grid;
gap: .3em;
}
.n4-newspaper .n4-pic b {
display: grid;
place-items: center;
aspect-ratio: 4/3;
font: 900 4.6em/1 "Times New Roman",Times,serif;
color: transparent;
background: radial-gradient(circle,#1d1a16 42%,transparent 48%) 0 0/.075em .075em,#cfc3a6;
-webkit-background-clip: text;
background-clip: text;
box-shadow: inset 0 0 0 999px rgba(29,26,22,.12);
}
.n4-newspaper .n4-pic small {
font: italic .82em/1.2 "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
color: #5b5245;
}
.n4-newspaper .n4-txt {
position: relative;
min-height: 9em;
}
.n4-newspaper .n4-txt i {
position: absolute;
inset: 0;
background: repeating-linear-gradient(#0000 0 .35em,rgba(29,26,22,.5) .35em .62em,#0000 .62em .95em);
}
.n4-newspaper .n4-drop {
position: relative;
z-index: 1;
float: left;
margin: -.06em .12em 0 0;
padding-right: .1em;
font: 700 3.4em/.9 "Times New Roman",Times,serif;
background: #f2ead6;
}
.n4-newspaper .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 600;
letter-spacing: -.015em;
}
.n4-newspaper .n4-sub {
color: #cbbfa9;
}
.n4-newspaper .n4-cta {
background: #f5ecd9;
color: #1d1a16;
}
@keyframes n4-newspaper-spinin {
from {
transform: rotate(-900deg) scale(.04);
opacity: 0;
}
30% {
opacity: 1;
}
}
</style>
</head>
<body>
<main class="n4-newspaper">
<div class="n4-copy">
<div class="n4-paper" aria-hidden="true">
<div class="n4-mast"><span>Dienstag, 4. April</span><b translate="no">El Extravío</b><span>Ausgabe 404</span></div>
<p class="n4-flash">Eilmeldung</p>
<p class="n4-head">Seite spurlos verschwunden</p>
<div class="n4-cols">
<div class="n4-pic"><b translate="no">404</b><small>Letztes bekanntes Bild der Seite</small></div>
<div class="n4-txt"><b class="n4-drop" translate="no">L</b><i></i></div>
<div class="n4-txt"><i></i></div>
</div>
</div>
<h1 class="n4-title">Eilmeldung: Diese Seite gibt es nicht.</h1>
<p class="n4-sub">Unsere Redaktion sucht noch nach ihr. Bis dahin findest du alle anderen Nachrichten auf der Titelseite.</p>
<a class="n4-cta" href="/">Zur Titelseite</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
Alte Filme haben große Neuigkeiten mit einer wirbelnden Zeitung verkündet, und diese Fehlerseite nutzt den Trick für eine 404. Eine cremefarbene Titelseite mit Zeitungskopf, roter Eilmeldung, kräftiger Serifenschlagzeile, einem Rasterfoto der Zahl und Textspalten dreht sich aus der Mitte herein und bleibt leicht schräg liegen.
Alles ist HTML und CSS mit Systemschriften und lässt sich sauber kopieren. Beim Überfahren richtet sich das Blatt gerade, bei reduzierter Bewegung liegt es sofort da. Passe das Rot an und verlinke den Button mit der Titelseite.