Bloom Wellness

Start here

Bloom Wellness is a Bootstrap 5 landing page for a wellness studio. It includes a photographic hero, program pathways, a filterable six-program menu, studio introduction, two illustrative practitioner profiles, visit details, an email-draft inquiry form, FAQs, and policy dialogs.

Quick start: extract the ZIP and open index.html. Keep the folder structure intact. No build process or server-side application is needed. A local web server can help when checking clipboard behavior.

bloom-wellness/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/style.css
    js/main.js
    vendor/bootstrap.min.css
    vendor/bootstrap.bundle.min.js
    images/studio-hero.webp
    images/studio.webp
    images/practitioner-maya.webp
    images/practitioner-jordan.webp
    images/favicon.svg

Business details & content

Edit the plain-text bloom / WELLNESS logo, page title, description, favicon, hero, and studio introduction in index.html. Main section IDs are home, programs, services, studio, practitioners, visit, inquiry, and faq.

Replace the Encinitas demonstration location, “Address to be announced,” 999-999-9999, and hello@bloomwellness.example. Sample hours are Monday–Friday 9am–6pm, Saturday 9am–4pm, and Sunday closed, in Pacific time. Keep the pinned bar, visit section, footer, policy dialogs, guide, and JavaScript consistent. Link a genuine phone number with tel: after replacing the non-working placeholder.

Programs, prices, hours, names, biographies, and photographs are demonstration content. Replace them with accurate business information and imagery you have permission to use. The footer year updates automatically.

Programs, filters & pricing

Each .menu-item has a data-category: movement, mindful, or personal. Update its heading, description, and price. The six sample sessions are Gentle movement ($28), Everyday mobility ($28), Guided meditation ($24), Mindful journaling ($30), One-to-one practice ($85), and Everyday rhythms ($75). Prices are individual-session examples in USD, not memberships or packages.

Category buttons use matching data-filter values. Keep the “all” filter and update the initial hidden result count when adding or removing programs. Arrow keys, Home, and End select filters. The three pathway links use data-select-filter to activate a category and scroll to the menu.

Inquiry links use data-service; each value must exactly match a form option. Choosing a program preserves other form entries and invalidates any old draft. Keep the existing service field ID unless updating its JavaScript references too.

Practitioner profiles

The two profiles are explicitly fictional examples, with illustrative portraits. Replace Maya Ellis and Jordan Brooks, their role descriptions, biographies, and photographs with your actual practitioners. Add only verified qualifications or credentials supplied by the business.

Profile inquiry links use data-practitioner. The script appends a short request naming that person to the message without discarding existing text. It selects “Help me choose” only when no program is selected, and invalidates a previous draft. Keep the attribute aligned with the displayed name.

Update the example-profile disclosure and related FAQ after replacing the demonstration profiles. Do not present placeholder identities or portraits as actual staff.

Colors, text & photographs

The palette follows the supplied reference. Edit CSS variables in assets/css/style.css; Bloom’s layout rules follow the shared form and navigation styles.

Georgia provides expressive serif headings; Arial/Helvetica provides body text. These are system fonts, so no font download is required. General copy is 18px on desktop and 17px on phones; hero copy is 20px/18px. Program descriptions, FAQs, contact details, and policy text are 16px. Labels are 15px, inputs at least 16px, secondary notes around 13px, and footer links 14px. Compact contact-bar text is 13px on desktop and 12px on phones. Decorative labels are smaller.

Replace the four WebP photographs and update alt text. The hero is landscape; studio and practitioner originals are portrait. Use object-position to adjust crops. Keep object-fit: cover and responsive heights so photographs fill their boxes without stretching. The leaf decoration and favicon are SVG.

Pinned header & responsive layout

The contact-information bar and navigation are inside one sticky header. Both remain visible when scrolling. A ResizeObserver measures .pinned-rows and sets --header-height; it excludes the expanded menu. This controls anchor offsets and the mobile menu’s available height. Section destinations receive focus without a container outline; links, buttons, and form controls retain visible keyboard focus. Keep these wrappers when editing.

The mobile menu opens from the toggle, scrolls on short screens, closes when choosing a link, and closes with Escape while returning focus to the toggle. The information bar wraps naturally on phones. Keep phone, address, and hours concise and readable.

Breakpoints at 1199px, 991px, 600px, and 359px adapt the grids, typography, images, and controls. Check edits at desktop, tablet, 390px, and 320px widths. Preserve the skip link, semantic headings, labels, image descriptions, visible focus, and reduced-motion support.

Inquiry drafts & settings

At the top of assets/js/main.js, set recipient, businessName, and timezone. The sample recipient hello@bloomwellness.example does not reach a real business. The current timezone is America/Los_Angeles. If changing it, update the Pacific-time labels in the page and draft.

1. The visitor enters name, email, program, preferred date, and preferred time. Phone and message are optional.
2. Required fields and email format are checked. Dates before today in the business timezone are rejected. Time preferences are not checked against business hours or a live calendar.
3. “Prepare my email” creates a visible, read-only draft.
4. “Open email app” hands the draft to the visitor’s email app through a mailto link. The visitor reviews and sends it.
5. “Copy draft” uses the clipboard when allowed. If unavailable, the text is selected for manual copying.

Editing fields, choosing a program, or using a practitioner inquiry link invalidates the previous draft. Reset clears the form and draft. Nothing is sent automatically or saved in browser storage. There is no backend, live availability, payment processing, or automatic appointment confirmation.

The studio must confirm details directly. Avoid collecting sensitive personal or medical histories in this form. No external booking link is included; if adding one, update the page, FAQs, and policies to describe the real behavior.

FAQs & policy dialogs

The six numbered FAQs use Bootstrap Collapse. All begin closed and one answer can open at a time. Preserve unique answer IDs, matching data-bs-target and aria-controls, and data-bs-parent="#faq-list". Whole question rows are buttons; heights follow content.

Privacy and Terms of Use use Bootstrap Modals. Preserve titles, close controls, and dismissal attributes. Bootstrap handles focus trapping, Escape, focus return, and the backdrop. Dialog content scrolls on short screens and remains above the pinned header.

Review policy text before launch. It describes draft preparation, email handoff, clipboard use, and direct confirmation. Update it if adding a backend, analytics, external booking, or other services. Use accurate business terms without inventing outcomes, fees, or rules.

Troubleshooting & cache versions

• Edits appear missing: check the file and URL you opened. The CSS reference uses ?v=1.1; JavaScript uses ?v=1.0. Increment affected versions and distribute the matching HTML and assets together after updates. Cached HTML or hosting caches may also need refreshing.
• Text seems small: compare at 100% browser zoom and confirm the custom CSS loads after Bootstrap. Keep the viewport meta tag and avoid page-scale transforms.
• Photos missing: verify filename capitalization and relative paths. Keep assets beside index.html.
• A program does not preselect: compare its data-service value to the exact form option.
• FAQ or dialogs do not open: confirm the local Bootstrap bundle loads before main.js.
• Email app does not open: configure a default email app or copy the draft. Very long mailto links may exceed an email app’s limits.
• Clipboard denied: use the selected draft and your device’s Copy command.

Launch checklist

• Replace sample business details, programs, prices, hours, photographs, and all practitioner profiles.
• Set the real recipient and timezone, then prepare and manually send a test inquiry.
• Confirm matching contact details in the pinned bar, visit section, footer, policies, and JavaScript.
• Review program wording, staff qualifications, FAQs, and policy text for accuracy.
• Try filters, pathway links, practitioner links, preselection, validation, draft editing, copy fallback, Reset, mobile navigation, and dialogs.
• Review desktop, tablet, narrow-phone and short-screen layouts; check text wrapping, image crops, keyboard focus, and sticky-header offsets.
• Remove demonstration disclosures only after replacing their sample content.
• Retain dependency license notices.

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 rather than distributed files. Photographs are illustrative template assets, not verified premises, clients, or staff. The leaf motif and favicon are SVG artwork.