Credits: Photos from Unsplash, Poppins font, Lucide icons
Description
Gutim is a gym and fitness website template built on Bootstrap 5. It has a bold red-orange look with large photo sections, and it is responsive and mobile-ready. There are seven pages: home, about, classes, blog, a single blog post, gallery and contact.
The home page has a hero, a story section, a service list, a class carousel, trainer cards, a testimonial slider, a call to action, three membership plans, a registration form and the latest articles. The about page adds animated counters, a video and an award, the classes page a filterable weekly timetable, the gallery page a filterable photo grid, and the contact page a click-to-load map and a working contact form. Gutim gives you a ready-made site for a gym, fitness studio or personal trainer.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 4.4.1 and jQuery), compiled from the included Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel, a video dialog replaces Magnific Popup, and small built-in modules replace SlickNav, MixItUp, Masonry and the counter script. Lucide SVG icons replace Font Awesome 4. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: all eight pages together went from 11.0 MB and 278 requests to 4.0 MB and 189 requests, and the home page from 2.4 MB to 1.1 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the full-page preloader is gone.
No third-party requests: Poppins is self-hosted, the contact page map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, the video loads from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID.
Working forms: the registration, contact, comment and newsletter forms send through php/send-email.php, with validation, a spam trap and an in-page message. Before, they had no action and no field names, so nothing could be sent.
Accessibility: a skip link and a main landmark on every page, one h1 per page, a real menu button with a panel that closes with Esc, filters and a timetable that work from the keyboard, names on icon links, visible focus rings, reduced-motion support and WCAG AA text contrast, with a darker red and orange for white button labels and scrims behind text on photos.
Demo content: all photos are new Unsplash photos, the trainers, members and authors have made-up names, the news headlines and placeholder text are replaced with gym copy, and the contact page shows a fictional address.