Esta obra ya no está expuesta.
La pieza que buscas se ha retirado para restaurarla o está de préstamo en otro museo. Sigue la visita por las demás salas.
Seguir la visitaHTML + CSS404
404 Museo
Un foco ilumina un marco dorado vacío tras un cordón de terciopelo, y la cartela dice que la obra se ha retirado.
Ajustes
1x
Código
<!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 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-museum {
--accent: #d4a017;
--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-museum *,.n4-museum *::before,.n4-museum *::after {
box-sizing: border-box;
}
.n4-museum .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-museum .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-museum .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-museum .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-museum .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-museum .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-museum .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-museum .n4-stars,.n4-museum .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-museum .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-museum-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-museum .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-museum-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-museum [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-museum-tw {
from {
opacity: .3;
}
}
@keyframes n4-museum-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-museum-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-museum *,.n4-museum *::before,.n4-museum *::after {
animation: none!important;
transition: none!important;
}
}
.n4-museum {
background: linear-gradient(180deg,#2a2622 0 74%,#15120f 74%);
color: #f5efe6;
font-family: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
.n4-museum .n4-wall {
position: relative;
width: min(84cqmin,600px);
height: min(46cqmin,330px);
margin-bottom: 2cqmin;
}
.n4-museum .n4-spot {
position: absolute;
left: 50%;
top: -30%;
width: 70%;
height: 120%;
translate: -50% 0;
background: radial-gradient(50% 30% at 50% 78%,rgba(255,236,190,.28),transparent 70%),linear-gradient(rgba(255,240,200,.16),rgba(255,240,200,.04));
clip-path: polygon(44% 0,56% 0,100% 100%,0 100%);
animation: n4-museum-flick calc(6s / var(--k)) ease-in-out infinite;
}
.n4-museum .n4-motes i {
position: absolute;
left: var(--x);
top: var(--y);
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255,240,210,.7);
animation: n4-museum-mote calc(var(--d) / var(--k)) linear infinite;
animation-delay: var(--dl);
}
.n4-museum .n4-frame {
position: absolute;
left: 50%;
top: 10%;
width: 38%;
aspect-ratio: 4/5;
translate: -50% 0;
padding: min(2.6cqmin,18px);
background: linear-gradient(135deg,#f6d77a,#9a6b12 30%,#f3cf6a 50%,#7a520c 70%,#e9c45e);
box-shadow: 0 2cqmin 3cqmin -1cqmin rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.25);
}
.n4-museum .n4-frame::before {
content: "";
position: absolute;
inset: min(1.2cqmin,8px);
border: 2px solid rgba(80,50,6,.6);
}
.n4-museum .n4-ghost {
display: block;
width: 100%;
height: 100%;
background: #332e29;
box-shadow: inset 0 0 2cqmin rgba(0,0,0,.6),inset 0 0 0 1.4cqmin #2c2824;
}
.n4-museum .n4-label {
position: absolute;
left: 73%;
top: 52%;
display: grid;
gap: .2em;
padding: .8em 1em;
text-align: left;
font-size: clamp(7px,1.7cqmin,12px);
color: #2a2622;
background: #f5f1ea;
box-shadow: 0 .4em .8em rgba(0,0,0,.4);
}
.n4-museum .n4-label em {
color: #7c6f63;
}
.n4-museum .n4-rope {
position: absolute;
left: 6%;
right: 6%;
bottom: 6%;
width: 88%;
height: 18%;
overflow: visible;
}
.n4-museum .n4-rope path {
fill: none;
stroke: #9f1239;
stroke-width: 6;
stroke-linecap: round;
filter: drop-shadow(0 3px 2px rgba(0,0,0,.5));
}
.n4-museum .n4-post {
position: absolute;
bottom: 0;
width: 1.6cqmin;
height: 22%;
border-radius: 1cqmin 1cqmin 0 0;
background: linear-gradient(90deg,#7a520c,#f3cf6a,#7a520c);
}
.n4-museum .n4-p1 {
left: 14%;
}
.n4-museum .n4-p2 {
right: 14%;
}
.n4-museum .n4-title {
font-size: clamp(22px,5.4cqmin,46px);
font-weight: 500;
letter-spacing: -.01em;
}
.n4-museum .n4-sub {
color: #c9bfb2;
}
.n4-museum .n4-cta {
background: var(--accent);
color: #1a1408;
}
@keyframes n4-museum-flick {
0%,100% {
opacity: 1;
}
47% {
opacity: 1;
}
48% {
opacity: .82;
}
50% {
opacity: 1;
}
}
@keyframes n4-museum-mote {
0% {
transform: translate(0,0);
opacity: 0;
}
20% {
opacity: .8;
}
100% {
transform: translate(2cqmin,-8cqmin);
opacity: 0;
}
}
</style>
</head>
<body>
<main class="n4-museum">
<div class="n4-copy">
<div class="n4-wall" aria-hidden="true">
<i class="n4-spot"></i>
<div class="n4-motes"><i style="--x:38%;--y:8%;--d:6.0s;--dl:0.0s"></i><i style="--x:49%;--y:61%;--d:7.7s;--dl:-0.9s"></i><i style="--x:60%;--y:44%;--d:9.4s;--dl:-1.8s"></i><i style="--x:45%;--y:27%;--d:11.1s;--dl:-2.7s"></i><i style="--x:56%;--y:10%;--d:12.8s;--dl:-3.6s"></i><i style="--x:41%;--y:63%;--d:6.0s;--dl:-4.5s"></i><i style="--x:52%;--y:46%;--d:7.7s;--dl:-5.4s"></i><i style="--x:63%;--y:29%;--d:9.4s;--dl:-6.3s"></i><i style="--x:48%;--y:12%;--d:11.1s;--dl:-7.2s"></i><i style="--x:59%;--y:65%;--d:12.8s;--dl:-8.1s"></i><i style="--x:44%;--y:48%;--d:6.0s;--dl:-9.0s"></i><i style="--x:55%;--y:31%;--d:7.7s;--dl:-9.9s"></i><i style="--x:40%;--y:14%;--d:9.4s;--dl:-10.8s"></i><i style="--x:51%;--y:67%;--d:11.1s;--dl:-11.7s"></i><i style="--x:62%;--y:50%;--d:12.8s;--dl:-12.6s"></i><i style="--x:47%;--y:33%;--d:6.0s;--dl:-13.5s"></i></div>
<div class="n4-frame"><i class="n4-ghost"></i></div>
<div class="n4-label"><b>Sin título (404)</b><span>Autor desconocido, 2026</span><em>Obra retirada temporalmente</em></div>
<svg class="n4-rope" viewBox="0 0 400 60" preserveAspectRatio="none"><path d="M40 18C140 56 260 56 360 18"/></svg>
<i class="n4-post n4-p1"></i><i class="n4-post n4-p2"></i>
</div>
<h1 class="n4-title">Esta obra ya no está expuesta.</h1>
<p class="n4-sub">La pieza que buscas se ha retirado para restaurarla o está de préstamo en otro museo. Sigue la visita por las demás salas.</p>
<a class="n4-cta" href="/">Seguir la visita</a>
</div>
</main>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Museos y galerías rotan sus colecciones, prestan obras y cierran salas, así que las páginas de las obras desaparecen con frecuencia. Aquí un foco cálido cae sobre un marco dorado ornamentado colgado en una pared oscura, sin nada dentro salvo la marca leve de donde estaba el cuadro. El polvo flota en el haz, un cordón de terciopelo mantiene a distancia y una cartela dice Sin título (404).
Las líneas de la cartela son texto traducible, la luz parpadea con suavidad y la tipografía con serifa mantiene un tono tranquilo y respetuoso. Úsalo en museos, casas de subastas, galerías o centros culturales y manda a la gente a las demás salas.