Free group fitness website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: highkick.md, data: highkick.json

Group fitness website template: first screen on a phone

About this group fitness website template

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.

At a glance, October 2026. 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.

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 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.

Good for:

Group fitness, aerobics or dance studioBoxing, spin, yoga or pilates studio with a class timetableRoller rink, party venue or leisure centre with passes and eventsAny brand that wants a loud, friendly retro look with stickers

Turn the group fitness website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

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

Prompt for the agent:

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.

In a terminal

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.

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.

Group fitness website design and motion

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 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.

Every value of this group fitness website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the group fitness website page

Navigation
Wordmark, five links in a pill, a free-class button; a round menu button and full-screen menu on small screens
The bar slides away on a downward scroll past 120px and returns on any upward scroll.
Sweat like it’s 1986
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
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.
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
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
A held screen where an orange sun rides an intensity curve while four phases light up
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
Facts about the studio room beside a pile of five tilted photos
The five photos fly in from alternating sides, tilted, and settle into a pile as it scrolls toward the middle.
Your coaches
A held screen where four coach cards roll past sideways with striped suns
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
A seven-day timetable of class slots with times and coaches
Each day's slots stamp in one after another with a small overshoot and tilt as the column comes into view.
Rewind Fridays
The monthly Rewind Friday night: a wordmark that glides in with colour ghosts and rewinds away, two photos and the event facts
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
Three passes drawn as tickets with a stub, a price, a description and a button, and a first-class-free note
The three tickets stamp in one after another, the heading rises and two stickers turn as they scroll past.
The regulars
Five member quotes on cards that stand up from a flat board
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
Free-class form on the left, three info cards on the right
The three info cards stamp in once as they reach the lower part of the screen.
Footer
A giant wordmark, three columns and a base line
One sticker turns and drifts while the footer scrolls past.

Before you publish the group fitness website site

Replace social preview image, favicon, contact form (sends nothing yet), phone number, email address and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this group fitness website template

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 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 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: 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.

Not a group fitness website? More free templates