Blush Nail Bar

Start here

Blush Nail Bar is a Bootstrap 5 landing page for a nail salon, 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.

blush-nail-bar/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/style.css
    js/main.js
    vendor/bootstrap.min.css
    vendor/bootstrap.bundle.min.js
    images/ (three WebP photos and favicon.svg)

Edit the business details

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

• Replace the editable “blush / NAIL BAR” 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 fictional address, Pasadena location, sample hours, 999-999-9999, and hello@blushnailbar.example. The sample address is invented and is not a real salon location. 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 manicure, pedicure, or art. 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 French finish and simple art prices are additions to a manicure. Detailed art is quoted after discussion. 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 three WebP files in assets/images/, or update their HTML references. The hero is a wide photograph; the French manicure and studio originals are portrait. 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

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. A ResizeObserver measures header height into --header-height; CSS scrolling offsets use that value.

Responsive breakpoints are 1199px, 991px, and 600px. 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

• Styling or scripts appear unchanged: confirm you opened the updated file. The CSS and JS references use ?v=1.1 for CSS and ?v=1.0 for JavaScript. 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 fictional 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.