NorthPeak Roofing

1. Getting started

NorthPeak Roofing is a Bootstrap 5 landing-page template for roofing businesses. Open index.html in a browser to preview it; edit the HTML, CSS, and JavaScript using a text editor. No build process or database is required. Keep the assets folder beside index.html.

Features include six services, inspection requests, three illustrative roof comparisons, project inspiration, residential and commercial panels, service areas, a financing inquiry, testimonials, an estimate form, FAQs, and policy modals.

2. Files and structure

index.html — website content
README.html — this guide
LICENSES.txt — dependency notices
assets/css/style.css — theme and responsive layouts
assets/js/main.js — form and comparison behavior
assets/vendor/bootstrap/ — local Bootstrap CSS and JavaScript
assets/images/ — twelve WebP photographs
assets/favicon.svg — browser icon

The website loads all assets locally. It has no remote fonts, CDN, analytics, payments, CRM, or live appointment system.

3. Business details

Replace sample details with your real business information. Review services, scope, testimonials, privacy policy, and terms. Use authentic, authorized testimonials; no demonstration review should be presented as real feedback.

4. Colors, typography, and branding

Edit CSS variables at the beginning of assets/css/style.css. The palette uses navy #152d40, deep navy #0c1f2e, copper #e9a477, warm white #faf8f4, and blue-gray supporting text. Typography uses local system Arial/Helvetica fonts.

Adjust section spacing through .section and headings through h1, h2, and h3. Replace the inline roof symbol and wordmark in header/footer and assets/favicon.svg. Keep button text readable in normal, hover, focus, active, and disabled states. Update the stylesheet version query when publishing style changes.

5. Photos and hero cropping

All photographs are AI-generated illustrative images, not actual staff, customer sites, or evidence of completed projects. Replace them with authorized business photography and revise alt text before presenting them as real work.

The full-width hero uses object-fit:cover. Adjust .hero-image object-position for the focal point and .hero-shade for text contrast. Keep accurate width and height attributes. The hero loads first; other images lazy-load.

6. Services and inquiry actions

The six service values are inspection, replacement, repair, metal, gutters, and commercial. Keep service buttons and form option values synchronized. Each action uses data-service, data-audience, and data-city to update only its targeted fields. Empty attributes preserve existing selections. All unrelated entries remain intact.

<a href="#estimate" data-service="inspection">Request an Inspection</a>

Project cards preselect the corresponding service. Residential/commercial panels set property type; commercial also sets the commercial service. City buttons set city. Update the city datalist alongside the coverage buttons.

7. Before-and-after comparisons

Three native range controls operate the shingle, tile, and metal comparisons. The slider below each image is the interaction target. Mouse, touch, and arrow keys adjust it; Home reveals the full before image and End reveals the full after image. Each starts at 50% and works independently.

Replace each pair with matching dimensions, viewpoint, and framing. Keep range IDs, data-frame, data-output, labels, and frame IDs consistent. The script loads the pair together near the viewport. Keep “Illustrative Before & After” labeling until you replace both images with authentic matched project photographs and can substantiate the transformation.

8. Inspection and financing inquiries

Inspection CTAs select Roof Inspections. Preferred dates are requests, not reserved visits. The business must confirm access, scope, any fee, and availability.

Financing is an inquiry-only feature. Its CTA selects “Please contact me about financing” without changing other fields. The selection is included in the email draft. There is no lender integration, credit application, credit check, rate calculation, approval, or payment processing.

Before adding financing offers, confirm the actual provider, available product, eligibility, rates, fees, repayment terms, and required disclosures. Do not add invented zero-interest offers, guaranteed approvals, or monthly payment examples.

9. Form and email drafts

Name, email, service, property type, city, and project details are required. Other fields are optional. Browser validation checks required fields and email format. Preferred dates use the visitor’s local calendar date and reject past dates.

1. The visitor completes the form and chooses Prepare Estimate Inquiry.
2. A structured editable-source draft is displayed for review (the preview text is read-only).
3. Open Email App passes it to the configured email application.
4. The visitor sends it manually. Copy Draft offers a manual fallback.

Nothing is automatically sent. Automatic delivery requires a backend or third-party form service.

The form preserves entries after draft preparation. Editing a field or using a preselection action invalidates the old draft. Reset clears fields and the draft. Photos may be attached manually in the email app; there is no upload control. No financial documents, access codes, or payment information should be requested.

Change the recipient in both main.js and all visible HTML email references. If integrating a backend, add server-side validation, abuse controls, actual delivery handling, truthful success/error messages, and matching privacy information.

10. Navigation, FAQs, and policies

Bootstrap handles the mobile menu, FAQ accordion, and privacy/terms modals. Keep data-bs-target values aligned with element IDs. Modals support focus containment, Escape dismissal, and focus return. Main navigation closes after mobile selection.

The fixed mobile Call/Estimate bar includes safe-area spacing. Preserve bottom clearance so it cannot cover the final content. Anchor offsets account for the sticky header. Preserve the skip link, focus indicators, semantic headings, descriptive links, and reduced-motion support.

11. Dependencies and notices

Bootstrap 5.3.8 is bundled locally, with its license notice and the included Popper notice in LICENSES.txt. The template uses plain HTML, CSS, and JavaScript with no build requirement. Retain dependency notices when redistributing. No additional template license or support commitment is granted by this documentation.

12. Customization checklist and troubleshooting

• Replace business name, phone, email, hours, and coverage consistently.
• Review the service scope and financing text for the real business.
• Replace demonstration testimonials and any imagery presented as actual work.
• Customize metadata, favicon, policies, and accessible alt text.
• Check desktop, tablet, mobile, and narrow layouts after edits.
• Try every CTA, FAQ, modal, and comparison; prepare and reset a test draft.

For missing images, check filename case and relative paths. For old styles, refresh the browser cache and change the CSS version query. If the email application does not open, use Copy Draft or the phone alternative. If menu or modal controls stop working, verify that local Bootstrap JavaScript is present and target IDs still match.