Pure Beauty Co.

Start here

Pure Beauty Co. is a Bootstrap 5 landing page for a solo beauty professional. Its plum, ivory, and apricot design includes a portrait hero, personal introduction, six filterable sample services, an editorial lookbook, a clearly marked review placeholder, visit planning, an email inquiry, contact details, eight FAQs, and Privacy and Terms of Use dialogs.

Extract the ZIP and keep the assets folder beside index.html. Open index.html in your browser. No build process is required. Use a local web server when testing clipboard permissions.

pure-beauty-co/
  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/beauty-portrait.webp
  assets/images/soft-color.webp
  assets/images/beauty-details.webp
  assets/images/favicon.svg

Your business & genuine social proof

Edit index.html to change the text logo, page title and description, personal introduction, service copy, visit details, FAQs, and footer. Add your real name and personal story to the introduction if you wish. There are no supplied staff names, credentials, awards, or client statistics.

The Client notes section is a review-layout placeholder, not a testimonial. Replace the placeholder with genuine client words used with permission and an accurate attribution. Add an authentic review-source link if available. Remove the placeholder label only after replacing its content; alternatively remove the section and its footer link. Do not add invented star ratings or endorsements.

The lookbook contains illustrative beauty inspiration, not verified client work. Replace it with permissioned portfolio photography before describing it as your work. Edit alt text and captions with each replacement. The hero portrait is not a staff profile.

Contacts & hours

Pasadena, California is the sample city. Replace Address to be announced, 999-999-9999, and hello@purebeauty.example before launch. The example inbox is not a functioning business inbox. The placeholder phone deliberately has no telephone link; add tel: when a genuine number is supplied.

Sample hours: Tuesday–Friday 10am–6pm, Saturday 9am–4pm, Sunday–Monday closed, Pacific time. Keep the pinned information bar, Visit section, footer, and this guide consistent. There is no map or invented street address.

Services & categories

All services, times, and prices are samples. Confirm actual offerings and what each service includes. Update the menu and matching form options together. Numbered rows use data-category values makeup, brows, and personal. Filter buttons use matching data-filter values; keep all for the complete menu. Update the accessible initial count when adding or removing services.

Filters support clicking, arrow keys, Home, and End. The chosen filter is shown through aria-pressed and visual styling. Each service link’s data-service must match its form option exactly, including duration. Selection preserves other form entries and invalidates an existing draft.

Appointment requests & optional booking

Edit settings at the top of assets/js/main.js. Set recipient to your real inbox, businessName to your business, and timezone to the correct IANA timezone. America/Los_Angeles is used for this demo. Update visible Pacific-time references and the validation message if changing it.

const settings = {
  recipient: 'hello@purebeauty.example',
  timezone: 'America/Los_Angeles',
  businessName: 'Pure Beauty Co.',
  bookingUrl: ''
};

For live booking, put a real HTTPS scheduling-provider URL in bookingUrl. The hero link marked data-booking-link changes to Book online and opens the provider in a new tab. Invalid or non-HTTPS values keep the inquiry link. Add data-booking-link to other CTAs if needed. Update the FAQ and policy copy to reflect the actual setup. Availability, confirmation, payments, and reminders belong to that provider.

The default form requires name, email, service, date, and time. Phone and message are optional. Past dates are rejected in the configured business timezone. Times are preferences and are not checked against studio hours or live availability.

Prepare my email creates a visible draft. Open email app hands it to the visitor’s mail app for manual sending. Copy draft uses the clipboard when permitted, or selects the text for manual copying. Editing any field, selecting a service, or selecting Returning client invalidates the draft. Reset clears the form and draft. First visit, Returning client, and Change an existing appointment describe the request; none changes a real appointment.

This page does not submit entries to a server or store them in browser storage. Ask visitors to omit sensitive personal information. Confirm appointments directly after receiving an inquiry.

Colors, type & photographs

:root {
  --ivory: #F6F0E8;
  --paper: #FFFCF7;
  --plum: #482838;
  --deep: #35212D;
  --apricot: #EBC0A7;
  --rose: #D7B2B1;
  --ink: #422D38;
  --muted: #725B65;
  --line: #D8C8C5;
}

Styles live in assets/css/style.css. Version 1.1 balances the desktop service menu into two columns, places the inquiry introduction above a wider form, and tightens selected section padding. The final CSS blocks contain spacing and footer-alignment adjustments. The footer copyright has no year. Headings use system Georgia; body and controls use Arial/Helvetica. Body copy is 18px desktop and 17px phones. Hero copy is 20px desktop, 19px tablet, and 18px phones. Service descriptions, FAQs, contact details, and policy text are 16px. Labels are 15px, inputs at least 16px, and help text 13px. Main headings scale with the viewport; mobile hero headings scale between 38px and 48px.

The wide beauty-portrait.webp fills the hero on desktop. On phones it moves into the lower part of the hero, leaving a solid readable area for the headline. soft-color.webp sits in an arched frame; beauty-details.webp is the still-life image. Images use object-fit:cover and responsive object-position. Adjust these crops after replacement; keep natural proportions. The SVG favicon is editable.

Navigation, FAQs & dialogs

The information bar and menu share one sticky header. ResizeObserver measures .pinned-rows and updates --header-height for anchors and mobile menu space. Keep the expanded menu outside .pinned-rows. The mobile menu closes on navigation or Escape and scrolls on short screens.

Anchor destinations receive focus without a border around the section. Links, buttons, and form controls retain visible keyboard focus. Preserve the skip link, semantic labels, reduced-motion styling, and descriptive image alternatives.

FAQs use Bootstrap Collapse, begin closed, and open one at a time. Keep unique answer IDs, aria-controls, and data-bs-target values matched, with data-bs-parent="#faq-list". Privacy and Terms of Use use Bootstrap Modals, with close buttons, Escape, focus trapping and return, and scrollable content.

Launch checklist & troubleshooting

• Replace sample contacts, hours, business copy, services, durations, and prices.
• Add genuine reviews and permissioned portfolio photography, or remove the placeholder review section.
• Review Privacy, Terms of Use, and FAQs against your actual practices. Supply genuine cancellation and rescheduling terms rather than treating sample wording as a business policy.
• Set a real inbox and correct timezone; prepare and manually send a test inquiry.
• If using a booking provider, test the actual HTTPS destination and revise the related copy.
• Test service filters, preselection, first/return/change requests, past-date rejection, draft editing, copy, and Reset.
• Check desktop, tablet, 390px, 320px, and short screens. Keep the pinned bar readable and dialogs above the header.
• Custom CSS uses ?v=1.2 and JavaScript uses ?v=1.1. Increase affected versions after edits and distribute matching HTML and assets. Cached HTML may also need refreshing.

If styling or photos are missing, check filename case and relative paths. If email handoff does not work, configure a mail app or copy the draft manually. If text looks small, check browser zoom at 100%, the viewport meta tag, and that custom CSS loads after Bootstrap. If a service does not preselect, compare its data-service value with the form option text.

Dependencies & notices

Bootstrap 5.3.3 and bundled Popper 2.11.8 are provided locally under MIT licenses; see LICENSES.txt. System font references require no bundled font files. Three illustrative photographs and an editable SVG favicon are included. Check usage rights for any replacement images, fonts, and client reviews.