Sección 404, estante vacío
Este libro no está en la estantería.
Puede que alguien se lo haya llevado prestado o que todavía no se haya escrito. Echa un vistazo a las novedades.
Ver novedadesHTML + CSS404
Buchhandlungs-404
Ein Holzregal mit bunten Buchrücken und einer Lücke, in der das Buch 404 schräg lehnt und leicht schaukelt.
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-bookstore {
--accent: #e0b45c;
--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-bookstore *,.n4-bookstore *::before,.n4-bookstore *::after {
box-sizing: border-box;
}
.n4-bookstore .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-bookstore .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-bookstore .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-bookstore .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-bookstore .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-bookstore .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-bookstore .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-bookstore .n4-stars,.n4-bookstore .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-bookstore .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-bookstore-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-bookstore .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-bookstore-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-bookstore [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-bookstore-tw {
from {
opacity: .3;
}
}
@keyframes n4-bookstore-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-bookstore-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-bookstore *,.n4-bookstore *::before,.n4-bookstore *::after {
animation: none!important;
transition: none!important;
}
}
.n4-bookstore {
background: radial-gradient(70% 60% at 50% 30%,#1d3b31,#0b1a15 75%);
color: #f4efe4;
font-family: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
.n4-bookstore::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7cqmin);
}
.n4-bookstore .n4-shelf {
display: flex;
align-items: flex-end;
gap: .25cqmin;
height: min(26cqmin,190px);
padding: 0 4cqmin;
margin-bottom: 2cqmin;
border-bottom: min(2.4cqmin,16px) solid #6b4423;
box-shadow: 0 min(2.4cqmin,16px) 0 #3b2412,0 4cqmin 4cqmin -2cqmin #000;
animation: n4-bookstore-fade calc(.8s / var(--k)) both;
}
.n4-bookstore .n4-book {
position: relative;
display: grid;
place-items: center;
width: calc(var(--w) * .5cqmin + 1.4cqmin);
height: calc(var(--h) * 1%);
border-radius: .4cqmin .4cqmin .15cqmin .15cqmin;
background: linear-gradient(90deg,rgba(0,0,0,.35),transparent 18%,rgba(255,255,255,.14) 30%,transparent 45%,rgba(0,0,0,.3)),var(--c);
box-shadow: inset 0 2cqmin 0 -1.6cqmin rgba(255,215,140,.35),inset 0 -2cqmin 0 -1.6cqmin rgba(255,215,140,.35);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.n4-bookstore .n4-book span {
writing-mode: vertical-rl;
rotate: 180deg;
font-size: clamp(7px,1.7cqmin,12px);
letter-spacing: .08em;
color: rgba(255,236,200,.85);
white-space: nowrap;
}
.n4-bookstore .n4-book:hover {
transform: translateY(-6%);
}
.n4-bookstore .n4-gap {
width: 5cqmin;
height: 70%;
background: radial-gradient(60% 40% at 50% 100%,rgba(0,0,0,.45),transparent);
}
.n4-bookstore .n4-lean {
transform-origin: 0 100%;
rotate: -16deg;
margin-left: -4.6cqmin;
animation: n4-bookstore-lean calc(4s / var(--k)) ease-in-out infinite alternate;
}
.n4-bookstore .n4-lean span {
color: var(--accent);
font-weight: 700;
}
.n4-bookstore .n4-title {
font-size: clamp(22px,5.4cqmin,46px);
font-weight: 500;
letter-spacing: -.01em;
font-style: italic;
}
.n4-bookstore .n4-sub {
color: #b9c2b8;
font-size: clamp(13px,2.5cqmin,19px);
}
.n4-bookstore .n4-tag {
font-family: inherit;
text-transform: none;
letter-spacing: .06em;
font-style: italic;
}
.n4-bookstore .n4-cta {
background: var(--accent);
color: #1b1408;
}
@keyframes n4-bookstore-lean {
from {
rotate: -14deg;
}
to {
rotate: -18deg;
}
}
</style>
</head>
<body>
<main class="n4-bookstore">
<div class="n4-copy">
<div class="n4-shelf" aria-hidden="true" translate="no">
<i class="n4-book" style="--w:7;--h:78;--c:#7c2d12"><span>Rayuela</span></i><i class="n4-book" style="--w:5;--h:70;--c:#1e3a8a"><span>Niebla</span></i><i class="n4-book" style="--w:9;--h:86;--c:#a16207"><span>Ficciones</span></i><i class="n4-book" style="--w:6;--h:74;--c:#14532d"><span>Atlas</span></i><i class="n4-book" style="--w:8;--h:82;--c:#581c87"><span>Poemas</span></i><i class="n4-book" style="--w:5;--h:66;--c:#9f1239"><span>Cartas</span></i><i class="n4-book" style="--w:7;--h:90;--c:#334155"><span>Mapas</span></i><i class="n4-gap"></i><i class="n4-book n4-lean" style="--w:8;--h:80;--c:#b91c1c"><span>404</span></i><i class="n4-book" style="--w:6;--h:80;--c:#0f766e"><span>Notizen</span></i><i class="n4-book" style="--w:8;--h:72;--c:#92400e"><span>Viajes</span></i><i class="n4-book" style="--w:5;--h:84;--c:#3f3f46"><span>Ensayos</span></i>
</div>
<span class="n4-tag">Abteilung 404, leeres Regal</span>
<h1 class="n4-title">Dieses Buch steht nicht im Regal.</h1>
<p class="n4-sub">Vielleicht hat es jemand ausgeliehen, oder es ist noch nicht geschrieben. Schau dir die Neuheiten an.</p>
<a class="n4-cta" href="/">Neuigkeiten ansehen</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
Buchhandlungen, Verlage und Bibliotheken nehmen ständig Titel und Ausgaben aus dem Programm, kaputte Links gehören also zum Alltag. Hier steht ein Holzregal mit einer Reihe leinengebundener Buchrücken mit Goldbändern, und genau in der Mitte klafft eine Lücke. Das Buch, das sie füllen sollte, lehnt schräg, trägt die 404 und schaukelt leicht.
Beim Überfahren heben sich die Buchrücken ein wenig, und Serifenschrift und flaschengrüne Wand schaffen die Ruhe eines Lesesaals. Tausch die Titel auf den Rücken gegen deinen Katalog und verlinke den Knopf mit den Neuheiten oder der Suche.