Start here
Luma Med Spa is a Bootstrap 5 med spa landing page with six sample services, a consultation section, studio photography, first-visit guidance, contacts, a reviewable email inquiry, eight FAQs, and Privacy and Terms of Use dialogs.
Extract the ZIP, keep the assets beside index.html, and open the page. No build tools or backend are required. A local web server can help with clipboard testing.
luma-med-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/treatment-room.webp assets/images/consultation-space.webp assets/images/favicon.svg
Business content & contacts
Edit index.html for the text logo, title, description, studio story, services, first-visit guide, contact details, FAQ answers, and footer. Irvine, California is the sample city. Replace “Address to be announced,” 999-999-9999, and hello@lumamedspa.example before launch. The example email does not reach a working inbox.
Sample hours are Mon–Fri 9am–6pm, Sat 9am–4pm, Sunday closed, Pacific time. Keep details consistent in the pinned bar, Visit section, footer, and script settings. Link a real phone with tel: after replacing the placeholder.
Photos and business details are illustrative. Do not present illustrative rooms as verified premises. No staff credentials, reviews, awards, or outcomes are claimed. Before launch, have the actual practice review the offered services, provider qualifications, suitability language, potential risks, alternatives, and aftercare information. Do not turn consultation listings into implied procedure offers without accurate provider-supplied details. Use verified information and permissioned genuine reviews if adding them. Remove demo notices only after replacing their content.
Services & consultation
The sample menu includes Signature facial, 60 min/$125; Extended facial, 90 min/$175; Injectable options consultation, 30 min/$60; Device-based treatment consultation, 30 min/$60; First-visit consultation, 45 min/$75; Follow-up consultation, 30 min/$50. Consultation fees are not procedure prices, and no injectable or device procedure is included in those sample appointments. All are editable example appointment options. Confirm actual products, steps, time included, and prices.
Categories use data-category values skin, aesthetics, and consult, matched by data-filter buttons. Keep the all button. Intro links use data-select-filter. Filters support arrow keys, Home, and End. Update the initial accessible count if you change the number of services.
Service links use data-service values that must exactly match the form options, including duration. They preselect a service while preserving other fields and invalidating an old draft. The consultation CTA selects “First-visit consultation · 45 min.” Keep “Help me choose” for general questions.
Consultation copy describes a conversation, not a diagnosis or promised result. Review all treatment claims, suitability wording, and preparation advice with the actual business. Add only supplied, appropriate practices and policies.
Booking & email drafts
Set recipient, businessName, and timezone at the top of assets/js/main.js. The demo timezone is America/Los_Angeles; update visible Pacific-time references and the validation message when changing it.
settings.bookingUrl is blank. Add a real HTTPS provider URL to change data-booking-link elements to “Book online.” The hero CTA carries that attribute; add it to other CTAs if desired. Invalid or non-HTTPS links keep the inquiry fallback. Scheduling, payment, confirmations, and reminders belong to the external provider.
The form requires name, email, treatment, date, and time. Phone and message are optional. Past dates are rejected according to the business timezone. Times are preferences, not live availability, and are not checked against opening hours.
“Prepare my email” creates a visible read-only draft. “Open email app” opens the visitor’s mail app for manual sending. “Copy draft” copies it when permitted or selects the text for manual copying. Editing fields or selecting another treatment invalidates the old draft. Reset clears the form and draft.
The return-visit link selects Returning client. The form also offers an appointment-change request. Neither changes an actual appointment. No entries are automatically submitted or saved in browser storage. Keep medical histories and other sensitive information out of email inquiries.
Palette, type & images
Luma-specific rules are at the end of assets/css/style.css. Main variables: --cream #F8FBFE, --sand #E6F0FA, --green and --deep #1B365D, --sage #9AB0C9, and --muted #50647B. Historical variable names remain to keep shared control styling consistent.
Main headings use Arial/Helvetica with normal-style slate-blue emphasis. Body copy uses system sans-serif. General paragraphs are 18px desktop/17px phones; hero copy 20px/18px; treatment descriptions, FAQ text, contact details, and policies 16px; labels 15px; form fields at least 16px; help text about 13px. Preserve readable proportions when editing.
treatment-room.webp is the wide treatment-room hero photograph; consultation-space.webp shows a private consultation nook in the studio section. Replace the images and alt text, then adjust object-position for the crop. Keep object-fit:cover to avoid stretching. Use real photography when available; do not imply before-and-after results.
Pinned navigation & accessibility
The business-information bar and navigation share one sticky header. ResizeObserver measures only .pinned-rows into --header-height, excluding the expanded mobile menu. This sets anchor offsets and available menu height. Keep the wrappers intact.
The mobile menu closes on link selection or Escape and scrolls on short screens. Section destinations receive focus without a container outline. Interactive controls retain visible keyboard focus. Preserve the skip link, labels, descriptive alt text, and reduced-motion support.
Eight numbered FAQs use Bootstrap Collapse, initially closed, one open at a time. Keep unique IDs, targets, aria-controls, and aria-expanded consistent. Privacy and Terms of Use use Bootstrap Modals with Escape, focus trapping and return, close controls, and scrollable bodies.
Policies & launch checklist
- Replace demo contacts, hours, prices, treatment descriptions, and photos.
- Supply real cancellation terms and first-visit arrangements. Review FAQs and both policy dialogs for actual practices.
- Set a working email recipient and correct timezone. Prepare and manually send a test inquiry.
- If connecting online booking, test the HTTPS destination and update the booking FAQ and policies.
- Test service filters, consultation preselection, return visits, past dates, draft editing, copy fallback, and Reset.
- Check all text/background combinations, including the contact section and dark consultation section.
- Check desktop, tablet, 390px, 320px, and short-screen menus, plus dialog layering and header offsets.
- CSS and JS start at ?v=1.0. Increase affected tokens after changes and distribute matching HTML. Cached HTML may also require refreshing.
- If text looks small, check 100% zoom, viewport metadata, and that custom CSS follows Bootstrap.
- If email handoff fails, configure an email app or copy the draft. Preserve local asset paths and filename case.
Dependencies & notices
Bootstrap 5.3.3 and bundled Popper 2.11.8 are supplied locally under the MIT license. See LICENSES.txt. Fonts are system references; no font files are distributed. Photos are illustrative template assets, and the SVG favicon is editable artwork. Check rights for replacement assets.