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 Musée au cadre vide
Un projecteur éclaire un cadre doré vide derrière un cordon de velours, et le cartel indique que l'œuvre a été retirée.
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-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>Sans titre (404)</b><span>Artiste inconnu, 2026</span><em>Œuvre retirée temporairement</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">Cette œuvre n'est plus exposée.</h1>
<p class="n4-sub">L'œuvre que tu cherches est en restauration ou prêtée à un autre musée. Poursuis la visite dans les autres salles.</p>
<a class="n4-cta" href="/">Poursuivre la visite</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
Musées et galeries font tourner leurs collections, prêtent des œuvres et ferment des salles, les pages d'œuvres disparaissent donc souvent. Ici, un projecteur chaud éclaire un cadre doré ouvragé sur un mur sombre, vide à l'exception d'une trace légère là où était le tableau. La poussière flotte dans le faisceau, un cordon de velours tient à distance et un petit cartel indique Sans titre (404).
Les lignes du cartel sont du texte traduisible, la lumière vacille doucement et la typographie à empattements garde un ton calme et respectueux. Pour les musées, maisons de vente, galeries ou centres culturels, avec un renvoi vers les autres salles.