Free pilates studio 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: hundred.md, data: hundred.json

Pilates studio website template: first screen on a phone

About this pilates studio website template

Pilates studio website template: a free one-page HTML site for a reformer studio, with four class formats, a fifty-minute class plan, teacher cards, a seven-day timetable, three prices and an enquiry form. Coral headings, deep coral panels and a cream sheet sit inside a bright coral frame. One index.html with AGENTS.md lets Claude Code, Cursor or Codex adapt it.

At a glance, October 2026. One 83 KB index.html with its CSS and JavaScript inside, 12 sections, 21 Unsplash photos credited in CREDITS.md, Golos Text from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

Pilates studio websites are read by beginners deciding on a first class, so this one shows the apparatus, a whole class in six timed blocks, the teachers, who else comes, the room, the week and the prices. It suits a reformer studio, a mat teacher or the group classes of a physio practice. Among pilates website templates it is specific about springs, carriages and towers, and yoga websites can reuse its order.

When vibe coding in Claude Code, start with the four formats (length, level, class size), the teachers, the 24 timetable chips, the three prices and the form's class menu, which repeats the format names. Filled chips (m-surface-2) mark Reformer classes, as the line above the week says: change both together. Keep the section ids, the classes AGENTS.md lists and the data-from and data-to that time each class plan block's fill. Teacher training, cancelling rules and promises about backs, pregnancy or bone strength must come from the owner.

Choose it when a studio sells small classes by the place and wants beginners to see a whole class first. A gym with coached blocks and monthly tiers belongs on the training club template, and a wellness studio website with treatments needs other sections. It is a narrow fitness studio website template, and its two corals are loud for quiet yoga web design. The weak spot is booking: the form sends nothing yet, and the hand-typed week never syncs with Mindbody or Momence.

Good for:

Reformer Pilates studioMat Pilates, yoga or barre studioPhysiotherapy clinic or boutique fitness studio with group classes and a weekly timetableAny class-based studio that wants a warm, bold look: a coral frame, a cream sheet and heavy type

Turn the pilates studio 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/pilates-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/pilates-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/pilates-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/pilates-studio-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Adapt it to <my studio: name, address, class formats, teachers, timetable, prices, booking terms, hours, contacts, legal name>. Replace the studio name, Leith address, teachers, timetable and prices first. The opening heading, lead and first class plan block name a Pilates warm-up sharing the demo's name: keep or rewrite them deliberately. Keep the section ids, the classes AGENTS.md lists and each class plan block's data-from and data-to. Ask me for missing facts; never invent prices, hours, addresses, teacher training, health claims or contacts.

In a terminal

npx degit 8bsite/pilates-studio-website-template my-site

Pilates studio website design and motion

Palette

#f6f4e9 cream sheet under the page, the fixed bar and the phone menu; text on deep coral; the cream buttons in the opening and on the middle price card#ef573b bright coral frame round the sheet; section headings, class, plan, teacher and day names, prices; card outlines, glyphs, hairlines and form underlines#c3331c deep coral opening and footer panels, the carriage and every filled card or chip, buttons, links, rule lead-ins, meta lines, form labels, the minute rail's dot and fill#6b665e warm grey body text, the six rules paragraph, the address and hours in contact, and typed form text

Fonts

Golos Text: the only typeface, a variable font from weight 400 to 800: 760 to 800 headings, class names and prices with tight negative letter spacing; 700 card titles and day labels; 600 buttons, form labels and coral lead-ins; 400 to 500 body, lead and small meta text

A bright coral frame runs round one cream sheet, topped by the fixed cream bar; the footer is a deep coral panel below it. Most sections pair a heading on the left with a short paragraph on the right, and hairlines divide several. Outlined or filled cards with 14 px corners hold the class rails, class plan blocks, teachers, timetable chips and prices. Four glyphs, one per class format, mark the teacher cards and two class plan blocks.

This pilates website design keeps black out of type and panels: section headings are bright coral, body text warm grey, and deep coral with cream type marks the opening, the footer and filled states such as the Reformer chips. Buttons fill from the left on hover.

Every value of this pilates studio 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 pilates studio website page

Navigation
Cream top bar inside the coral frame: wordmark, five section links, Book a class button; hides on scroll down; full-screen menu on phones
The bar slides up out of view while you scroll down and comes back on the way up or when a link in it gets focus, and Lenis smooth scrolling runs page-wide.
Every class opens with the Hundred.
Deep coral first screen: large heading, a lead paragraph, a booking button with the first-class prices, and a tall reformer photo
On load the heading, the lead and the button row rise 26 px into place with a fade, a beat apart, and the tall photo opens from a thin band across its middle to full height.
Four ways onto the apparatus
Four class formats as full-width rounded rails: big name, description, length, level and class size, and a photo (demo: Reformer, Tower, Mat, Ring)
A deep coral carriage the size of one rail travels down the four rails with the scroll, resting on whichever rail is at the middle of the screen and turning its text cream.
Six rules we teach by
Six teaching rules as one large paragraph, each rule's name a coral lead-in
The heading and the paragraph of six rules rise and fade in as they reach the screen.
Fifty minutes, in order
One class in order: six blocks on a pinned track under a minute rail from 0 to 50 (demo: warm-up, legs, arms, centre, length, release)
Pinned while you scroll: the six blocks travel sideways under a minute rail whose dot and fill run from 0 to 50, and the block holding the dot's minute fills deep coral.
Teachers who watch
Four teacher cards: name, the glyph of their class, portrait, role and a two-line bio
The heading and paragraph rise in, then the four cards slide in from the right a beat apart.
Who walks in on a Monday
Who the classes are for: four tall portrait frames with a heading and one line each (demo: runners, pregnancy, desk backs, over sixty)
Tied to the scroll, each tall frame opens from a band across its middle to full height, one after another from left to right, its heading and line riding the frame's edges, with one timeline per item on phones.
One room on Example Street
The room: heading, a paragraph, four facts and two lanes of studio photos
The two photo lanes start pushed to opposite sides, the first to the right and the second to the left, and slide into line as you scroll to them.
This week on the floor
A week of classes in seven day columns, Reformer slots filled coral, with a booking button
The heading and the booking line rise in, then the seven day columns slide in from the right, a beat apart on wide screens.
Three ways to pay
Three price cards, the middle one filled, each with a price, terms, a line and a button (demo: first class, ten classes, unlimited)
The three cards start lower by different amounts and settle into one straight line as the section scrolls in, or come in from alternate sides on phones.
Come in for a first class
Contact details (address, hours, phone, email; placeholders) beside a short first-class form
The heading, the paragraph, the details and the form rise and fade in as they arrive.
Hundred ®
Deep coral panel: wordmark, tagline, address, phone, email, Instagram, page links, copyright with the Design: 8B credit

Before you publish the pilates studio website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a class button in the nav bar and in the phone menu lead to #contact now; point them to your class booking page (Mindbody, Momence, Glofox or similar), or keep #contact once the form is connected.
Book your first class button in the opening lead to #contact now; point them to the booking page for a first class or a one-to-one intro.
Book a place button in the timetable lead to #contact now; point them to your live timetable or class booking page.
Book a first class, Buy ten classes and Go unlimited buttons on the three price cards lead to #contact now; point them to the checkout or booking link of each plan (a first class, a class pass, a monthly membership).
The opening photo sits on the first screen but has loading="lazy" like every photo on the page, so it starts loading late and can slow the largest paint; set it to load eagerly if it stays at the top.
In classes, while the carriage moves between two rails, the rail it is leaving shows its light text partly over the cream sheet for a moment.

Questions about this pilates studio website template

Does it work as a yoga studio website template?

Yes, after a copy pass. Websites for yoga studios need what this page already has: class styles with levels, teachers, a week of times and passes. Rename the four rails and the form's class menu, replace the apparatus photos and the class plan blocks, and rewrite the line that says filled slots are Reformer classes.

Can clients book and pay for a class on the page?

No. Every booking and plan button jumps to the contact form, which checks the name and email, shows a thank-you line and clears without sending anything. Connect it to Formspree or Netlify Forms, or point the buttons at your Mindbody, Momence or Glofox pages. The thank-you line promises a reply within a working day: keep or change it.

Should I give the agent the demo link or the files?

The files. Run the four curl lines on this page in your project folder, open it in Claude Code or Cursor and paste the prompt above with the angle brackets filled in. A demo link reaches the agent as a summary, while index.html and AGENTS.md give it the real markup and the list of classes the motion reads.

Can I get a Pilates studio site without editing any code?

Yes, with 8B's AI website builder: describe your studio in a sentence and its engine designs a new site, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro, $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

Which classes and attributes does the motion depend on?

Section ids, data-8b-section, data-8b-motion and data-8b-part, the classes AGENTS.md lists, and data-from and data-to on each class plan block, matching the rail's minutes. The first class rail carries is-on to show filled without JavaScript. Keep the header comment and the 8B meta tag. Keep the Design: 8B footer link unless the site owner asks to remove it.

Does the page still read with motion turned off?

Yes. With reduced motion, smooth scrolling and the entrance and scroll animations stop: the class plan becomes a plain grid without the minute rail and the portrait frames show at full height. Hover fills and the bar's hide-on-scroll still run. Without JavaScript the phone Menu button cannot open, and Send posts the form back to the page.

Not a pilates studio website? More free templates