Fitness Gym Homepage Template

A dark, high-contrast gym homepage built with Bootstrap 6 for a fictional strength club called Forge. It includes a class timetable, membership plans, coach profiles and a free day pass form.

How it works

Everything sits inside .ag-page, which has data-bs-theme="dark" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and the rest) to a volt green. Every btn-solid theme-primary, badge, chip and range then uses the brand color.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> that becomes the inline link row from 1024px. "Training" opens a .menu with icons and descriptions. The script closes the drawer when an in-page link is chosen.
Hero: a full-bleed Unsplash photo under a gradient, an outlined headline (.ag-outline), two calls to action and a <dl class="ag-stats"> stat strip.
Programs and coaches: photo cards (.ag-program, .ag-coach) that switch from grayscale to color on hover. Coach specialties use Bootstrap 6 .chips.
Timetable: nav nav-tabs day tabs (data-bs-toggle="tab"). The script builds each .tab-pane from the AG_WEEK object, opens today's tab with Tab.getOrCreateInstance() and marks it with .ag-today.
Membership: a btn-group of btn-check radios swaps data-ag-monthly / data-ag-yearly prices. A Bootstrap 6 .form-range slider ("How often will you train?") adds .is-recommended to the plan that fits.
Free pass form: <form data-bs-validate novalidate> with a Bootstrap 6 Datepicker (its minimum date is set to today in script) and a Combobox for the main goal. On submit the script flags invalid fields with .is-invalid, fakes the request and opens #ag-toast.
FAQ and footer: an exclusive <details name="ag-faq"> accordion, hours and address.

Customization

Change --ag-volt and the --bs-primary-* overrides in .ag-page (style.css) to use your brand color.
Edit the AG_WEEK object at the top of script.js to set your classes, coaches and capacities per weekday.
Set prices in data-ag-monthly / data-ag-yearly on each .ag-price.
Change the thresholds in recommend() to control which data-ag-plan card the range recommends.
Replace the setTimeout in the form's submit handler with fetch() to your booking endpoint.
Swap --ag-display for another condensed font, or remove .ag-ticker for a calmer page.
All photos come from Unsplash. Replace them with photos of your own gym and coaches.

Accessibility

The page has a skip link, labelled navigation and role="tab" / aria-selected tabs. Visually hidden text gives each "Book" button the class name and time. Price and recommendation changes are announced in an aria-live region, and the toast uses role="status". Focus outlines are visible in volt green. Under prefers-reduced-motion the ticker and hover transitions stop.