Esta prenda ya no está en el perchero.
Se ha vendido o todavía no ha llegado del taller. Echa un vistazo a la nueva colección mientras la reponemos.
Ver la colecciónHTML + CSS404
Kleiderstangen-404
Eine Kleiderstange im Laden, deren Teile beim Überfahren wie Federn schwingen; am leeren Bügel hängt ein Etikett mit Größe 404.
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-wardrobe {
--accent: #b5523b;
--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-wardrobe *,.n4-wardrobe *::before,.n4-wardrobe *::after {
box-sizing: border-box;
}
.n4-wardrobe .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-wardrobe .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-wardrobe .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-wardrobe .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-wardrobe .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-wardrobe .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-wardrobe .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-wardrobe .n4-stars,.n4-wardrobe .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-wardrobe .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-wardrobe-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-wardrobe .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-wardrobe-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-wardrobe [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-wardrobe-tw {
from {
opacity: .3;
}
}
@keyframes n4-wardrobe-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-wardrobe-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-wardrobe *,.n4-wardrobe *::before,.n4-wardrobe *::after {
animation: none!important;
transition: none!important;
}
}
.n4-wardrobe {
background: linear-gradient(90deg,rgba(181,82,59,.05) 1px,transparent 1px) 0 0/6cqmin 100%,radial-gradient(70% 55% at 50% 25%,#fbf4ea,#ecdcc6);
color: #2e2620;
font-family: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
.n4-wardrobe .n4-rack {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: min(74cqmin,520px);
height: 13em;
font-size: min(1.8cqmin,13px);
padding-top: .9em;
margin-bottom: 1.8cqmin;
}
.n4-wardrobe .n4-rack::before,.n4-wardrobe .n4-rack::after {
content: "";
position: absolute;
top: .6em;
width: .9em;
height: 1.4em;
border-radius: .2em;
background: #6b5a4b;
}
.n4-wardrobe .n4-rack::before {
left: -.4em;
}
.n4-wardrobe .n4-rack::after {
right: -.4em;
}
.n4-wardrobe .n4-bar {
position: absolute;
left: 0;
right: 0;
top: .9em;
height: .7em;
border-radius: 1em;
background: linear-gradient(#fafafa,#9a9a9a 55%,#e3e3e3);
box-shadow: 0 .3em .4em rgba(0,0,0,.15);
}
.n4-wardrobe .n4-hg {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 5.4em;
margin: 0 -.35em;
transform-origin: 50% .2em;
rotate: var(--a,0deg);
}
.n4-wardrobe .n4-wire {
width: 4.4em;
height: auto;
margin-top: -.35em;
overflow: visible;
fill: none;
stroke: #7d838b;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.n4-wardrobe .n4-cl {
display: block;
width: 5em;
margin-top: -.55em;
background: linear-gradient(90deg,rgba(0,0,0,.16),transparent 22%,transparent 78%,rgba(0,0,0,.16)),var(--bg);
}
.n4-wardrobe .n4-shirt {
height: 7em;
clip-path: polygon(30% 0,70% 0,100% 16%,90% 34%,80% 28%,80% 100%,20% 100%,20% 28%,10% 34%,0 16%);
}
.n4-wardrobe .n4-dress {
height: 8.8em;
clip-path: polygon(32% 0,68% 0,72% 30%,100% 100%,0 100%,28% 30%);
}
.n4-wardrobe .n4-coat {
height: 9.6em;
clip-path: polygon(26% 0,74% 0,100% 12%,100% 100%,0 100%,0 12%);
}
.n4-wardrobe .n4-sweater {
height: 7.2em;
clip-path: polygon(28% 0,72% 0,100% 14%,100% 72%,86% 72%,82% 28%,82% 100%,18% 100%,18% 28%,14% 72%,0 72%,0 14%);
}
.n4-wardrobe .n4-jacket {
height: 6.8em;
clip-path: polygon(28% 0,72% 0,100% 14%,100% 86%,84% 86%,84% 100%,16% 100%,16% 86%,0 86%,0 14%);
}
.n4-wardrobe .n4-tee {
height: 6.2em;
clip-path: polygon(32% 0,68% 0,100% 18%,88% 34%,78% 28%,78% 100%,22% 100%,22% 28%,12% 34%,0 18%);
}
.n4-wardrobe .n4-empty {
z-index: 2;
}
.n4-wardrobe .n4-tagx {
position: relative;
display: block;
margin-top: -.2em;
padding-top: 1.7em;
}
.n4-wardrobe .n4-tagx::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 1.9em;
background: #6b5a43;
}
.n4-wardrobe .n4-tagx b {
position: relative;
display: block;
padding: 1.1em .6em .6em;
border-radius: .25em .25em .5em .5em;
background: #e8d2ab;
color: #3d2c1c;
font: 800 .95em/1.1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
rotate: 7deg;
transform-origin: 50% 0;
box-shadow: 0 .25em .35em rgba(60,40,20,.25);
}
.n4-wardrobe .n4-tagx b::before {
content: "";
position: absolute;
left: 50%;
top: .35em;
width: .45em;
height: .45em;
margin-left: -.225em;
border-radius: 50%;
background: #f4e9d6;
box-shadow: inset 0 0 0 .1em #b99b6c;
}
.n4-wardrobe .n4-tagx b::after {
content: "";
position: absolute;
left: .5em;
right: .5em;
bottom: .3em;
height: .18em;
background: var(--accent);
}
.n4-wardrobe .n4-title {
font-size: clamp(22px,5.2cqmin,44px);
font-weight: 500;
font-style: italic;
letter-spacing: -.01em;
}
.n4-wardrobe .n4-sub {
color: #6d5f52;
}
.n4-wardrobe .n4-cta {
background: #2e2620;
color: #fbf4ea;
}
</style>
</head>
<body>
<main class="n4-wardrobe">
<div class="n4-copy">
<div class="n4-rack" aria-hidden="true">
<i class="n4-bar"></i>
<span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-shirt" style="--bg:repeating-linear-gradient(90deg,#f4f1ea 0 .45em,#2f5d9e .45em .7em)"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-dress" style="--bg:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1.5px) 0 0/.5em .5em,#c8553d"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-coat" style="--bg:linear-gradient(90deg,transparent 48%,rgba(0,0,0,.2) 48% 52%,transparent 52%),#c19a6b"></i></span><span class="n4-hg n4-empty"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-tagx"><b>Größe 404</b></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-sweater" style="--bg:repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 .4em,transparent .4em .8em),repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 .4em,transparent .4em .8em),#3f7d5a"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-jacket" style="--bg:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),#3b5b8a"></i></span><span class="n4-hg"><svg class="n4-wire" viewBox="0 0 40 22"><path d="M20 9V6a3 3 0 1 1 3-3M20 9L2 20h36z"/></svg><i class="n4-cl n4-tee" style="--bg:#e0a526"></i></span>
</div>
<h1 class="n4-title">Dieses Teil hängt nicht mehr auf der Stange.</h1>
<p class="n4-sub">Es ist ausverkauft oder noch nicht aus der Werkstatt zurück. Sieh dir die neue Kollektion an, während wir nachfüllen.</p>
<a class="n4-cta" href="/">Zur Kollektion</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-wardrobe").forEach((el) => {
const rack = el.querySelector(".n4-rack");
const hs = Array.from(el.querySelectorAll(".n4-hg"));
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
const st = hs.map(() => ({ a: 0, w: 0 }));
let lx = null, lt = 0, raf = 0, prev = performance.now();
const push = (e) => {
const now = performance.now();
if (lx !== null) {
const vx = (e.clientX - lx) / Math.max(8, now - lt);
hs.forEach((h, i) => {
const r = h.getBoundingClientRect();
if (e.clientX > r.left - 4 && e.clientX < r.right + 4 && e.clientY > r.top && e.clientY < r.bottom) st[i].w += vx * 90;
});
}
lx = e.clientX;
lt = now;
};
const loop = (t) => {
const dt = Math.min(0.033, (t - prev) / 1000) * k;
prev = t;
st.forEach((s, i) => {
const l = st[i - 1] ? st[i - 1].a : s.a, r = st[i + 1] ? st[i + 1].a : s.a;
s.w += (-38 * s.a - 2.4 * s.w + (l + r - 2 * s.a) * 6) * dt;
s.a = Math.max(-35, Math.min(35, s.a + s.w * dt));
hs[i].style.setProperty("--a", s.a.toFixed(2) + "deg");
});
raf = requestAnimationFrame(loop);
};
rack.addEventListener("pointermove", push);
rack.addEventListener("pointerleave", () => { lx = null; });
if (!rm) {
st[0].w = 70;
raf = requestAnimationFrame(loop);
}
});
</script>
</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
Modegeschäfte und Bekleidungsmarken können diese Boutique-Stange zeigen, wenn eine Produktseite fehlt. Eine verchromte Stange trägt Drahtbügel mit gestreiftem Hemd, Kleid, Kamelmantel, kariertem Pullover, Jeansjacke und senfgelbem Shirt, und ein leerer Bügel trägt ein Pappetikett mit Größe 404.
Fahr mit dem Zeiger über die Stange, und jeder Bügel schwingt an einer gedämpften Feder, die auch die Nachbarn anstößt, sodass die Bewegung weiterläuft. Die Kleidung besteht aus CSS-Formen mit Stoffmustern. Bei reduzierter Bewegung bleibt alles ruhig.