Muse Makeup

Start here

Muse Makeup is a Bootstrap 5 landing page for bridal and occasion makeup artists, with local photographs, a filterable service menu, appointment email drafts, FAQs, and policy dialogs. It works without a build process or a server-side application.

Quick start: extract the ZIP, keep the folder structure together, and open index.html in your browser. A local web server is optional and can help when checking clipboard behavior.

muse-makeup/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/style.css
    js/main.js
    vendor/bootstrap.min.css
    vendor/bootstrap.bundle.min.js
    images/ (four WebP photos and favicon.svg)

Edit the business details

Open index.html in a text editor. Search for the section IDs home, about, services, portfolio, visit, inquiry, and faq.

• Replace the editable “MUSE / MAKEUP” text logo in the header and footer. Change the page title, description, and favicon too.
• Edit the hero and introduction in a voice that suits your business. Replace the illustrative photos and captions with content you have permission to use.
• Update the placeholder address, Santa Barbara location, sample hours, 999-999-9999, and hello@musemakeup.example. The location is a demonstration setting; no street address is provided. Search the entire folder for these values, including policy dialogs and JavaScript.
• The footer year updates automatically. No staff profiles or external booking system are included.

Services, categories & prices

The menu is ordinary HTML, so it can be edited without JavaScript changes. Each .menu-item has a data-category of bridal, occasion, or lesson. Its heading, description, and price are editable. Prices are sample USD amounts, not business commitments.

Each filter button uses a matching data-filter. Keep the “all” button. If adding categories, add both the button and matching item values. Filters are semantic buttons with pressed states; arrow keys, Home, and End move and select within the group.

Each service link has a data-service value that must exactly match an option in the inquiry form. Keep these names aligned. Selecting a service preserves other form entries and invalidates any prepared draft. Update the initial hidden filter count if changing the number of items.

The six examples are individual services, not packages. Wedding-party makeup has a per-person sample price. No durations, removal fees, deposits, or cancellation rules have been invented. Add only your actual prices and policies.

Colors, typography & photographs

Brand colors are at the top of assets/css/style.css as CSS variables.

Headings use Georgia; body text uses Arial/Helvetica with system fallbacks. No fonts are downloaded. Review line wrapping if you change text or fonts. Main body copy is 18px on desktop and 17px on phones. Service descriptions and FAQs are 16px; notes and form help are 13px. Heading sizes retain the original hierarchy.

Replace the four WebP files in assets/images/, or update their HTML references. The hero is a wide photograph; two lookbook photos are portrait, and the artist tabletop is landscape. Update alt text to describe your images. Use object-position for crop changes; object-fit:cover fills image boxes without stretching. Image heights are explicitly controlled in CSS.

Navigation, layout & accessibility

Update the phone, location, and hours consistently in the top information bar, contact section, and footer. The sticky header remains accessible on desktop and mobile. The mobile menu scrolls on short screens. Escape closes it and returns focus to its toggle. Selecting an anchor closes it and moves to the target. The contact, location, and sample-hours bar stays pinned above the navigation. Keep both inside the shared sticky header. A ResizeObserver measures only the two permanent rows, excluding the expanded mobile menu, into --header-height; CSS scrolling offsets use that value.

Responsive breakpoints are 1199px, 991px, 600px, and 359px. The menu and FAQs use two columns on larger screens and one on small screens. The image gallery switches to one column on phones. Avoid fixed widths on long text. Check narrow phones after edits.

Keep the skip link, semantic headings, alt text, form labels, focus outlines, and reduced-motion rules. Keep decorative content hidden from assistive technology. Footer links and dialog buttons use the same alignment rules.

Appointment email drafts

Edit the settings object at the start of assets/js/main.js. Set the actual recipient, business name, and IANA timezone. The current timezone is America/Los_Angeles; the recipient is a reserved demonstration address and will not reach a real business. If changing the timezone, update the “Pacific time” text in the page and draft code too.

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

Editing a field or choosing a different service clears the old draft and email link. Reset clears the form and draft. The page does not send requests automatically, store entries in browser storage, accept payments, or confirm appointments. No external booking link is included. If integrating one, revise the form, explanatory text, FAQs, and policies to match the actual behavior.

The form asks for no medical records. Keep sensitive-information guidance in place.

FAQs & policy dialogs

The six FAQs use Bootstrap Collapse. Keep unique answer IDs and matching data-bs-target and aria-controls. Keep data-bs-parent="#faq-list" to allow one open answer at a time. Questions begin closed. Each whole question is a button. Content-driven heights prevent clipped answers.

Privacy and Terms of Use open Bootstrap Modals. Preserve each dialog’s ID, title reference, close controls, and dismissal attributes. Bootstrap handles focus trapping, Escape, focus return, and the page backdrop. Dialogs scroll on short screens and sit above the header.

Review both policy texts before launch. They describe browser-side draft preparation, optional clipboard access, email handoff, and the need for direct confirmation. They distinguish this page from hosting and email-provider practices. Update them if adding analytics, backend submission, external services, or other behavior.

Cache versions & troubleshooting

• Text looks too small after upload: check that the current custom stylesheet loads after Bootstrap, compare at 100% browser zoom, and clear browser or hosting caches. Keep the viewport meta tag and do not shrink the whole page with transforms. Body text should measure 18px on desktop and 17px on phones.
• Styling or scripts appear unchanged: confirm you opened the updated file. The CSS and JS references use ?v=1.0. Bump the affected value after edits and distribute the matching HTML and asset together. Query strings do not force cached HTML to refresh.
• Email app does not open: configure a default mail app or use Copy draft. Long drafts may exceed some mail-app limits; copying is an alternative.
• Clipboard blocked: permissions and browser context vary. Use the selected text and your device’s Copy command.
• Photos do not load: check filenames, capitalization, and relative paths. Keep the assets folder beside index.html.
• FAQ or policies do not open: ensure the local Bootstrap bundle is present and loaded before main.js.
• A service does not preselect: compare its data-service value with the exact form option.

Launch checklist

• Replace all demo contacts, the placeholder address, sample hours, prices, and illustrative content.
• Set the real email recipient and business timezone; make a complete draft and send a test email yourself.
• Review service descriptions, FAQs, Privacy, and Terms of Use for your actual practices.
• Test filters, preselection, past-date rejection, draft editing, copy fallback, Reset, mobile navigation, and policy dialogs.
• Check the page at desktop, tablet, and narrow phone widths, including long service names and your new images.
• Check keyboard navigation, focus visibility, image descriptions, contrast, and working footer links.
• Remove the demonstration disclosure only after replacing and verifying the sample content.
• Keep dependency notices with the template.

Dependencies & notices

Bootstrap 5.3.3 and its bundled Popper 2.11.8 dependency are included locally under the MIT license. Their notices are in LICENSES.txt. Fonts are system references, not distributed font files. Photographs are illustrative template assets and do not identify verified premises, clients, staff, or actual work. The favicon is simple SVG artwork. Check rights for replacement assets.