Ironclad
A bold, structured HTML5 template for gyms, fitness studios and personal trainers.
About this theme
Ironclad is a full landing site for a training facility — a photography-led hero with a live-hours badge, program-tabbed training tracks (Strength, Conditioning, Mobility & Recovery — real interactive tabs), a coaching staff section with real portrait photography, a class schedule table, member testimonials, a membership CTA band, and an FAQ. Built with plain HTML, CSS and vanilla JavaScript — no build step, no framework dependency. Fully responsive with a persisted dark-mode toggle and scroll-reveal animations. One bold brand color (crimson red), Archivo Black display type, sharp corners, numbered indices instead of icons — restyles cleanly to match your own gym's brand by editing a handful of CSS custom properties.
Platform compatibility
| Edition | Responsive | RTL | Translation-ready | Dark mode | Version |
|---|---|---|---|---|---|
| HTML5 (Vanilla CSS/JS) | ✓ | — | — | ✓ | 1.0.0 |
Documentation
Getting started
1. Unzip the downloaded package. 2. Open `index.html` directly in a browser to preview it, or upload the whole folder to your web host. 3. All styling lives in `assets/css/styles.css` — the brand color, borders and spacing are controlled by the CSS custom properties (variables) at the top of the file. Change `--c-primary` to restyle the whole site to your brand. 4. All interactivity — the mobile menu, dark mode toggle, program tabs, and FAQ accordion — lives in `assets/js/main.js`, plain vanilla JavaScript with no dependencies or build step. 5. Replace the placeholder coach photos, gym name and copy in `index.html` with your own content. Photos live in `assets/img/`. 6. The class schedule is a plain HTML table (`.schedule-table`) — edit rows directly, no data file or build step needed.
Editing the program tabs
The Programs section's three tabs are plain markup, not a component: each button in `.prog-tabs` carries a `data-prog` attribute matching a `.prog-panel`'s `data-panel` attribute, and `main.js` just toggles an `is-active` class on click — add, remove or rename a program by editing both the button and its matching panel, no JavaScript changes required. Each card inside a panel uses a numbered index (`01`, `02`...) instead of an icon — this is a deliberate design choice, not a missing asset. The photography (hero image and coach portraits) is free-to-use stock photography sourced from Pexels — swap the files in `assets/img/` for your own facility's photos and real staff portraits before going live.
Reviews
No reviews yet — be the first to share your experience.