Tiempo muerto · Round 4
Esta página se ha lesionado.
Estará de baja toda la temporada. Estira, bebe agua y vuelve al inicio para la siguiente serie.
Volver a entrenarHTML + CSS404
404 Gimnasio
Un cronómetro deportivo con la aguja barriendo la esfera, un anillo de progreso verde lima y un 404 de marcador.
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-gym {
--accent: #c8ff2e;
--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-gym *,.n4-gym *::before,.n4-gym *::after {
box-sizing: border-box;
}
.n4-gym .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-gym .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-gym .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-gym .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-gym .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-gym .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-gym .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-gym .n4-stars,.n4-gym .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-gym .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-gym-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-gym .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-gym-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-gym [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-gym-tw {
from {
opacity: .3;
}
}
@keyframes n4-gym-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-gym-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-gym *,.n4-gym *::before,.n4-gym *::after {
animation: none!important;
transition: none!important;
}
}
.n4-gym {
background: radial-gradient(60% 50% at 50% 34%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),radial-gradient(90% 70% at 50% 36%,#15170f,#060706 72%);
}
.n4-gym .n4-watch {
flex: none;
width: min(52cqmin,340px);
height: auto;
margin-bottom: 1.6cqmin;
overflow: visible;
filter: drop-shadow(0 0 4cqmin color-mix(in srgb,var(--accent) 16%,transparent)) drop-shadow(0 1.6cqmin 2cqmin rgba(0,0,0,.6));
animation: n4-gym-pop calc(.9s / var(--k)) cubic-bezier(.2,.9,.3,1.2) both;
}
.n4-gym .n4-crown,.n4-gym .n4-side {
fill: url(#n4gy-steel);
}
.n4-gym .n4-crown {
transform-box: fill-box;
animation: n4-gym-press calc(6s / var(--k)) linear infinite;
}
.n4-gym .n4-track {
fill: none;
stroke: rgba(255,255,255,.07);
stroke-width: 4;
}
.n4-gym .n4-arc {
fill: none;
stroke: var(--accent);
stroke-width: 4;
stroke-linecap: round;
filter: drop-shadow(0 0 3px var(--accent));
animation: n4-gym-arc calc(6s / var(--k)) linear infinite;
}
.n4-gym .n4-tick {
stroke: rgba(255,255,255,.2);
stroke-width: 1.1;
stroke-linecap: round;
}
.n4-gym .n4-major {
stroke: rgba(255,255,255,.75);
stroke-width: 2.2;
}
.n4-gym .n4-hand {
transform-box: view-box;
transform-origin: 110px 130px;
animation: n4-gym-spin calc(6s / var(--k)) linear infinite;
}
.n4-gym .n4-hand line {
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
opacity: .9;
}
.n4-gym .n4-hand circle {
fill: var(--accent);
}
.n4-gym .n4-big {
font: italic 900 54px -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
letter-spacing: -2.5px;
fill: #f5f5f7;
stroke: #0a0b09;
stroke-width: 5px;
paint-order: stroke;
stroke-linejoin: round;
}
.n4-gym .n4-tag {
font-style: italic;
}
.n4-gym .n4-title {
font-size: clamp(24px,6cqmin,52px);
font-weight: 900;
font-style: italic;
letter-spacing: -.035em;
line-height: 1.05;
}
.n4-gym .n4-sub {
color: #9a9a9f;
}
.n4-gym .n4-cta {
border-radius: .5em;
background: var(--accent);
color: #0b0b0c;
font-style: italic;
font-weight: 800;
letter-spacing: .01em;
}
.n4-gym .n4-cta::after {
content: "→";
}
.n4-gym .n4-copy>:not(.n4-watch) {
animation: n4-gym-fade calc(.8s / var(--k)) calc(.3s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-gym-pop {
from {
opacity: 0;
transform: scale(.85) rotate(-6deg);
}
}
@keyframes n4-gym-press {
0%,5%,100% {
transform: none;
}
2% {
transform: translateY(3px);
}
}
@keyframes n4-gym-arc {
from {
stroke-dasharray: 0 100;
}
to {
stroke-dasharray: 100 100;
}
}
</style>
</head>
<body>
<main class="n4-gym">
<div class="n4-copy">
<svg class="n4-watch" viewBox="0 0 220 232" aria-hidden="true">
<defs>
<linearGradient id="n4gy-steel" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#5a5a5e"/><stop offset=".45" stop-color="#e5e5ea"/><stop offset="1" stop-color="#48484a"/></linearGradient>
<radialGradient id="n4gy-case" cx=".4" cy=".3" r=".8"><stop offset="0" stop-color="#3a3a3e"/><stop offset=".7" stop-color="#18181a"/><stop offset="1" stop-color="#0b0b0c"/></radialGradient>
</defs>
<rect class="n4-side" x="103" y="21" width="14" height="12" rx="2.5" transform="rotate(45 110 130)"/>
<g class="n4-crown"><rect x="101" y="18" width="18" height="16" rx="2"/><rect x="92" y="6" width="36" height="13" rx="4.5"/></g>
<circle cx="110" cy="130" r="98" fill="url(#n4gy-case)"/>
<circle cx="110" cy="130" r="86" fill="#0a0b09"/>
<circle class="n4-track" cx="110" cy="130" r="92"/>
<circle class="n4-arc" cx="110" cy="130" r="92" pathLength="100" transform="rotate(-90 110 130)"/>
<line class="n4-tick n4-major" x1="110.00" y1="50.00" x2="110.00" y2="60.00"/><line class="n4-tick" x1="118.36" y1="50.44" x2="117.84" y2="55.41"/><line class="n4-tick" x1="126.63" y1="51.75" x2="125.59" y2="56.64"/><line class="n4-tick" x1="134.72" y1="53.92" x2="133.18" y2="58.67"/><line class="n4-tick" x1="142.54" y1="56.92" x2="140.51" y2="61.48"/><line class="n4-tick n4-major" x1="150.00" y1="60.72" x2="145.00" y2="69.38"/><line class="n4-tick" x1="157.02" y1="65.28" x2="154.08" y2="69.32"/><line class="n4-tick" x1="163.53" y1="70.55" x2="160.18" y2="74.26"/><line class="n4-tick" x1="169.45" y1="76.47" x2="165.74" y2="79.82"/><line class="n4-tick" x1="174.72" y1="82.98" x2="170.68" y2="85.92"/><line class="n4-tick n4-major" x1="179.28" y1="90.00" x2="170.62" y2="95.00"/><line class="n4-tick" x1="183.08" y1="97.46" x2="178.52" y2="99.49"/><line class="n4-tick" x1="186.08" y1="105.28" x2="181.33" y2="106.82"/><line class="n4-tick" x1="188.25" y1="113.37" x2="183.36" y2="114.41"/><line class="n4-tick" x1="189.56" y1="121.64" x2="184.59" y2="122.16"/><line class="n4-tick n4-major" x1="190.00" y1="130.00" x2="180.00" y2="130.00"/><line class="n4-tick" x1="189.56" y1="138.36" x2="184.59" y2="137.84"/><line class="n4-tick" x1="188.25" y1="146.63" x2="183.36" y2="145.59"/><line class="n4-tick" x1="186.08" y1="154.72" x2="181.33" y2="153.18"/><line class="n4-tick" x1="183.08" y1="162.54" x2="178.52" y2="160.51"/><line class="n4-tick n4-major" x1="179.28" y1="170.00" x2="170.62" y2="165.00"/><line class="n4-tick" x1="174.72" y1="177.02" x2="170.68" y2="174.08"/><line class="n4-tick" x1="169.45" y1="183.53" x2="165.74" y2="180.18"/><line class="n4-tick" x1="163.53" y1="189.45" x2="160.18" y2="185.74"/><line class="n4-tick" x1="157.02" y1="194.72" x2="154.08" y2="190.68"/><line class="n4-tick n4-major" x1="150.00" y1="199.28" x2="145.00" y2="190.62"/><line class="n4-tick" x1="142.54" y1="203.08" x2="140.51" y2="198.52"/><line class="n4-tick" x1="134.72" y1="206.08" x2="133.18" y2="201.33"/><line class="n4-tick" x1="126.63" y1="208.25" x2="125.59" y2="203.36"/><line class="n4-tick" x1="118.36" y1="209.56" x2="117.84" y2="204.59"/><line class="n4-tick n4-major" x1="110.00" y1="210.00" x2="110.00" y2="200.00"/><line class="n4-tick" x1="101.64" y1="209.56" x2="102.16" y2="204.59"/><line class="n4-tick" x1="93.37" y1="208.25" x2="94.41" y2="203.36"/><line class="n4-tick" x1="85.28" y1="206.08" x2="86.82" y2="201.33"/><line class="n4-tick" x1="77.46" y1="203.08" x2="79.49" y2="198.52"/><line class="n4-tick n4-major" x1="70.00" y1="199.28" x2="75.00" y2="190.62"/><line class="n4-tick" x1="62.98" y1="194.72" x2="65.92" y2="190.68"/><line class="n4-tick" x1="56.47" y1="189.45" x2="59.82" y2="185.74"/><line class="n4-tick" x1="50.55" y1="183.53" x2="54.26" y2="180.18"/><line class="n4-tick" x1="45.28" y1="177.02" x2="49.32" y2="174.08"/><line class="n4-tick n4-major" x1="40.72" y1="170.00" x2="49.38" y2="165.00"/><line class="n4-tick" x1="36.92" y1="162.54" x2="41.48" y2="160.51"/><line class="n4-tick" x1="33.92" y1="154.72" x2="38.67" y2="153.18"/><line class="n4-tick" x1="31.75" y1="146.63" x2="36.64" y2="145.59"/><line class="n4-tick" x1="30.44" y1="138.36" x2="35.41" y2="137.84"/><line class="n4-tick n4-major" x1="30.00" y1="130.00" x2="40.00" y2="130.00"/><line class="n4-tick" x1="30.44" y1="121.64" x2="35.41" y2="122.16"/><line class="n4-tick" x1="31.75" y1="113.37" x2="36.64" y2="114.41"/><line class="n4-tick" x1="33.92" y1="105.28" x2="38.67" y2="106.82"/><line class="n4-tick" x1="36.92" y1="97.46" x2="41.48" y2="99.49"/><line class="n4-tick n4-major" x1="40.72" y1="90.00" x2="49.38" y2="95.00"/><line class="n4-tick" x1="45.28" y1="82.98" x2="49.32" y2="85.92"/><line class="n4-tick" x1="50.55" y1="76.47" x2="54.26" y2="79.82"/><line class="n4-tick" x1="56.47" y1="70.55" x2="59.82" y2="74.26"/><line class="n4-tick" x1="62.98" y1="65.28" x2="65.92" y2="69.32"/><line class="n4-tick n4-major" x1="70.00" y1="60.72" x2="75.00" y2="69.38"/><line class="n4-tick" x1="77.46" y1="56.92" x2="79.49" y2="61.48"/><line class="n4-tick" x1="85.28" y1="53.92" x2="86.82" y2="58.67"/><line class="n4-tick" x1="93.37" y1="51.75" x2="94.41" y2="56.64"/><line class="n4-tick" x1="101.64" y1="50.44" x2="102.16" y2="55.41"/>
<g class="n4-hand"><line x1="110" y1="148" x2="110" y2="56"/><circle cx="110" cy="130" r="5"/></g>
<text class="n4-big" x="110" y="149" text-anchor="middle">404</text>
</svg>
<span class="n4-tag">Tiempo muerto · Round 4</span>
<h1 class="n4-title">Esta página se ha lesionado.</h1>
<p class="n4-sub">Estará de baja toda la temporada. Estira, bebe agua y vuelve al inicio para la siguiente serie.</p>
<a class="n4-cta" href="/">Volver a entrenar</a>
</div>
</main>
</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
Dónde usarlo
Un gimnasio lanza muchas campañas cortas: la oferta de enero, la semana de prueba gratis, el bootcamp de verano. Los anuncios y publicaciones siguen online mucho después de borrar la landing, así que esos clics acaban en nada. Una página 404 para gimnasio con algo de energía convierte el tropiezo en una sonrisa y los devuelve a entrenar.
Cambia el botón para que lleve al horario de clases o al formulario de prueba gratis, que es adonde iba casi todo el mundo. El negro con lima pega con un club de boxeo o un box de CrossFit. Para yoga o pilates, baja la velocidad y suaviza los colores.