Serene — Free Spa & Wellness Website Template
Serene skips the sage-green-and-terracotta cliché for a quieter identity: a blue-slate and warm-greige palette lit by a single gilded amber accent, so the design feels like the room it describes. It ships as a complete one-page site — a treatment menu with real prices, a working booking form, an image gallery with lightbox, and a therapists row — built on Bootstrap 5 with zero jQuery.
Features
- Filterable treatment menu laid out as a real spa "menu" with dotted price leaders and category tabs (Massage, Facials, Body Rituals, Wellness)
- Front-end validated booking form with service picker, date/time fields and a today-minimum date guard
- Vanilla-JS testimonial slider with dots, arrows, autoplay and pause-on-hover
- Accessible gallery lightbox (keyboard-openable, Escape to close, focus return)
- Signature arch-shaped image frames evoking a hammam doorway — used across hero, about, gallery and team
- Opening-hours card that highlights the current day automatically, plus a hand-built CSS map placeholder (no third-party embed)
- Scroll-reveal via IntersectionObserver, sticky blur-on-scroll header, and full prefers-reduced-motion support
- Semantic landmarks, skip link, visible focus styles, alt text and aria labels throughout
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Calm, boutique spa — blue-slate + greige with gilded amber, Fraunces serif display
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Serene really free to use commercially?
Yes. Use it for a real spa, salon or wellness studio, client work included, at no cost. A credit link to uiCookies is appreciated but not required.
Does it use jQuery or any paid plugins?
No. Every interaction — mobile nav, menu filter, testimonial slider, form validation, gallery lightbox — is hand-written vanilla JavaScript. The only bundled library is Bootstrap 5, self-hosted.
Can I connect the booking form to my scheduler?
The form validates on the front end and shows a confirmation message out of the box. Point its action at your own endpoint, Calendly, or a form service, and it will submit real bookings.
How do I change the treatments and prices?
Each treatment is a plain block of HTML in the services section with a name, price, description and tags. Edit the text, duplicate a block to add a service, and set its category with the `data-cat` attribute so the filter tabs pick it up.
