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-404 mit leerem Rahmen
Ein Spot beleuchtet einen leeren Goldrahmen hinter einer Samtkordel, und das Schild sagt, das Werk wurde entfernt.
Einstellungen
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 · Seite nicht gefunden</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>Ohne Titel (404)</b><span>Unbekannter Künstler, 2026</span><em>Vorübergehend entfernt</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">Dieses Werk ist nicht mehr ausgestellt.</h1>
<p class="n4-sub">Das gesuchte Werk ist in der Restaurierung oder an ein anderes Museum verliehen. Setz den Rundgang in den anderen Sälen fort.</p>
<a class="n4-cta" href="/">Rundgang fortsetzen</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Alle ansehen: 404Wofür du ihn nutzen kannst
Museen und Galerien wechseln Sammlungen, verleihen Werke und schließen Säle, Seiten zu Kunstwerken verschwinden daher regelmäßig. Hier fällt ein warmer Spot auf einen verzierten Goldrahmen an einer dunklen Galeriewand, darin nichts außer einer schwachen Spur, wo das Bild hing. Staub schwebt im Lichtkegel, eine Samtkordel hält Abstand, und ein kleines Schild nennt Ohne Titel (404).
Die Zeilen des Schildes sind übersetzbarer Text, das Licht flackert sanft, und die Serifenschrift hält den Ton ruhig und respektvoll. Für Museen, Auktionshäuser, Galerien oder Kulturzentren, mit Weiterleitung zu den anderen Sälen.