Esta página se ha perdido en la colada.
Como ese calcetín que nunca vuelve del tambor. Prueba otro programa o vuelve al inicio a buscar su pareja.
Volver al inicioHTML + CSS404
404 Lavandería
Una lavadora de carga frontal da vueltas a la colada mientras el calcetín desparejado con el 404 bordado gira entre la ropa.
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-laundry {
--accent: #ff7a59;
--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-laundry *,.n4-laundry *::before,.n4-laundry *::after {
box-sizing: border-box;
}
.n4-laundry .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-laundry .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-laundry .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-laundry .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-laundry .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-laundry .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-laundry .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-laundry .n4-stars,.n4-laundry .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-laundry .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-laundry-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-laundry .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-laundry-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-laundry [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-laundry-tw {
from {
opacity: .3;
}
}
@keyframes n4-laundry-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-laundry-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-laundry *,.n4-laundry *::before,.n4-laundry *::after {
animation: none!important;
transition: none!important;
}
}
.n4-laundry {
background: linear-gradient(#cfe3dc .18cqmin,transparent .18cqmin) 0 0/7cqmin 7cqmin,linear-gradient(90deg,#cfe3dc .18cqmin,transparent .18cqmin) 0 0/7cqmin 7cqmin,radial-gradient(80% 70% at 50% 35%,#f3f9f6,#dcebe5);
color: #123a32;
}
.n4-laundry .n4-wm {
position: relative;
width: min(38cqmin,270px);
font-size: min(1.9cqmin,13px);
aspect-ratio: .86;
margin-bottom: 1cqmin;
padding: 0 1.6em 1.6em;
border-radius: 1.2em 1.2em .8em .8em;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(90deg,#e4eae8,#fff 28%,#f5f8f7 70%,#d6dedb);
box-shadow: inset 0 -.45em 0 #cdd6d2,0 1.6em 2.4em -1.2em rgba(18,58,50,.55);
}
.n4-laundry .n4-panel {
align-self: stretch;
display: flex;
align-items: center;
gap: .8em;
height: 4.6em;
margin: 0 -1.6em 1.3em;
padding: 0 1.2em;
border-bottom: 2px solid #d7dfdc;
}
.n4-laundry .n4-lcd {
padding: .45em .6em;
border-radius: .35em;
background: #a9e3d2;
color: #0f3d33;
font: 700 1.05em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .08em;
box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
animation: n4-laundry-blink calc(1.6s / var(--k)) steps(1) infinite;
}
.n4-laundry .n4-progs {
flex: 1;
display: flex;
flex-direction: column;
gap: .18em;
text-align: left;
font: 600 .78em/1.1 system-ui,sans-serif;
color: #81918c;
}
.n4-laundry .n4-progs i {
display: flex;
align-items: center;
gap: .45em;
font-style: normal;
white-space: nowrap;
}
.n4-laundry .n4-progs i::before {
content: "";
flex: none;
width: .6em;
height: .6em;
border-radius: 50%;
background: #cfd8d4;
}
.n4-laundry .n4-progs .n4-on {
color: #123a32;
}
.n4-laundry .n4-progs .n4-on::before {
background: var(--accent);
box-shadow: 0 0 .6em var(--accent);
}
.n4-laundry .n4-knob {
position: relative;
flex: none;
width: 3.3em;
height: 3.3em;
border: 0;
border-radius: 50%;
cursor: pointer;
background: radial-gradient(circle at 35% 30%,#fff,#dfe5e3 45%,#a7b2ae);
box-shadow: 0 .2em .45em rgba(0,0,0,.3),inset 0 0 0 .18em #eef2f0;
rotate: var(--r,-40deg);
transition: rotate .45s cubic-bezier(.3,1.6,.5,1),scale .15s;
}
.n4-laundry .n4-knob::after {
content: "";
position: absolute;
left: 50%;
top: 9%;
width: .26em;
height: 34%;
margin-left: -.13em;
border-radius: 1em;
background: #123a32;
}
.n4-laundry .n4-knob:hover {
filter: brightness(1.05);
}
.n4-laundry .n4-knob:active {
scale: .92;
}
.n4-laundry .n4-knob:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-laundry .n4-door {
position: relative;
width: 84%;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(from 200deg,#b5c0bc,#f7f9f8,#a2ada9,#eef2f0,#b5c0bc);
box-shadow: 0 .35em .7em rgba(0,0,0,.28),inset 0 0 0 .2em rgba(255,255,255,.7);
}
.n4-laundry .n4-drum,.n4-laundry .n4-water,.n4-laundry .n4-glass {
position: absolute;
inset: 9%;
border-radius: 50%;
}
.n4-laundry .n4-drum {
overflow: hidden;
background: radial-gradient(circle,#3b474c 0 22%,transparent 30%) 0 0/1.1em 1.1em,radial-gradient(circle,#8a979b,#2b363b 75%);
}
.n4-laundry .n4-drum svg {
display: block;
width: 100%;
height: 100%;
}
.n4-laundry .n4-sock {
fill: var(--accent);
}
.n4-laundry .n4-st {
font: 800 7.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;
fill: #fff;
}
.n4-laundry .n4-water {
overflow: hidden;
}
.n4-laundry .n4-water::before {
content: "";
position: absolute;
left: -50%;
top: 58%;
width: 200%;
aspect-ratio: 1;
border-radius: 42%;
background: rgba(140,210,235,.4);
animation: n4-laundry-spin calc(7s / var(--k)) linear infinite;
}
.n4-laundry .n4-glass {
background: radial-gradient(60% 45% at 32% 24%,rgba(255,255,255,.6),transparent 62%),radial-gradient(circle,transparent 60%,rgba(0,0,0,.4));
box-shadow: inset 0 0 0 .35em rgba(30,50,55,.6),inset 0 0 1.2em rgba(0,0,0,.4);
}
.n4-laundry .n4-tag {
color: color-mix(in srgb,var(--accent) 70%,#000);
}
.n4-laundry .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.025em;
}
.n4-laundry .n4-sub {
color: #4a6a62;
}
.n4-laundry .n4-cta {
background: #123a32;
color: #fff;
}
.n4-laundry .n4-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@keyframes n4-laundry-blink {
50% {
opacity: .35;
}
}
</style>
</head>
<body>
<main class="n4-laundry">
<div class="n4-copy">
<div class="n4-wm">
<div class="n4-panel">
<span class="n4-lcd" aria-hidden="true" translate="no">E-404</span>
<span class="n4-progs" aria-hidden="true"><i class="n4-on">Algodón</i><i>Rápido</i><i>Centrifugado</i></span>
<button class="n4-knob" type="button" aria-label="Cambiar programa"></button>
</div>
<div class="n4-door" aria-hidden="true">
<div class="n4-drum"><svg viewBox="0 0 100 100"><path d="M9 0l6 3h4l6-3 9 7-5 7-4-2v18H9V12l-4 2-5-7z" fill="#5b8def" transform="translate(10 48) rotate(-24) scale(.95)"/><path d="M9 0h11v15c0 3 1.5 5 5 7 4.5 2.5 5.5 7.5 1.5 10.5-3.5 2.5-8 1.5-12-1L5 26C1 23 .5 18 4 15l5-4z" fill="#ffd166" transform="translate(58 10) rotate(38) scale(.8)"/><path d="M9 0h11v15c0 3 1.5 5 5 7 4.5 2.5 5.5 7.5 1.5 10.5-3.5 2.5-8 1.5-12-1L5 26C1 23 .5 18 4 15l5-4z" fill="#2a9d8f" transform="translate(24 14) rotate(-52) scale(.75)"/><rect x="0" y="0" width="30" height="17" rx="3" fill="#f4a3c0" transform="translate(48 62) rotate(14)"/><path d="M0 4h30M0 9h30" stroke="#fff" stroke-width="1.6" opacity=".55" transform="translate(48 62) rotate(14)"/><g transform="translate(62 30) rotate(112) scale(.95)"><path class="n4-sock" d="M9 0h11v15c0 3 1.5 5 5 7 4.5 2.5 5.5 7.5 1.5 10.5-3.5 2.5-8 1.5-12-1L5 26C1 23 .5 18 4 15l5-4z"/><text class="n4-st" x="13.5" y="22" transform="rotate(-90 13.5 19)">404</text></g></svg></div>
<i class="n4-water"></i>
<i class="n4-glass"></i>
</div>
<span class="n4-sr" aria-live="polite"></span>
</div>
<span class="n4-tag">Programa 404, calcetín suelto</span>
<h1 class="n4-title">Esta página se ha perdido en la colada.</h1>
<p class="n4-sub">Como ese calcetín que nunca vuelve del tambor. Prueba otro programa o vuelve al inicio a buscar su pareja.</p>
<a class="n4-cta" href="/">Volver al inicio</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-laundry").forEach((el) => {
const drum = el.querySelector(".n4-drum");
const knob = el.querySelector(".n4-knob");
const progs = el.querySelectorAll(".n4-progs i");
const live = el.querySelector(".n4-sr");
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
const SPEED = [80, 200, 640];
let p = 0, v = 0, a = 0, last = performance.now(), raf = 0;
const tick = (now) => {
const dt = Math.min(0.05, (now - last) / 1000);
last = now;
v += (SPEED[p] * k - v) * Math.min(1, dt * 1.4);
a = (a + v * dt) % 360;
drum.style.transform = "rotate(" + a.toFixed(1) + "deg)";
raf = requestAnimationFrame(tick);
};
knob.addEventListener("click", () => {
p = (p + 1) % 3;
knob.style.setProperty("--r", p * 40 - 40 + "deg");
progs.forEach((x, i) => x.classList.toggle("n4-on", i === p));
live.textContent = progs[p].textContent;
});
if (!rm) raf = requestAnimationFrame(tick);
});
</script>
</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
Todo el mundo conoce el calcetín que nunca vuelve de la lavadora, y esta página de error convierte ese pequeño misterio en un 404. Una lavadora blanca de carga frontal, con una pantalla verde menta que marca E-404, hace girar el tambor con inercia real mientras una camiseta, una toalla y un calcetín coral dan vueltas tras el ojo de buey.
El mando de programas es un botón de verdad: pasa por algodón, rápido y centrifugado, y el tambor acelera o frena con suavidad. Cambia el color coral por el de tu marca y enlaza el botón con tu portada.