Free fitness website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/fitness-website-template · Live demo: 8bsite.github.io/fitness-website-template/ · MIT license

Arcline template: first screen on a phone

About this template

Arcline is a fitness website template for a performance club with a test lab, coaches, a weekly class schedule and three membership plans. It suits a personal trainer with a coaching studio as well as a fitness center, a gym or a multi-sport club.

A one-page site for a performance training club with its own test lab, covering running, cycling, swimming, court sports and strength. Every section is a framed slide floating on a cold blue-grey mist: headings streak in and out like sprinters, tiles are dealt from a deck, a lens opens on the lab photo and the week's schedule runs sideways as you scroll.

Good for:

Gym, fitness or training clubRunning, cycling or triathlon coachingPersonal trainer or coaching studio with membership plansSports performance lab or physio clinicMulti-sport club with a weekly class schedule

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation.

How to use the fitness website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/fitness-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/fitness-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/fitness-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/fitness-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your gym, club or coaching business: what you train, where, coaches, schedule, prices, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, coaches, schedule, prices, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/fitness-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Fitness website design and motion

Palette

#dbe4ec misty page background#9db1c4 blue-grey mist, rules, rings#ffffff white slides#1a2333 navy slides#0b1019 text and dark buttons#536477 slate secondary text#edf2f6 pale panels and fields

Fonts

Geist: all text: medium-weight headings set very large with tight negative tracking

Every section is a framed slide with corner crosshairs and a soft shadow, floating on a fixed blue-grey mist crossed by thin circles. White, navy and pale slides alternate and step left or right. Photos are desaturated, round photo chips sit inside heading lines and pale spheres act as ornaments.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Top bar: wordmark, a short tagline, section links, Book a test button; phone menu overlay
Faster than your own shadow
Two-screen opening: a navy cover slide with a photo and a three-line stepped headline, then a pale manifesto slide (demo: racket photo, "Only forward®")
Smooth scrolling throughout. While the cover holds, its headline lines streak off sideways and the slide shrinks and darkens; the next heading streaks in.
Tested Monday. Faster by spring
How it works: three numbered steps beside a big heading with round photos set into its lines (demo: Test, Train, Transfer)
Tied to scroll, three round photos roll into gaps in the heading, pushing the next words into place.
Breathe. Move. Repeat.
A three-word line over a collage of tiles, one per activity, plus a link tile (demo: strength, running, cycling, swimming, gait fitting, court sports)
Tied to scroll, the tiles start as a tilted pile in the middle and are dealt out to their places.
Coached by people who still race
Four coach portraits of different heights with names and roles
Two rings draw and turn with scroll, and each portrait comes into focus from a slight zoom.
What the lab sees
A feature block: text on the left, a round photo ringed by four labelled measures on the right (demo: test lab, VO₂ max, threshold)
Tied to scroll, a round lens opens on the lab photo from a dot and four measures swing around it.
A week at Arcline
Weekly schedule: seven day cards in a row that runs sideways as you scroll, with a progress line
Pinned, the seven day cards run sideways as you scroll, leaning into faster scrolls, while a progress line fills.
Members, retested
Testimonials: one large quote with a round portrait in its first line and two short quotes
The large quote streaks in from the left, its round portrait sharpens and the two short quotes rise in.
Recovery is part of the rep
A stepped heading, a lead and four services in two columns, beside a window of sky over calm water (demo: recovery suite)
Tied to scroll, a pale sun sinks into the window, the sky cools to blue and the water settles.
Membership
Pricing: three plans in ruled columns, the middle one highlighted
Rings draw and turn with scroll, the heading streaks in and the three plans rise one after another.
Before your first test
Questions and answers (native <details>) beside a rail with a rolling ball
Tied to scroll, a ball rolls down the rail beside the questions, turning as it travels.
Book your first test
Booking: a heading on a line across the slide, address, hours, phone, email and a short form (placeholders)
Tied to scroll, the heading slides along its line to the right while the line stretches to full width.
Footer
Width-filling wordmark, a line about the club, links, socials, copyright and the Design: 8B credit
The width-filling wordmark streaks in from the left, skewed and stretched, as the footer comes into view.

What is inside

Files: index.html (90 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Geist from Google Fonts (SIL Open Font License)
Photos: 25 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Book a test buttons in the nav, the phone menu and the first screen, and "Book a lab test" in lab lead to #contact now; point them to your booking page, or keep #contact if the form takes bookings.
Start Base / Start Build / Start Peak in membership lead to #contact now; point them to the sign-up or checkout URL of each plan.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
On phones the last tiles of the disciplines deck travel to places below the screen, so part of their path is out of view.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this fitness website template

Is the weekly schedule easy to change?

Yes. Each day is a plain HTML card with a session, time and place, a note and a photo. Add or remove cards and the sideways scroll adjusts its length.

Does the booking form work out of the box?

It checks the name and email and shows a confirmation line, but sends nothing until you connect a form service such as Formspree or Netlify Forms.