Start here
Serenity Day Spa is a clean Bootstrap 5 landing page for spa businesses. It includes six sample treatments, Face/Body/Rituals filters, an illustrative spa story, gift-card inquiries, first-visit guidance, visit details, a reviewable email draft form, eight FAQs, and Privacy and Terms of Use dialogs.
Extract the ZIP and open index.html. Keep the assets folder beside it. No build tools or backend are required. Use a local web server if needed to test clipboard permissions.
serenity-day-spa/ index.html README.html LICENSES.txt assets/css/style.css assets/js/main.js assets/vendor/bootstrap.min.css assets/vendor/bootstrap.bundle.min.js assets/images/spa-room.webp assets/images/spa-details.webp assets/images/spa-lounge.webp assets/images/favicon.svg
Business details & content
Edit index.html to change the text logo, title, description, story, contacts, hours, FAQs, and footer. The demo city is Santa Barbara, California; the address is “Address to be announced.” Replace 999-999-9999 and hello@serenitydayspa.example before launch. A .example email is not a working recipient.
Sample hours are Mon–Fri 9am–6pm, Sat 9am–4pm, Sunday closed, Pacific time. Keep these consistent in the information bar, Visit section, and footer. Link a real supplied phone using tel: only after replacing the placeholder.
The spa images and business copy are illustrative. Replace them with actual details. No staff credentials, client reviews, awards, results, or operating history are claimed. Add only verified team information and genuine permissioned reviews. Remove demo disclosures only after replacing the associated content.
Treatments, prices & filters
Sample menu: Essential facial 60 min/$110; Extended facial 90 min/$150; Relaxation massage 60 min/$120; Body polish 45 min/$85; The slow afternoon 120 min/$220; Head-to-toe pause 105 min/$195. Durations are sample appointment lengths, not a promise of hands-on time. Confirm the actual treatment contents and prices.
Each .menu-item has a data-category value: face, body, or ritual. Category buttons use matching data-filter values, plus all. Intro links use data-select-filter. Update the accessible filter count if changing the menu.
Each data-service value must exactly match an option in the service select. These links preselect the option while preserving other entries and invalidating an old draft. Keep “Help me choose” as a useful inquiry path. Filters support arrow keys, Home, and End.
Gift cards & booking links
Gift cards are an inquiry feature by default. Choosing “Ask about gift cards” selects “Gift card inquiry.” Date and time become optional for this choice. Returning to a treatment makes both required again. The page does not sell, pay for, issue, deliver, or redeem a gift card.
The gift-card illustration is HTML and CSS, editable through .gift-card, .gift-brand, .gift-message, and .gift-caption. It is decorative, not a voucher or purchased credit.
In assets/js/main.js, settings.bookingUrl and settings.giftCardUrl are blank. Add your real HTTPS provider URLs if available. Elements with data-booking-link become “Book online”; data-gift-link elements become “Explore gift cards.” They open the provider in a new tab. Invalid or non-HTTPS URLs retain the inquiry fallback. Add these attributes to other CTAs if desired.
Scheduling, payment, gift-card issuance, redemption, confirmations, and reminders are handled by the provider, not this page. Update the adjacent explanations, gift FAQ, booking FAQ, Privacy, and Terms of Use to match the actual setup. Supply real gift-card terms, delivery arrangements, cancellation terms, and service policies before launch.
Inquiry drafts & validation
Set settings.recipient, settings.businessName, and settings.timezone in assets/js/main.js. The demo timezone is America/Los_Angeles. If changing it, update visible Pacific-time references and the date-validation message too.
Name, email, and treatment/gift choice are required. Date and time are required except for gift-card inquiries. Phone and message are optional. Any supplied date must be today or later in the business timezone. Time is a preference: no live availability or opening-hours check is implemented.
“Prepare my email” shows a read-only draft. “Open email app” passes it to the visitor’s mail app for manual sending. “Copy draft” copies when allowed or selects the text for manual copying. Editing fields or selecting a treatment invalidates the draft. Reset clears it and restores required appointment fields.
The return-visit link preselects “Returning client.” The request selector also supports changing an existing appointment; this is an inquiry only and changes no booking. No form entries are submitted automatically or saved in browser storage. Avoid sensitive medical details.
Colors, typography & photography
Serenity-specific rules are at the end of assets/css/style.css. The palette is warm ivory --cream #FAF8F3, stone --sand #EAE7DD, sage --green #526B5C, deep green --deep #293F34, and soft sage --sage #B6C3B2.
Headings use Georgia and body copy uses Arial/Helvetica system fonts. Body copy is 18px desktop/17px mobile; hero copy 20px/18px; service descriptions, FAQ text, and contact details 16px; form labels 15px; inputs at least 16px; help text around 13px. Preserve this readable hierarchy.
Replace the three WebP photos and update their alt text. Adjust object-position for the crop and preserve object-fit:cover to prevent stretching. The hero photograph fills its section. The inquiry section uses spa-lounge.webp in a responsive rectangular frame, replacing the leaf illustration. Contact-section copy uses dark green on pale sage for readability. The gift card remains crisp because it is rendered in HTML and CSS.
Navigation, FAQs & dialogs
The business-information bar and main navigation share one sticky header. ResizeObserver measures only .pinned-rows into --header-height, excluding the expanded menu. This controls anchor offsets and available menu height. Keep the wrappers intact.
The mobile menu closes on selection or Escape and scrolls on short screens. Anchor destinations receive focus without container outlines. Buttons, links, and fields retain visible keyboard focus. Preserve the skip link, accessible labels, reduced-motion support, and alt text.
Eight numbered Bootstrap Collapse FAQs start closed and open one at a time. Keep answer IDs matched to button targets and ARIA attributes. Privacy and Terms of Use use Bootstrap Modals with close controls, Escape, focus trapping/return, and scrollable bodies.
Launch checklist & troubleshooting
- Replace sample contacts, hours, treatments, prices, images, and business copy.
- Supply real gift-card, cancellation, and visit policies. Review both policy dialogs.
- Set a working email recipient. Prepare, inspect, and manually send a test inquiry.
- Test gifts without a date/time, treatments with required dates, past-date rejection, edit invalidation, copy fallback, and Reset.
- Check filters, preselection, returning-client link, FAQs, dialogs, mobile menu, and pinned-header offsets.
- If connecting external providers, test the actual URLs and update adjacent copy. Verify payments, reminders, and gift-card delivery within the provider.
- Check desktop, tablet, 390px, 320px, and short-screen layouts after edits.
- Custom CSS uses ?v=1.1 and JavaScript uses ?v=1.0. Increment affected asset versions with changes and distribute matching HTML. Refresh cached HTML when edits do not appear.
- If text looks small, check 100% zoom, viewport metadata, and that custom CSS loads after Bootstrap.
- If email handoff fails, configure a default mail app or copy the draft. Preserve asset paths and filename case.
Dependencies & notices
Bootstrap 5.3.3 and bundled Popper 2.11.8 are included locally under the MIT license. See LICENSES.txt. Fonts are system references; no font files are distributed. Photographs are illustrative, not verified premises or treatment results. The SVG favicon and HTML/CSS gift illustration are editable artwork. Check rights for replacement assets.