Energen

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Energen is a website template for day spas, massage studios and beauty centers, built on Bootstrap 5, with a light design in white and gold. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with eight pages: home, about, treatments, specialists, pricing, blog, blog post and contact.

The home page has a full-screen hero, a benefits section, offer cards, services, a treatments grid with a price accordion, membership cards, a testimonial slider, animated counters, recent posts and a photo gallery with a lightbox. The inner pages add the therapist team, the membership plans, a blog with comments and a sidebar, and a contact page with a working contact form and a map, and the page headers scroll with a parallax effect.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery), compiled from Sass with the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the testimonial slider, PhotoSwipe replaces Magnific Popup in the gallery, Jarallax replaces Stellar on the page headers, and small built-in modules replace Waypoints, animateNumber and the scroll animations. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all nine pages together went from 19.5 MB and 370 requests to 6.1 MB and 163 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the fold, the home page preloads its hero photo, and unused plugins such as AOS, Scrollax, a date picker and a time picker are gone.
• No third-party requests: Open Sans and Prata are self-hosted, the icon fonts are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), the contact map loads only after a click and needs no API key, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded Google Fonts and the Google Maps script.
• Working forms: the contact form and the blog comment form send through php/send-email.php, with labels, validation, a spam trap and an in-page message, and the blog sidebar search filters the posts. Before, the forms had no action and their fields had no names.
• Accessibility: a skip link and a main landmark on every page, one h1 per page and a clean heading order, names on icon-only and gallery links, descriptive alt text, visible focus rings, reduced-motion support and WCAG AA text contrast, with a deeper gold for text, icons and buttons on white, darker body and meta greys, and light backgrounds behind the counters and the text over photos on phones.
• Fixed and refreshed: the price list columns in the treatments accordion line up again, a loading screen that hid the page is gone, footer, sidebar and button links lead to real pages, the blog categories and tags are about spa topics, the team has spa roles and distinct fictional names, and one testimonial photo is replaced with an Unsplash portrait.