页面 困難
Fitness Brand
High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.
在 Lab 開啟
MCP
gsap scrolltrigger lenis barlow-condensed
目標: JS HTML
程式碼
/* ═══════════════════════════════════════════════════════
IRONFORM — Brutalist Bold Style
Palette: Pure Black, Neon Yellow, White, Concrete Gray
Fonts: Barlow Condensed (display), Barlow (body)
Feel: Raw, aggressive, no-nonsense fitness brand
═══════════════════════════════════════════════════════ */
:root {
--black: #0a0a0a;
--black-mid: #151515;
--concrete: #1e1e1e;
--gray: #2a2a2a;
--gray-mid: #444;
--gray-light: #888;
--white: #f5f5f5;
--yellow: #f0e000;
--yellow-d: #c8bb00;
--yellow-dim: rgba(240, 224, 0, 0.12);
--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
--font-body: "Barlow", system-ui, sans-serif;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: var(--black);
color: var(--white);
overflow-x: hidden;
}
/* ── Nav ── */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 3rem;
background: var(--black);
border-bottom: 3px solid var(--yellow);
}
.nav-logo {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 900;
letter-spacing: -1px;
color: var(--white);
}
.nav-logo span {
color: var(--yellow);
}
.nav-links {
list-style: none;
display: flex;
gap: 3rem;
}
.nav-links a {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--gray-light);
text-decoration: none;
transition: color 0.15s ease;
}
.nav-links a:hover {
color: var(--yellow);
}
.nav-cta {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 900;
letter-spacing: 2px;
color: var(--black);
background: var(--yellow);
text-decoration: none;
padding: 0.6rem 1.5rem;
border: none;
transition: background 0.15s ease, transform 0.15s ease;
display: inline-block;
}
.nav-cta:hover {
background: var(--yellow-d);
transform: translateY(-1px);
}
/* ── Hero ── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 8rem 4rem 6rem;
overflow: hidden;
background: var(--black);
}
.hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-stripe {
position: absolute;
background: var(--yellow);
opacity: 0.04;
}
.hero-stripe--1 {
width: 3px;
top: 0;
bottom: 0;
right: 28%;
}
.hero-stripe--2 {
height: 3px;
left: 0;
right: 0;
bottom: 30%;
opacity: 0.03;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 900px;
}
.hero-tag {
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gray-light);
margin-bottom: 2rem;
border-left: 3px solid var(--yellow);
padding-left: 1rem;
}
.hero-title {
display: flex;
flex-direction: column;
margin-bottom: 2.5rem;
line-height: 0.92;
}
.hero-line {
font-family: var(--font-display);
font-size: clamp(5rem, 14vw, 12rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -3px;
color: var(--white);
display: block;
}
.hero-line--yellow {
color: var(--yellow);
}
.hero-line--outline {
color: transparent;
-webkit-text-stroke: 3px var(--white);
}
.hero-sub {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 400;
color: var(--gray-light);
max-width: 500px;
margin-bottom: 3rem;
line-height: 1.7;
}
.hero-ctas {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-yellow {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
padding: 1.1rem 2.5rem;
background: var(--yellow);
color: var(--black);
border: none;
display: inline-block;
transition: all 0.15s ease;
cursor: pointer;
}
.btn-yellow:hover {
background: var(--yellow-d);
transform: translateY(-2px);
}
.btn-border-white {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
padding: 1.1rem 2.5rem;
background: transparent;
color: var(--white);
border: 2px solid var(--gray-mid);
display: inline-block;
transition: all 0.15s ease;
}
.btn-border-white:hover {
border-color: var(--yellow);
color: var(--yellow);
}
/* Ticker */
.hero-ticker {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--yellow);
overflow: hidden;
padding: 0.7rem 0;
}
.ticker-track {
display: flex;
gap: 2rem;
white-space: nowrap;
animation: ticker 25s linear infinite;
width: max-content;
}
.ticker-track span {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--black);
}
@keyframes ticker {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ── Stats Bar ── */
.stats-bar {
display: flex;
align-items: stretch;
background: var(--concrete);
border-bottom: 3px solid var(--yellow);
}
.stat-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3.5rem 2rem;
gap: 0.5rem;
}
.stat-divider {
width: 1px;
background: var(--gray);
align-self: stretch;
}
.stat-big {
font-family: var(--font-display);
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 900;
color: var(--yellow);
line-height: 1;
letter-spacing: -2px;
font-variant-numeric: tabular-nums;
}
.stat-sub {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gray-light);
}
/* ── Programs ── */
.programs-section {
padding: 7rem 4rem;
background: var(--black-mid);
}
.programs-header {
margin-bottom: 4rem;
max-width: 600px;
}
.section-tag {
display: block;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--yellow);
margin-bottom: 1rem;
border-left: 3px solid var(--yellow);
padding-left: 1rem;
}
.programs-header h2 {
font-family: var(--font-display);
font-size: clamp(3.5rem, 7vw, 6rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -2px;
text-transform: uppercase;
}
.programs-header h2 em {
font-style: italic;
color: var(--yellow);
}
.programs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 2px solid var(--gray);
}
.program-card {
padding: 3rem 2.5rem;
border-right: 2px solid var(--gray);
display: flex;
flex-direction: column;
gap: 1.2rem;
transition: transform 0.2s ease;
}
.program-card:last-child {
border-right: none;
}
.program-card--dark {
background: var(--concrete);
}
.program-card--yellow {
background: var(--yellow);
}
.program-card--yellow h3,
.program-card--yellow p,
.program-card--yellow .program-meta span {
color: var(--black) !important;
}
.program-num {
font-family: var(--font-display);
font-size: 4rem;
font-weight: 900;
line-height: 1;
color: rgba(255, 255, 255, 0.08);
letter-spacing: -2px;
}
.program-card--yellow .program-num {
color: rgba(0, 0, 0, 0.1);
}
.program-card h3 {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.5px;
text-transform: uppercase;
color: var(--white);
}
.program-card p {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--gray-light);
line-height: 1.7;
flex: 1;
}
.program-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.program-meta span {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--gray-light);
padding: 0.3rem 0.6rem;
border: 1px solid var(--gray);
}
.program-card--yellow .program-meta span {
border-color: rgba(0, 0, 0, 0.2);
}
.btn-yellow-sm {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
padding: 0.8rem 1.5rem;
background: var(--yellow);
color: var(--black);
display: inline-block;
transition: all 0.15s ease;
align-self: flex-start;
}
.btn-yellow-sm:hover {
background: var(--yellow-d);
}
.btn-black-sm {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
padding: 0.8rem 1.5rem;
background: var(--black);
color: var(--yellow);
border: 2px solid var(--black);
display: inline-block;
transition: all 0.15s ease;
align-self: flex-start;
}
.btn-black-sm:hover {
background: var(--black-mid);
}
/* ── Transform ── */
.transform-section {
padding: 7rem 4rem;
background: var(--black);
border-top: 3px solid var(--yellow);
border-bottom: 3px solid var(--yellow);
}
.transform-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.transform-text .section-tag {
margin-bottom: 1.5rem;
}
.transform-text h2 {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -2px;
text-transform: uppercase;
margin-bottom: 2rem;
}
.transform-text h2 em {
font-style: italic;
color: var(--yellow);
}
.result-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 3rem;
}
.result-list li {
font-family: var(--font-body);
font-size: 1rem;
color: var(--gray-light);
display: flex;
align-items: center;
gap: 0.8rem;
line-height: 1.5;
}
.check {
color: var(--yellow);
font-size: 1.1rem;
flex-shrink: 0;
}
.transform-visual {
display: flex;
align-items: center;
gap: 2rem;
}
.tv-box {
flex: 1;
aspect-ratio: 3 / 4;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2rem;
border: 2px solid var(--gray);
position: relative;
overflow: hidden;
}
.tv-box--before {
background: linear-gradient(160deg, #1a1a1a 0%, #222 100%);
}
.tv-box--after {
background: linear-gradient(160deg, #1a1a00 0%, #2a2a00 100%);
border-color: var(--yellow);
}
.tv-label {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gray-light);
}
.tv-box--after .tv-label {
color: var(--yellow);
}
.tv-week {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
color: var(--gray-mid);
align-self: flex-end;
}
.tv-box--after .tv-week {
color: var(--yellow);
}
.tv-arrow {
font-size: 2.5rem;
color: var(--yellow);
font-weight: 900;
flex-shrink: 0;
}
/* ── Testimonials ── */
.testimonials-section {
padding: 7rem 4rem;
background: var(--black-mid);
}
.testi-header {
margin-bottom: 4rem;
}
.testi-header h2 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -2px;
text-transform: uppercase;
margin-top: 1rem;
}
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--gray);
}
.testi-card {
background: var(--concrete);
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.testi-card--yellow {
background: var(--yellow);
}
.testi-quote {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.7;
color: var(--gray-light);
flex: 1;
}
.testi-card--yellow .testi-quote {
color: var(--black);
}
.testi-person {
display: flex;
align-items: center;
gap: 1rem;
}
.testi-avatar {
width: 44px;
height: 44px;
background: var(--gray);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 900;
color: var(--white);
flex-shrink: 0;
}
.testi-card--yellow .testi-avatar {
background: var(--black);
}
.testi-person > div {
flex: 1;
}
.testi-person strong {
display: block;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--white);
}
.testi-card--yellow .testi-person strong {
color: var(--black);
}
.testi-person span {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--gray-light);
}
.testi-card--yellow .testi-person span {
color: rgba(0, 0, 0, 0.5);
}
.testi-stars {
color: var(--yellow);
font-size: 0.8rem;
}
.testi-card--yellow .testi-stars {
color: var(--black);
}
/* ── Join ── */
.join-section {
padding: 8rem 4rem;
background: var(--yellow);
text-align: center;
}
.join-inner h2 {
font-family: var(--font-display);
font-size: clamp(4rem, 10vw, 9rem);
font-weight: 900;
line-height: 0.9;
letter-spacing: -4px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 1.5rem;
}
.join-inner h2 em {
font-style: italic;
color: var(--black-mid);
}
.join-inner p {
font-family: var(--font-body);
font-size: 1.1rem;
color: rgba(0, 0, 0, 0.6);
margin-bottom: 3rem;
}
.btn-giant {
font-size: 1.3rem !important;
padding: 1.5rem 4rem !important;
background: var(--black) !important;
color: var(--yellow) !important;
border: none !important;
}
.btn-giant:hover {
background: var(--black-mid) !important;
transform: translateY(-3px) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.programs-grid {
grid-template-columns: 1fr;
}
.program-card {
border-right: none;
border-bottom: 2px solid var(--gray);
}
.program-card:last-child {
border-bottom: none;
}
.transform-inner {
grid-template-columns: 1fr;
}
.transform-visual {
max-width: 400px;
}
}
@media (max-width: 768px) {
.nav {
padding: 1rem 1.5rem;
}
.nav-links {
display: none;
}
.hero {
padding: 6rem 2rem 4rem;
}
.hero-line {
font-size: clamp(3.5rem, 15vw, 7rem);
}
.programs-section {
padding: 5rem 2rem;
}
.stats-bar {
flex-wrap: wrap;
}
.stat-divider {
display: none;
}
.stat-item {
width: 50%;
border-bottom: 1px solid var(--gray);
}
.testi-grid {
grid-template-columns: 1fr;
}
.transform-section,
.testimonials-section {
padding: 5rem 2rem;
}
.join-section {
padding: 6rem 2rem;
}
.join-inner h2 {
font-size: clamp(3rem, 12vw, 7rem);
}
}
html.reduced-motion .ticker-track {
animation: none !important;
}
html.reduced-motion * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}if (!window.MotionPreference) {
const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
const __listeners = new Set();
const MotionPreference = {
prefersReducedMotion() {
return __mql.matches;
},
setOverride(value) {
const reduced = Boolean(value);
document.documentElement.classList.toggle("reduced-motion", reduced);
window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
for (const listener of __listeners) {
try {
listener({ reduced, override: reduced, systemReduced: __mql.matches });
} catch {}
}
},
onChange(listener) {
__listeners.add(listener);
try {
listener({
reduced: __mql.matches,
override: null,
systemReduced: __mql.matches,
});
} catch {}
return () => __listeners.delete(listener);
},
getState() {
return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
},
};
window.MotionPreference = MotionPreference;
}
function prefersReducedMotion() {
return window.MotionPreference.prefersReducedMotion();
}
function initDemoShell() {
// No-op shim in imported standalone snippets.
}
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger, SplitText);
initDemoShell({
title: "Fitness Brand — Brutalist",
category: "pages",
tech: ["gsap", "splittext", "scrolltrigger", "lenis"],
});
const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);
const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");
// ── Hero entrance — slammed in hard ─────────────────────
if (!reduced) {
gsap.set(".hero-tag", { opacity: 0, x: -30 });
const heroLines = document.querySelectorAll(".hero-line");
heroLines.forEach((line, i) => gsap.set(line, { opacity: 0, y: 80 + i * 20, skewY: 5 }));
gsap.set(".hero-sub", { opacity: 0, y: 20 });
gsap.set(".hero-ctas", { opacity: 0, y: 20 });
const tl = gsap.timeline({ defaults: { ease: "expo.out" } });
tl.to(".hero-tag", { opacity: 1, x: 0, duration: 0.6, delay: 0.3 })
.to(heroLines, { opacity: 1, y: 0, skewY: 0, duration: 0.7, stagger: 0.07 }, "-=0.3")
.to(".hero-sub", { opacity: 1, y: 0, duration: 0.6 }, "-=0.3")
.to(".hero-ctas", { opacity: 1, y: 0, duration: 0.5 }, "-=0.2");
}
// ── Stats Bar — scroll counters ──────────────────────────
document.querySelectorAll(".stat-big").forEach((el) => {
const target = parseFloat(el.dataset.target);
const suffix = el.dataset.suffix || "";
if (!reduced) {
ScrollTrigger.create({
trigger: ".stats-bar",
start: "top 80%",
end: "top 20%",
onUpdate: (self) => {
const val = target * self.progress;
el.textContent = (target % 1 !== 0 ? val.toFixed(0) : Math.round(val)) + suffix;
},
});
gsap.set(el, { opacity: 0, y: 30 });
gsap.to(el, {
opacity: 1,
y: 0,
duration: 0.8,
ease: "expo.out",
scrollTrigger: {
trigger: ".stats-bar",
start: "top 80%",
toggleActions: "play none none reverse",
},
});
} else {
el.textContent = target + suffix;
}
});
// ── Programs — hard entrance ─────────────────────────────
if (!reduced) {
const hSplit = new SplitText(".programs-header h2", { type: "lines" });
gsap.set(hSplit.lines, { opacity: 0, y: 50 });
gsap.to(hSplit.lines, {
opacity: 1,
y: 0,
duration: 0.8,
stagger: 0.1,
ease: "expo.out",
scrollTrigger: {
trigger: ".programs-header",
start: "top 70%",
toggleActions: "play none none reverse",
},
});
document.querySelectorAll(".program-card").forEach((card, i) => {
gsap.set(card, { opacity: 0, y: 60 });
gsap.to(card, {
opacity: 1,
y: 0,
duration: 0.7,
ease: "expo.out",
delay: i * 0.1,
scrollTrigger: {
trigger: ".programs-grid",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
});
}
// ── Transform section ────────────────────────────────────
if (!reduced) {
const tSplit = new SplitText(".transform-text h2", { type: "lines" });
gsap.set(tSplit.lines, { opacity: 0, x: -40 });
gsap.to(tSplit.lines, {
opacity: 1,
x: 0,
duration: 0.8,
stagger: 0.1,
ease: "expo.out",
scrollTrigger: {
trigger: ".transform-section",
start: "top 65%",
toggleActions: "play none none reverse",
},
});
gsap.set(".result-list li", { opacity: 0, x: -20 });
gsap.to(".result-list li", {
opacity: 1,
x: 0,
duration: 0.5,
stagger: 0.1,
ease: "expo.out",
scrollTrigger: {
trigger: ".result-list",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
gsap.set([".tv-box--before", ".tv-arrow", ".tv-box--after"], { opacity: 0, scale: 0.85 });
gsap.to([".tv-box--before", ".tv-arrow", ".tv-box--after"], {
opacity: 1,
scale: 1,
duration: 0.7,
stagger: 0.15,
ease: "back.out(1.4)",
scrollTrigger: {
trigger: ".transform-visual",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
}
// ── Testimonials ─────────────────────────────────────────
if (!reduced) {
document.querySelectorAll(".testi-card").forEach((card, i) => {
gsap.set(card, { opacity: 0, y: 40 });
gsap.to(card, {
opacity: 1,
y: 0,
duration: 0.7,
delay: i * 0.1,
ease: "expo.out",
scrollTrigger: {
trigger: ".testi-grid",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
});
}
// ── CTA join — big slam ──────────────────────────────────
if (!reduced) {
const jSplit = new SplitText(".join-inner h2", { type: "lines" });
gsap.set(jSplit.lines, { opacity: 0, y: 80 });
gsap.to(jSplit.lines, {
opacity: 1,
y: 0,
duration: 1,
stagger: 0.1,
ease: "expo.out",
scrollTrigger: {
trigger: ".join-section",
start: "top 70%",
toggleActions: "play none none reverse",
},
});
gsap.set(".join-inner p, .btn-giant", { opacity: 0, y: 25 });
gsap.to(".join-inner p, .btn-giant", {
opacity: 1,
y: 0,
duration: 0.7,
stagger: 0.15,
ease: "expo.out",
scrollTrigger: {
trigger: ".join-section",
start: "top 60%",
toggleActions: "play none none reverse",
},
});
}
// ── Motion preference ────────────────────────────────────
window.addEventListener("motion-preference", (e) => {
gsap.globalTimeline.paused(e.detail.reduced);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRONFORM — Train Harder</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,700;1,900&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script type="importmap">{"imports":{"gsap":"https://esm.sh/[email protected]","gsap/ScrollTrigger":"https://esm.sh/[email protected]/ScrollTrigger","gsap/SplitText":"https://esm.sh/[email protected]/SplitText","gsap/Flip":"https://esm.sh/[email protected]/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/[email protected]/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/[email protected]/TextPlugin","gsap/all":"https://esm.sh/[email protected]/all","gsap/":"https://esm.sh/[email protected]/","lenis":"https://esm.sh/[email protected]/dist/lenis.mjs","three":"https://esm.sh/[email protected]","three/addons/":"https://esm.sh/[email protected]/examples/jsm/"}}</script>
<style>html.lenis,
html.lenis body {
height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.lenis.lenis-autoToggle {
transition-property: overflow;
transition-duration: 1ms;
transition-behavior: allow-discrete;
}</style>
</head>
<body>
<!-- Nav -->
<nav class="nav">
<div class="nav-logo">IRON<span>FORM</span></div>
<ul class="nav-links">
<li><a href="#programs">Programs</a></li>
<li><a href="#stats">Results</a></li>
<li><a href="#join">Join</a></li>
</ul>
<a href="#join" class="nav-cta">START NOW</a>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-bg" aria-hidden="true">
<div class="hero-stripe hero-stripe--1"></div>
<div class="hero-stripe hero-stripe--2"></div>
</div>
<div class="hero-content">
<div class="hero-tag">EST. 2018 · THE GYM THAT GETS RESULTS</div>
<h1 class="hero-title">
<span class="hero-line">NO</span>
<span class="hero-line hero-line--yellow">EXCUSES.</span>
<span class="hero-line">JUST</span>
<span class="hero-line hero-line--outline">RESULTS.</span>
</h1>
<p class="hero-sub">Elite strength and conditioning. 12-week transformation programs. Coaches who've been there.</p>
<div class="hero-ctas">
<a href="#join" class="btn-yellow">GET STARTED — FREE WEEK</a>
<a href="#stats" class="btn-border-white">SEE THE RESULTS</a>
</div>
</div>
<div class="hero-ticker" aria-hidden="true">
<div class="ticker-track">
<span>STRENGTH</span><span>·</span>
<span>CONDITIONING</span><span>·</span>
<span>ENDURANCE</span><span>·</span>
<span>MOBILITY</span><span>·</span>
<span>MINDSET</span><span>·</span>
<span>STRENGTH</span><span>·</span>
<span>CONDITIONING</span><span>·</span>
<span>ENDURANCE</span><span>·</span>
<span>MOBILITY</span><span>·</span>
<span>MINDSET</span><span>·</span>
</div>
</div>
</section>
<!-- Stats Bar -->
<section class="stats-bar" id="stats">
<div class="stat-item">
<span class="stat-big" data-target="4200">0</span>
<span class="stat-sub">Members</span>
</div>
<div class="stat-divider" aria-hidden="true"></div>
<div class="stat-item">
<span class="stat-big" data-target="94" data-suffix="%">0</span>
<span class="stat-sub">Hit Their Goal</span>
</div>
<div class="stat-divider" aria-hidden="true"></div>
<div class="stat-item">
<span class="stat-big" data-target="12" data-suffix=" WKS">0</span>
<span class="stat-sub">Transform</span>
</div>
<div class="stat-divider" aria-hidden="true"></div>
<div class="stat-item">
<span class="stat-big" data-target="5">0</span>
<span class="stat-sub">Locations</span>
</div>
</section>
<!-- Programs -->
<section class="programs-section" id="programs">
<div class="programs-header">
<span class="section-tag">WHAT WE OFFER</span>
<h2>Pick your<br><em>weapon.</em></h2>
</div>
<div class="programs-grid">
<div class="program-card program-card--dark">
<div class="program-num">01</div>
<h3>POWERLIFTING</h3>
<p>Squat. Bench. Deadlift. We build absolute strength from the ground up. 3x per week, 12 weeks.</p>
<div class="program-meta">
<span>3×/week</span>
<span>All levels</span>
<span>From €89/mo</span>
</div>
<a href="#join" class="btn-yellow-sm">JOIN →</a>
</div>
<div class="program-card program-card--yellow">
<div class="program-num">02</div>
<h3>HIIT BURN</h3>
<p>High-intensity intervals. Maximum calorie burn. Minimum time wasted. 45 min sessions.</p>
<div class="program-meta">
<span>5×/week</span>
<span>Intermediate</span>
<span>From €79/mo</span>
</div>
<a href="#join" class="btn-black-sm">JOIN →</a>
</div>
<div class="program-card program-card--dark">
<div class="program-num">03</div>
<h3>ATHLETE BUILD</h3>
<p>Sport-specific conditioning for competitive athletes. Periodized programming. Peak performance.</p>
<div class="program-meta">
<span>4×/week</span>
<span>Advanced</span>
<span>From €119/mo</span>
</div>
<a href="#join" class="btn-yellow-sm">JOIN →</a>
</div>
</div>
</section>
<!-- Transformation -->
<section class="transform-section">
<div class="transform-inner">
<div class="transform-text">
<span class="section-tag">12-WEEK PROGRAM</span>
<h2>The results <br>speak for <br><em>themselves.</em></h2>
<ul class="result-list">
<li><span class="check">✓</span> Average 8.2kg fat loss in 12 weeks</li>
<li><span class="check">✓</span> 20% increase in functional strength</li>
<li><span class="check">✓</span> Improved VO2 max by 15%</li>
<li><span class="check">✓</span> Personal coaching + nutrition plan</li>
</ul>
<a href="#join" class="btn-yellow">START YOUR 12 WEEKS</a>
</div>
<div class="transform-visual" aria-hidden="true">
<div class="tv-box tv-box--before">
<div class="tv-label">BEFORE</div>
<div class="tv-week">Week 1</div>
</div>
<div class="tv-arrow">→</div>
<div class="tv-box tv-box--after">
<div class="tv-label">AFTER</div>
<div class="tv-week">Week 12</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials-section">
<div class="testi-header">
<span class="section-tag">REAL PEOPLE · REAL RESULTS</span>
<h2>They did it.<br>Now it's your turn.</h2>
</div>
<div class="testi-grid">
<div class="testi-card">
<div class="testi-quote">"Lost 14kg in 12 weeks. I've tried everything. IRONFORM is the only thing that worked."</div>
<div class="testi-person">
<div class="testi-avatar" style="--hue: 30">MK</div>
<div>
<strong>Marcus K.</strong>
<span>Member since 2023</span>
</div>
<div class="testi-stars">★★★★★</div>
</div>
</div>
<div class="testi-card testi-card--yellow">
<div class="testi-quote">"Hit a 180kg deadlift PR after the powerlifting program. Coaches actually know what they're doing."</div>
<div class="testi-person">
<div class="testi-avatar" style="--hue: 200">SL</div>
<div>
<strong>Sofia L.</strong>
<span>Member since 2022</span>
</div>
<div class="testi-stars">★★★★★</div>
</div>
</div>
<div class="testi-card">
<div class="testi-quote">"Competed in my first triathlon after 6 months. The conditioning program is on another level."</div>
<div class="testi-person">
<div class="testi-avatar" style="--hue: 100">DV</div>
<div>
<strong>David V.</strong>
<span>Member since 2024</span>
</div>
<div class="testi-stars">★★★★★</div>
</div>
</div>
</div>
</section>
<!-- CTA Join -->
<section class="join-section" id="join">
<div class="join-inner">
<h2>STOP <em>WAITING.</em><br>START TODAY.</h2>
<p>First week free. No contracts. Cancel anytime.</p>
<a href="#" class="btn-yellow btn-giant">CLAIM FREE WEEK →</a>
</div>
</section>
<script type="module" src="script.js"></script>
</body>
</html>Fitness Brand
High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.
Source
- Repository:
libs-genclaude - Original demo id:
45-fitness-brand
Notes
High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.