# Free group fitness website template

> Free HTML group fitness website template for dance, boxing and skate studios, with a timetable and passes. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Group fitness website template: one free HTML file for a studio that sells classes, a weekly timetable and passes, with a seven-class list, a fifty-minute class arc, four coach cards, a monthly roller night and a free-class form. The look is retro 80s, with pastel grounds, striped suns and spinning stickers. AGENTS.md lets Claude Code or Cursor adapt it.

- Page: https://8b.com/templates/highkick/
- Live demo: https://8b.com/templates/highkick/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/highkick/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/group-fitness-website-template
- Download ZIP: https://8b.com/templates/highkick/group-fitness-website-template.zip
- Template name in the repository: Highkick
- At a glance: One 102 KB index.html with its CSS and JavaScript inside, 12 sections, 21 Unsplash photos credited in CREDITS.md, Mozilla Headline, Onest and Pliant from Google Fonts, GSAP 3.13.0 (ScrollTrigger, MotionPath); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## 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/group-fitness-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/group-fitness-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/group-fitness-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/group-fitness-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my studio: name, city, address, classes with lengths and levels, weekly timetable with coaches, pass prices and rules, a monthly event, desk hours, how members book>. Replace first the brand name, classes, timetable, passes, coaches and member quotes. Keep the section ids and the classes AGENTS.md lists, and set --len on the big event word and the footer wordmark to each new word's length. Ask me for missing facts and never invent prices, hours, addresses, coaches, reviews or contacts.
```

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/group-fitness-website-template my-site`.

### Group fitness website design prompt for any AI tool

Use this to build a group fitness studio site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions; with the template itself, the short prompt above is enough.

```text
Build a one-page website for a group fitness studio that sells classes, a weekly timetable and passes, for people who want to try a class free. Sections in order: navigation, opening, classes, a fifty-minute class arc, the room, coaches, week timetable, a monthly event word, passes, member quotes, free-class form, footer. Type: Mozilla Headline 700 uppercase for headings, Pliant 900 italic for the wordmark and prices, Onest for body and buttons. Colours: #f3f3f2 page, #111014 text, borders and dark sections, #e7d9ea lilac grounds, #eda2cf pink grounds, #d8df3d lime buttons and highlights, #f2913e orange suns. Style: retro 80s pastels with two-pixel black borders, flat offset shadows, photos and cards tilted a few degrees, striped suns and spinning stickers. Avoid a purple gradient, three identical icon cards and a centred hero with two buttons. One motion idea: a lime curve that draws itself while a dot rides along it as the four phases light up; respect prefers-reduced-motion. Copy is short and concrete. Ask me for class names, lengths, timetable, coaches, pass prices, hours and address; never invent them, leave marked placeholders and list them. One primary action, Book a free class, repeated in the nav, the timetable and the passes. Check at 390 px, tap targets 44 px, visible keyboard focus and no console errors.
```

## About

A boxing, dance, spin, step or roller studio can use this as a fitness studio website template, and so can a leisure centre that sells classes and passes. Anyone shopping for gym website templates or a gym template website gets one section per question: which classes, how a class is shaped, when they run, what a pass costs and how to try one free. A gym built around machines needs more pages.

As a group fitness website template for Claude Code, Cursor or Codex, the agent needs the facts first: class names and lengths, the weekly timetable, pass prices, coach names, desk hours, address and how members book. Replace those and the brand name, then set --len on the event word and the footer wordmark. The timetable line says twenty-four classes while the columns hold 22, so fix the line. If you vibe code it, never invent prices or dates.

Choose it for a studio with a big personality and a short list of classes. A gym or coaching club that wants a calm, measured look is closer to the [training club](https://8b.com/templates/arcline/) template. A personal trainer website template wants one coach and no timetable, so this is heavier than needed. Every Book button jumps to the form, which sends nothing until you connect a service. Without code, 8B's builder makes a new site from a sentence.

## Design

- Palette: #f3f3f2 (page background, upper half of the opening, the gridded timetable ground and the contact section), #111014 (text, every border and offset shadow, and the near-black ground of the arc and Rewind sections), #e7d9ea (lilac ground of the classes, coaches and passes sections, the quote board and the second opening screen's dusk), #eda2cf (pink ground of the room, quotes and footer, the opening floor, the phone menu and the button hover stripes), #f2913e (orange in the striped suns, the dot that rides the arc, three disc and arc stickers, the triangle sticker's gradient and a ghost behind the Rewind word), #d8df3d (lime: default button fill, class band, badges, highlighted cards, the curve and the headings on near-black grounds), #84ade0 (blue cards, two arc stickers, the footer wordmark's second shadow and a ghost behind the Rewind word), #0b8f6c (green, the fill of the zigzag sticker in the passes section), #ffffff (nav pill, photo frames, form fields, white cards and text on the near-black sections)
- Fonts: Mozilla Headline (weight 700 at 75% width, uppercase: the h1, section headings, class names, day names and menu links), Pliant (weight 900 italic at 125% width, uppercase: the nav wordmark, the Rewind word, pass prices and the footer wordmark), Onest (body text at 400, lead paragraphs at 500, and tracked uppercase labels and buttons at 600 and 700)

A centred headline splits around a tilted portrait on the first screen. Grounds then alternate between lilac, pink and pale grey, with two near-black sections. Uppercase display type runs up to 170px. Content sits in rows and grids: seven class rows with the name in the middle, seven day columns on wide screens, three tilted pass tickets and a six-column quote board. Photos and cards tilt a few degrees, and inline SVG stickers repeat in the margins.

This gym web design is hard-edged but soft in colour: cards, photos and buttons carry a [two-pixel border](https://8b.com/templates/brutalist/) and a flat offset shadow, and button fills rise as pink stripes on hover. The arc and the monthly night go near-black, so lime headings and the sun stand out.

## Sections and motion

- **Navigation** (navigation): wordmark, five links in a pill, a free-class button; a round menu button and full-screen menu on small screens. Motion: The bar slides away on a downward scroll past 120px and returns on any upward scroll.
- **Sweat like it’s 1986** (opening): two screens: a jumping photo between the halves of the h1 "Sweat like it's 1986" with stickers, then a sunset floor with a three-line promise and two snapshots. Motion: On load the headline halves slide in, the photo tilts into place and the stickers pop in and then bob; over about one screen of scrolling, without pinning, the halves part, the photo sinks and turns until it sets behind the sunset floor, the striped sun rises and the promise lines and snapshots slide in.
- **Seven classes. Pick your noise.** (classes): seven classes as a list of big names where the row in the middle of the screen is lit with a lime band, a photo and details. Motion: The row nearest the middle of the screen lights up: a lime band wipes in behind its name, the photo pops up at a tilt and the details slide across.
- **The fifty-minute arc** (arc): a held screen where an orange sun rides an intensity curve while four phases light up. Motion: Pinned for about one and a half screens: the lime curve draws itself, the orange dot rides along it and the four phase blocks light up in turn.
- **One big loud room** (room): facts about the studio room beside a pile of five tilted photos. Motion: The five photos fly in from alternating sides, tilted, and settle into a pile as it scrolls toward the middle.
- **Your coaches** (coaches): a held screen where four coach cards roll past sideways with striped suns. Motion: Pinned while the heading and four coach cards slide sideways; each striped sun rolls round and each portrait swings into place as its card arrives.
- **This week on the floor** (week): a seven-day timetable of class slots with times and coaches. Motion: Each day's slots stamp in one after another with a small overshoot and tilt as the column comes into view.
- **Rewind Fridays** (rewind): the monthly Rewind Friday night: a wordmark that glides in with colour ghosts and rewinds away, two photos and the event facts. Motion: The Rewind word glides in from the right with coloured ghosts trailing it, settles with a pink offset, then slides off to the left while the two photos drift in opposite directions.
- **Pay your way** (passes): three passes drawn as tickets with a stub, a price, a description and a button, and a first-class-free note. Motion: The three tickets stamp in one after another, the heading rises and two stickers turn as they scroll past.
- **The regulars** (regulars): five member quotes on cards that stand up from a flat board. Motion: The quote board stands up from a steep backward tilt while the five cards pop up one after another.
- **Your first class is on us** (contact): free-class form on the left, three info cards on the right. Motion: The three info cards stamp in once as they reach the lower part of the screen.
- **Footer** (footer): a giant wordmark, three columns and a base line. Motion: One sticker turns and drifts while the footer scrolls past.

## Good for

- group fitness, aerobics or dance studio
- boxing, spin, yoga or pilates studio with a class timetable
- roller rink, party venue or leisure centre with passes and events
- any brand that wants a loud, friendly retro look with stickers

## Questions

**Is this a free gym website template I can use for a client's studio?** Yes. It is one index.html under the MIT license. GSAP, ScrollTrigger, MotionPath and Lenis load from jsDelivr, the fonts are Google Fonts under the Open Font License, and there is no build step. The 21 photos are Unsplash images; CREDITS.md lists them. Hosting it from [a repository on GitHub Pages](https://8b.com/templates/github/) costs nothing.

**Does the class timetable take bookings?** No. The timetable is 22 slots in seven day columns, and the Book buttons jump to the free-class form, which shows a thank-you line and sends nothing. Connect Formspree or Netlify Forms, or point the buttons at your booking system such as Mindbody, Glofox or Momence.

**How do I hand it to Claude Code, Cursor or Codex?** Save index.html and AGENTS.md into an empty folder with the curl lines in AGENTS.md, and have the agent read AGENTS.md first. Give it the files, not the page address, then paste the short prompt above, filled in. Without the template, use the group fitness website design prompt below; Lovable builds its own code from it, as [working in Lovable](https://8b.com/templates/for-lovable/) explains.

**Which parts break if I change them?** Keep every id and the data-8b-section, data-8b-motion and data-8b-part attributes, and the classes AGENTS.md lists for each script. Set --len on the Rewind word and the footer wordmark to each word's character count. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

**What happens on a phone, with reduced motion or without JavaScript?** Below 960px the nav links move into a round menu button. With reduced motion, smooth scrolling and the entrance and scroll animations are off and the lime class band is never drawn, but the page reads in full. Without JavaScript the menu cannot open and the form shows no thank-you line.

**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/): describe the studio in a sentence and its engine designs a new site, not this one. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs in Claude and ChatGPT.

## Before publishing

Replace: social preview image, favicon, contact form (sends nothing yet), phone number, email address and social media links, plus the invented demo facts (prices, dates, addresses).

- Free class button in the top bar, Book a free class (opening), Book a class (timetable and drop-in), Get the ten-pack, Go unlimited and Get on the list buttons lead to #contact, the free-class form near the end of the page now; point them to your booking or membership page (Mindbody, Glofox, Momence) if you use one, or keep #contact once the form is connected.
- See the timetable button in the opening, See the passes link in the timetable lead to #week and #passes now; point them to keep them.
- Phone and email links in the contact section and footer lead to a tel: link and a mailto: link to the demo values now; point them to your studio's phone as tel:+44... and your email.
- Instagram and TikTok links in the footer lead to the instagram.com and tiktok.com home pages now; point them to your profile addresses.
- Book my free class button in the contact form lead to validates the form, shows a thank-you line and resets it; nothing is sent now; point them to a form service (Formspree, Netlify Forms) or your booking system.
- GSAP, ScrollTrigger, MotionPath and Lenis load as four separate jsDelivr scripts at the end of body, without defer; the motion scripts after them need them, and if the CDN fails the page stays static.
- The free-class form sends nothing: the button only shows the thank-you line, so connect a form service or your booking system before publishing.
- The coaches row is pinned while it slides sideways on every screen size, and on a phone the cards are 74% of the screen width, so the pinned scroll is long; the arc screen is pinned for a screen and a half.
- The timetable line says twenty-four classes while the columns hold 22, and the Rewind date is fixed text; both need your own numbers.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).