# Free pilates studio website template > Free HTML Pilates studio website template for reformer and mat teachers: classes, timetable, prices. AGENTS.md for AI agents, or a no-code site from 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. 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. - Page: https://8b.com/templates/hundred/ - Live demo: https://8b.com/templates/hundred/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/hundred/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/pilates-studio-website-template - Download ZIP: https://8b.com/templates/hundred/pilates-studio-website-template.zip - Template name in the repository: Hundred - At a glance: 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. ## 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/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 ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Adapt it to . 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. ``` 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/pilates-studio-website-template my-site`. ## About 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](https://8b.com/templates/arcline/) 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. ## Design - 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. ## Sections and motion - **Navigation** (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. Motion: 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.** (opening): deep coral first screen: large heading, a lead paragraph, a booking button with the first-class prices, and a tall reformer photo. Motion: 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** (classes): four class formats as full-width rounded rails: big name, description, length, level and class size, and a photo (demo: Reformer, Tower, Mat, Ring). Motion: 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** (method): six teaching rules as one large paragraph, each rule's name a coral lead-in. Motion: The heading and the paragraph of six rules rise and fade in as they reach the screen. - **Fifty minutes, in order** (fifty): 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). Motion: 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** (teachers): four teacher cards: name, the glyph of their class, portrait, role and a two-line bio. Motion: The heading and paragraph rise in, then the four cards slide in from the right a beat apart. - **Who walks in on a Monday** (bodies): who the classes are for: four tall portrait frames with a heading and one line each (demo: runners, pregnancy, desk backs, over sixty). Motion: 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** (studio): the room: heading, a paragraph, four facts and two lanes of studio photos. Motion: 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** (timetable): a week of classes in seven day columns, Reformer slots filled coral, with a booking button. Motion: 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** (prices): three price cards, the middle one filled, each with a price, terms, a line and a button (demo: first class, ten classes, unlimited). Motion: 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): contact details (address, hours, phone, email; placeholders) beside a short first-class form. Motion: The heading, the paragraph, the details and the form rise and fade in as they arrive. - **Hundred ®** (footer): deep coral panel: wordmark, tagline, address, phone, email, Instagram, page links, copyright with the Design: 8B credit ## Good for - reformer Pilates studio - mat Pilates, yoga or barre studio - physiotherapy clinic or boutique fitness studio with group classes and a weekly timetable - any class-based studio that wants a warm, bold look: a coral frame, a cream sheet and heavy type ## Questions **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](https://8b.com/): 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. ## 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). - 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. ## 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).