NORTHLINE BARBER

Overview

Northline Barber is a monochrome, responsive barbershop landing page built with Bootstrap 5, HTML, CSS, and vanilla JavaScript. It includes a full-width photographic hero, eight sample services, category filters, a sample team, studio imagery, visit details, appointment email drafts, FAQs, and policy dialogs.

Quick start

1. Extract the ZIP. Keep the complete northline-barber folder structure.
2. Open index.html in a current browser to view the template. Use a local static web server for the closest match to a hosted page; some browsers restrict clipboard access and external SVG symbols when opened directly from disk.
3. Edit the files in a plain-text code editor. No build tools, package installation, account, or external API are needed.
4. Replace demonstration content and verify the appointment draft before launch.

All Bootstrap files, scripts, icons, and photographs are local. Typography uses system fonts; the page does not request remote fonts or dependencies.

File structure

Edit the brand and content

In index.html, replace the .brand text in the header and footer. Update the page title, description, hero, business story, location, and footer together. The copy is written in a conversational shop-owner voice. The address (1847 Northline Avenue, Suite 5, Sacramento, CA 95814) is fictional. The About section and footer identify the fictional template preview; replace example business details and confirm service promises before launch. The logo is editable text. Change favicon.svg separately.

Service rows are inside .service-list. Each has a name, description, price, category, and request link. Keep the form’s service options and each link’s data-service value identical to the visible service name. The preview uses fixed illustrative USD amounts; no “from” pricing or durations are included. If you add durations, label sample estimates unless confirmed.

The template-preview note identifies team profiles and other business details as fictional examples. Replace their names and descriptions with supplied facts and suitable photographs before representing them as staff. Avoid adding credentials, testimonials, or business history without confirmation. Update the sample-content disclosure to match the final content.

Hours appear in both Visit and the footer. Contact details appear there, in the form guidance, and in both policy dialogs. Search all files for 999-999-9999, 9999999999, hello@northlinebarber.example, and 1847 Northline Avenue, Suite 5, and Sacramento, CA 95814 when replacing placeholders. Update the JavaScript recipient too.

Images and studio gallery

Replace hero.webp, studio.webp, and the five individual barber portraits (alex-morgan.webp, jordan-lee.webp, sam-rivera.webp, casey-brooks.webp, and jamie-patel.webp) with your own appropriate WebP images. Use clear, sufficiently large photographs. Update alt text and intrinsic width/height attributes when image dimensions change.

The hero uses object-fit: cover, a dark overlay, and responsive object-position values. Adjust these in CSS to preserve the subject and copy contrast. The five team cards use individual 4:5 portraits, five columns on wide screens, three cards followed by two centered cards on medium screens, and a single column on phones. The two-image studio gallery uses responsive heights and crops. Do not remove the CSS sizing while leaving large intrinsic dimensions.

The gallery shows illustrative imagery, not verified client work or before-and-after results. Its figures are static; no lightbox or slideshow is included. The five barber portraits and names are fictional examples, not verified staff. Replace each portrait and its matching profile before launch.

Colors, type, and responsive layout

Core colors live in :root at the start of style.css: --ink, --paper, --soft, --muted, and --line. Replace related hard-coded grayscale values when changing the palette. Preserve readable contrast in the normal, hover, selected, focus, and expanded states.

Headlines use the Arial/Helvetica system stack with letter-spacing: -0.02em and line-height: 1.08 on desktop and mobile. Italic editorial words use Georgia/Times New Roman. Supporting paragraphs use 16px type; service descriptions use 14px on desktop and 13px on mobile. Navigation, controls, FAQs, and footer copy are sized for comfortable reading. Small uppercase section labels retain their original scale. No font files are distributed. Spacing comes from .section, .wrap, grid gaps, and section-specific rules. Avoid applying blanket spacing reductions.

Responsive changes occur at 1199, 991, and 600 pixels. Check at 320 pixels after edits. Keep comfortable touch targets and visible focus; do not hide essential content behind animations. Reduced motion is supported through CSS and JavaScript.

Navigation and service controls

The header is sticky at all widths. Its measured height updates --header-height through ResizeObserver. Anchor navigation closes the menu, recalculates the header offset, scrolls the target below it, and moves keyboard focus. CSS scroll padding covers standard focus/anchor movement. Keep the header ID and target section IDs in sync.

Below 992 pixels, Menu toggles a vertically scrollable navigation panel constrained to the available screen height. Escape closes it and returns focus to Menu. It also closes on outside interaction, navigation, or switching to desktop width.

Service categories use native buttons with aria-pressed. Tab reaches every button; Enter or Space activates it. The selected button changes contrast and a live region reports the count. To add a category, update the filter’s data-filter, row data-category, and displayed counts. Keep All services available.

Request links preselect their service and preserve unrelated form entries. Changing a service invalidates any previous draft.

Appointment email drafts

At the top of assets/js/main.js, edit CONFIG.recipient, CONFIG.timezone, and CONFIG.businessName. The default recipient is hello@northlinebarber.example, which is a reserved demonstration address and must be replaced. The timezone is America/Los_Angeles.

The form requires name, email, service, and preferred date. Phone, time, and message are optional. Native browser validation checks required fields and email format. The script rejects blank-space names and past dates using the configured business timezone. It does not check business hours, past times within today, staff schedules, or live appointment availability. If you change timezone, also update the Pacific Time labels, error copy, and draft text.

1. Prepare email draft validates the form and displays a read-only draft with recipient, subject, and message.
2. Open email app uses a percent-encoded mailto: link. The visitor must send the email themselves. An installed or configured email app is required.
3. Copy draft uses the Clipboard API when permitted. If unavailable or blocked, the visible draft is selected and the visitor is prompted to use their device’s Copy command.
4. Any edit to form fields hides and clears the old draft. Preparing a fresh draft is required.
5. Reset clears the form, validation state, and visible draft. It does not erase anything already copied or opened in another app.

There is no backend, payment processor, booking engine, browser storage, or automatic email sending. No external booking link is supplied. If you add one, use the actual business URL, explain the handoff, and revise policy text. Do not invite sensitive medical or treatment details in this email form.

FAQs and policy dialogs

The numbered FAQ panels use Bootstrap Collapse, two columns on larger screens and one on smaller screens. All start closed. data-bs-parent="#faqList" keeps one answer open at a time. Each question is a full-width button within a heading. Maintain unique IDs and matching data-bs-target / aria-controls values. Keep aria-expanded="false" initially and let Bootstrap update it.

Footer controls labeled Privacy and Terms of Use open Bootstrap modals. Their close buttons, Escape support, focus trapping, focus return, and scrollable bodies rely on the bundled Bootstrap script. Modals and backdrops layer above the pinned navigation.

Edit policy text in the modal bodies of index.html. The supplied wording describes browser draft preparation, email handoff, clipboard use, possible hosting logs, and direct confirmation. Review it against the final implementation and business practices before launch. Adding analytics, a backend, embeds, or an external booking platform requires corresponding policy updates.

Cache versions

Custom CSS and JS links in index.html currently use style.css?v=1.3 and main.js?v=1.0. Bump each affected token whenever that asset changes, such as style.css?v=1.3. Deliver matching HTML and assets together. Changes to images can use new filenames or explicit versions in their URLs.

A query string does not guarantee cached HTML or a hosting cache has refreshed. If an update looks missing, first inspect the actual file and URL being viewed and confirm the delivered revision.

Launch checklist

• Replace every demonstration contact, address, price, hour, profile, and illustrative-content label as appropriate.
• Set a working recipient in JavaScript and all visible contact links.
• Verify the services, filters, category counts, form options, and preselection agree.
• Check 320-pixel phones, tablet, desktop, and short-screen mobile navigation.
• Check image crops, keyboard focus, section offsets, contrast, FAQ expansion, and policy dialog behavior.
• Try empty, invalid-email, and past-date form entries, then review a valid draft.
• Verify email handoff, copy fallback, edit invalidation, and Reset.
• Review Privacy and Terms of Use for the actual deployment and any added services.
• Retain dependency license notices. Update title, meta description, and favicon.
• Confirm dates and prices do not imply guaranteed availability or confirmed appointments.

Troubleshooting

Dependencies and licenses

Bootstrap 5.3.3 is distributed under the MIT License. Its JavaScript bundle includes Popper, also under MIT. Complete notices are in LICENSES.txt. Preserve them when redistributing the dependencies.

System fonts are referenced but not bundled. Included SVG icons and the favicon are original simple artwork. The local photographs are illustrative template assets; replace them as needed for the actual business and verify rights for any replacement assets.