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
Bookstore 404
A wooden shelf of colorful spines with one empty gap, where the 404 book has tipped over and gently sways.
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-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">Section 404, empty shelf</span>
<h1 class="n4-title">This book isn't on the shelf.</h1>
<p class="n4-sub">Someone may have borrowed it, or it hasn't been written yet. Take a look at the new arrivals.</p>
<a class="n4-cta" href="/">See what’s new</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
Bookshops, publishers and libraries retire titles and editions all the time, so broken links are part of daily life. Here a wooden shelf holds a row of cloth bound spines with gilt bands, and right in the middle there is a gap. The book that should fill it leans at an angle, marked 404, swaying slightly as if someone had just pulled its neighbour out.
Spines lift a little on hover, and the serif type and bottle green wall give it a calm reading room feel. Swap the titles on the spines for your own catalogue and send the button to new arrivals or the search page.