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
Museum empty frame 404
A spotlight shines on an empty gilt frame behind a velvet rope, and the wall label says the work was removed.
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-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>Untitled (404)</b><span>Unknown artist, 2026</span><em>Temporarily removed</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">This work is no longer on display.</h1>
<p class="n4-sub">The piece you're looking for is out for restoration or on loan to another museum. Carry on through the other rooms.</p>
<a class="n4-cta" href="/">Continue the tour</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
Museums and galleries rotate their collections, lend works and close rooms, so artwork pages go missing regularly. Here a warm spotlight falls on an ornate gold frame hanging on a dark gallery wall, with nothing inside it but a faint mark where the painting used to be. Dust drifts through the beam, a velvet rope keeps visitors back, and a small wall label reads Untitled (404).
The label lines are translatable text, the light flickers gently, and the serif typography keeps the tone quiet and respectful. Use it for museums, auction houses, art galleries or cultural centres, and send visitors on to the other rooms.