Fernhall - Pilates Studio HTML Website Template

Most studio templates are yoga or gym themes with the class names changed. A reformer studio needs three specific things from its website: a timetable people can check on their phone, clear prices from the intro offer up to memberships, and enough reassurance that a nervous beginner books a first class. Fernhall is built around those three jobs, across 9 pages. Schedule. The Schedule page shows the next seven days, built from one weekly timetable file. Visitors filter by class type, level, instructor and day, and the filtered view can be shared as a link. Each class shows how many spots are left, "Full" with a waitlist button, or "Spots not listed" if you'd rather not publish numbers. You type the numbers in a data file. If your booking tool can publish them as JSON, the page can read that feed instead. Pricing. A three-step ladder: intro offer, class packs, memberships. The monthly/annual toggle recalculates the annual total, the monthly equivalent and the saving from the prices you enter. Visitors add packs and memberships to a bag, and the bag sends them on to your booking tool's or payment provider's checkout. The site itself takes no payments. First class. The Contact page doubles as a free-first-class form. It checks each field, preselects the class a visitor chose on the Schedule, and comes with setup steps for Formspree-style services, your own script or Netlify Forms. Until you connect one, it tells visitors plainly that nothing was sent. It never shows a fake "Thanks, we got it". Instructors. Each instructor card opens a full bio with certifications, the classes they teach and a link to their slots on the Schedule. Classes, Studio and About. The Classes page gives each class type its own section: who it's for, what to expect, what to bring and who teaches it. The Studio page shows your amenities and a photo gallery with category filters and a full-screen viewer. The About page tells the studio's story next to a photo that changes with each step on desktop. Find-your-class quiz. Three questions for newcomers, with no account or email. Pregnancy and injury answers point visitors to the right class and remind them to check with their doctor. Design. Cream pages, terracotta buttons and arch-framed photos. The free-first-class band, the mobile menu and the footer sit on olive green with pale-yellow accents, and the "Most popular" plan card is cocoa brown. Headings are set in Young Serif, body text in Figtree. That is the default Warm theme. Eucalyptus and Sand are two more complete palettes, each with its own corner and arch shapes, and you switch between them with one setting. Editing. All content lives in commented data files: studio name, contact details, timetable, prices, instructors, opening hours, FAQ, gallery, quiz and social links. Colors sit in one theme file. There is no build step, no npm and no framework. The fonts are embedded in the CSS, so you can double-click index.html and preview the site straight from the download folder, then upload it to any static host. Nine Markdown guides cover setup, rebranding, every data field, forms and checkout, themes and the quiz, plus a step-by-step booking-integration guide. Live demo. Add ?theme=eucalyptus or ?theme=sand to the address to see the other themes. Browsers. Tested in Chrome (full QA) and Firefox (smoke test). Demo photos are AI-generated (OpenAI ChatGPT Images) and included in the download (34 photos). They show a fictional studio, so replace them with your own photos before launch.

Features

1. Schedule for the next 7 days from one weekly timetable (data/schedule.js): a 7-column week grid from 1200 px, day tabs with a list on tablets and phones. Each class opens a details dialog with who it's for, what to expect and what to bring, plus a calendar file (.ics) and an "Add to Google Calendar" link.
2. Filters by class type, level, instructor and day. They combine, show a result count and stay in the address, so schedule.html?type=reformer opens a filtered view.
3. Spots-left chip on every class: "3 spots left", "Full" with a "Join waitlist" button, or "Spots not listed". Each state is shown with an icon, text and color, not color alone. Type the numbers in a data file, hide them with one setting, or connect a live availability feed (JSON). If the feed fails, the page says so and shows the typed numbers.
4. Pricing ladder in three steps (intro offer, class packs, memberships), with a sub-menu that marks the step in view and a comparison table that scrolls sideways on phones with the first column fixed.
5. Monthly/annual toggle that recalculates annual totals, monthly equivalents and "Save N%". Prices with cents are shown correctly, and ?billing=annual opens the page on annual.
6. Bag (cart drawer) for packs and memberships, with quantity buttons, remove and a total. It stays in the visitor's browser and hands off to your checkout link or to an email. You can switch it off with one setting.
7. Free-first-class form with field checks, an error summary, class preselect, a hidden spam trap, and setup instructions for Formspree-style services, your own script or Netlify Forms. It tells visitors plainly when nothing was sent.
8. Instructor cards and bio dialogs with certifications, the classes they teach and "Book {name}'s classes". instructors.html#name opens a bio directly.
9. Classes page: one section per class type with who it's for, what to expect, what to bring and who teaches it, plus a sticky sub-menu.
10. Studio page: amenities and a filterable photo gallery. The full-screen viewer has previous/next buttons, arrow keys, Esc and a "3 of 12" counter.
11. About page: the studio's story with a sticky arch photo that changes with each step on desktop, plus values and a team strip.
12. Find-your-class quiz: three questions, no account or email. Pregnancy and injury answers point visitors to the right class and remind them to check with their doctor. Available on Home and Classes.
13. FAQ accordion by topic (what to wear, first class, injuries, pregnancy, cancellations), reusable on any page with one attribute.
14. Data-driven editing: 12 data files with comments saying what's safe to change. Colors are in one theme file, spacing and type sizes in css/tokens.css. No build step: the fonts are embedded in the CSS, so pages, timetable, bag and menus work when you double-click index.html.
15. Nine Markdown guides: preview and deployment (Netlify, Vercel, FTP/cPanel, 404 setup), step-by-step rebranding, every data field, forms and checkout, themes, the quiz, and a booking-integration guide from a single booking link up to per-class links, an embedded booking page and a live spots-left feed, with a test checklist.
16. Accessibility: keyboard navigation, visible focus, a skip link, native dialogs that hold and return focus, and reduced-motion support. Automated axe checks at desktop and mobile widths report no critical or serious issues.
17. SEO basics: per-page title, description and Open Graph tags, business details as JSON-LD from your settings, sitemap.xml, robots.txt, and a 404 page marked noindex.
18. Responsive layouts for desktop, tablet and phone, checked at 1440, 1280, 1024, 768, 390, 375 and 320 px with no horizontal scrolling.

Requirements

A modern browser, a text editor and static web hosting. No framework, build tools or database are required. Optional forms, booking and payment integrations require buyer-configured services.

Instructions

1. Extract the ZIP and open README.md.
2. Edit the files in site/ to customize branding, text, images, schedules and prices.
3. Follow the included customization and booking guides to connect your forms and booking or payment provider.
4. Upload the contents of site/ to your static hosting service.