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
404 Librairie
Une étagère en bois aux dos colorés avec un trou vide, où le livre 404 s'est penché et se balance doucement.
Réglages
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 introuvable</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>Notes</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">Rayon 404, étagère vide</span>
<h1 class="n4-title">Ce livre n'est pas sur l'étagère.</h1>
<p class="n4-sub">Quelqu'un l'a peut-être emprunté, ou il n'a pas encore été écrit. Jette un œil aux nouveautés.</p>
<a class="n4-cta" href="/">Voir les nouveautés</a>
</div>
</main>
</body>
</html>
Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans 404
Voir tout : 404Où l’utiliser
Librairies, éditeurs et bibliothèques retirent sans cesse des titres et des éditions, les liens cassés font donc partie du quotidien. Ici, une étagère en bois porte une rangée de dos reliés en toile avec des filets dorés et, en plein milieu, un trou. Le livre qui devrait le combler est penché, marqué 404, et se balance légèrement comme si on venait d'emprunter son voisin.
Les dos se soulèvent un peu au survol, et la typo à empattements avec le mur vert bouteille donnent un air calme de salle de lecture. Remplace les titres par ton catalogue et envoie le bouton vers les nouveautés ou la recherche.