# Arcline, a free fitness website template > Website for a fitness or sports training club with coaches, a weekly schedule and membership plans. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). 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. - Page: https://8b.com/templates/arcline/ - Live demo: https://8bsite.github.io/fitness-website-template/ - Repository (GitHub template): https://github.com/8bsite/fitness-website-template - Download ZIP: https://github.com/8bsite/fitness-website-template/archive/refs/heads/main.zip - Size: 90 KB, 25 photos (Unsplash), fonts: Geist - Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash 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: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a site for . 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. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/fitness-website-template my-site`. ## Design 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. - 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. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, a short tagline, section links, Book a test button; phone menu overlay - **Faster than your own shadow** (opening): 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®"). Motion: 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** (method): how it works: three numbered steps beside a big heading with round photos set into its lines (demo: Test, Train, Transfer). Motion: Tied to scroll, three round photos roll into gaps in the heading, pushing the next words into place. - **Breathe. Move. Repeat.** (disciplines): 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). Motion: 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** (coaches): four coach portraits of different heights with names and roles. Motion: Two rings draw and turn with scroll, and each portrait comes into focus from a slight zoom. - **What the lab sees** (lab): a feature block: text on the left, a round photo ringed by four labelled measures on the right (demo: test lab, VO₂ max, threshold). Motion: Tied to scroll, a round lens opens on the lab photo from a dot and four measures swing around it. - **A week at Arcline** (week): weekly schedule: seven day cards in a row that runs sideways as you scroll, with a progress line. Motion: Pinned, the seven day cards run sideways as you scroll, leaning into faster scrolls, while a progress line fills. - **Members, retested** (stories): testimonials: one large quote with a round portrait in its first line and two short quotes. Motion: 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** (recovery): a stepped heading, a lead and four services in two columns, beside a window of sky over calm water (demo: recovery suite). Motion: Tied to scroll, a pale sun sinks into the window, the sky cools to blue and the water settles. - **Membership** (membership): pricing: three plans in ruled columns, the middle one highlighted. Motion: Rings draw and turn with scroll, the heading streaks in and the three plans rise one after another. - **Before your first test** (faq): questions and answers (native
) beside a rail with a rolling ball. Motion: Tied to scroll, a ball rolls down the rail beside the questions, turning as it travels. - **Book your first test** (contact): booking: a heading on a line across the slide, address, hours, phone, email and a short form (placeholders). Motion: Tied to scroll, the heading slides along its line to the right while the line stretches to full width. - **Footer** (footer): width-filling wordmark, a line about the club, links, socials, copyright and the Design: 8B credit. Motion: The width-filling wordmark streaks in from the left, skewed and stretched, as the footer comes into view. ## Good for - gym, fitness or training club - running, cycling or triathlon coaching - personal trainer or coaching studio with membership plans - sports performance lab or physio clinic - multi-sport club with a weekly class schedule ## Questions **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. ## Before publishing Replace: 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). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.