Gym and Fitness Website Template

A gym site that gets people through the door

Visitors to a gym website want three things: what classes are on, what it costs and how to try it. This template puts each one a click away. The home page leads with a strong promise and a free-week call to action, the classes page holds the timetable, the membership page makes pricing obvious and the join page captures the lead.

Edit in the right order

1. Brand. Replace "Rampart Strength Club" and the address, phone number and opening hours in the footer and on the contact page.
2. Colours. The black and acid-lime palette is defined at the top of assets/style.css. To soften it for a yoga or wellness studio, change the accent and background variables.
3. Timetable. Open classes.html. Each day has its own table. Keep it honest: only list classes you actually run, with real times and levels.
4. Coaches. Replace the illustrated avatars on trainers.html with real photos and short, credible bios with qualifications.
5. Pricing. Edit plan names, features and the data-m and data-y numbers. Keep the plan you most want to sell highlighted.

The tabs and the toggle

The timetable tabs use the proper tab roles, so they work with a keyboard and screen readers. The monthly and annual toggle is a pair of buttons that swap each price. Both are a few lines of inline JavaScript, easy to read and change.

Capturing sign-ups

The form uses a mailto action so it works anywhere. For real sign-ups, create a free Formspree form or connect your gym software and replace the form action. Keep the form short: name, email, phone and goal convert far better than long forms.

Make it perform

Compress any photos you add to WebP and keep them under 200 KB. Add your Google Business Profile with the same name, address and phone number as the footer. Write a unique title for each page including your town. When you are ready for online payments, member areas or app-based check-in, DEV3 can build them around this design.

Accessibility, motion and licence

The template uses semantic landmarks, a skip link, visible focus styles and readable contrast. Motion is limited to gentle fade-ins and hover states, and it switches off for visitors whose device asks for reduced motion. There is no 3D, no WebGL and nothing to load from a CDN. Everything is free for personal and commercial use, and the brand names, people and prices are fictional, so replace them before launch. The README in the zip lists every file and the first edits to make.