Tiempo muerto · Round 4
Cette page s’est blessée.
Elle est forfait pour la saison. Étirez-vous, buvez un peu d’eau et revenez à l’accueil pour la prochaine série.
Retour à l’entraînementHTML + CSS404
404 Salle de sport
Un chronomètre de sport dont l’aiguille balaie le cadran, un anneau de progression vert citron et un 404 façon tableau d’affichage.
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-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">Temps mort · Round 4</span>
<h1 class="n4-title">Cette page s’est blessée.</h1>
<p class="n4-sub">Elle est forfait pour la saison. Étirez-vous, buvez un peu d’eau et revenez à l’accueil pour la prochaine série.</p>
<a class="n4-cta" href="/">Retour à l’entraînement</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
Où l’utiliser
Une salle de sport enchaîne les campagnes courtes : l’offre de janvier, la semaine d’essai gratuite, le bootcamp d’été. Les pubs et les posts restent en ligne bien après la suppression de la landing page, et ces clics tombent dans le vide. Une page 404 de salle de sport pleine d’énergie en fait un sourire et renvoie à l’entraînement.
Faites pointer le bouton vers le planning des cours ou le formulaire de séance d’essai : c’est là que la plupart allaient. Le noir et le citron vont bien à un club de boxe ou de CrossFit. Pour le yoga ou le pilates, ralentissez et adoucissez les couleurs.