Crafted Remodel

1. Overview

Crafted Remodel is a standalone Bootstrap 5 landing page for remodeling inquiries. It uses charcoal, warm ivory, and muted terracotta, a full-width photographic hero, six service cards, three independent illustrative comparisons, four project ideas, two property panels, eight sample service cities, three sample testimonials, a four-step process, an estimate inquiry, thirteen FAQs, and policy modals.

The template prepares an email draft. Nothing is automatically sent. Automatic delivery requires a backend or third-party form service. Preferred dates do not reserve availability.

It includes twelve generated local WebP photographs. No build process, database, remote fonts, CDN, analytics, payment system, CRM, or map API is required or included.

2. Files and quick start

crafted-remodel/
├── index.html
├── README.html
├── LICENSES.txt
└── assets/
    ├── favicon.svg
    ├── css/style.css
    ├── js/main.js
    ├── images/ (12 WebP files)
    ├── icons/sprite.svg
    └── vendor/bootstrap/
        ├── bootstrap.min.css
        └── bootstrap.bundle.min.js

1. Extract the ZIP and keep index.html, README.html, LICENSES.txt, and assets together.
2. Open index.html to preview. A local HTTP server is preferable for browser feature testing.
3. Edit HTML for content, CSS for styling, and main.js for draft behavior.
4. Replace the sample business information, then test before uploading.

Icons are inline SVG for reliable local-file display. The local sprite contains the same reusable symbols. There is no separate icon font. The device showcase and raw screenshots are not part of this customer package.

3. Business content and sample details

Keep header, contact, footer, form, and FAQ information consistent. Replace all demonstration testimonials with authorized authentic feedback, or remove them. Do not add credentials, guarantees, ratings, or project statistics unless accurate and substantiated.

Review services and scope language for the actual business. The page does not automatically include design, engineering, permits, approvals, or specialist trades. Update the sample privacy and terms wording for the real business and its processing practices.

4. Brand, colors, typography, and spacing

Edit variables at the beginning of assets/css/style.css. Headings use Georgia/Times New Roman, with Arial/Helvetica for body text; no fonts are downloaded.

:root {
  --charcoal: #292823;
  --deep: #211f1b;
  --amber: #d8a287;
  --ivory: #f8f5ef;
  --ink: #302d28;
}

The wordmark is HTML with a local SVG symbol. Edit the header/footer brand together and replace assets/favicon.svg when rebranding. Section spacing is controlled by .section and responsive media queries. Keep button foreground/background contrast in normal, hover, focus, active, and disabled states.

After CSS changes, increase the stylesheet version in index.html, for example:

<link rel="stylesheet" href="assets/css/style.css?v=2">

Update the page title, meta description, and theme-color meta value when adapting the business.

5. Images and full-width hero

All twelve photographs are original generated illustrations. They are not evidence of real employees, actual customer interactions, or completed Crafted Remodel projects.

Every photograph is 1536 × 1024 pixels. Replace with optimized WebP, preserving filename case. Keep dimensions or update each image width/height attribute and CSS crop. Write accurate descriptive alt text. The hero uses fetchpriority="high" and loads immediately; below-the-fold imagery uses lazy loading.

The hero photograph is full-browser-width. Adjust .hero-image object-position separately for desktop and mobile to keep a new subject appropriately framed. Keep the contrast overlay and check headline readability at each size. Do not use a background image with embedded text.

6. Before-and-after comparisons and projects

Kitchen, bathroom, and living-space concepts each have a native range control below the image. The range is the interaction target; dragging the photograph itself does not move the split. The three sliders begin at 50% and work independently.

1. 0% shows the full before photograph; 100% shows the full after photograph.
2. Drag or click/tap the range track using a mouse or touch device.
3. Use Tab to focus, arrow keys to adjust, Home for 0%, or End for 100%.
4. The percentage label and accessible value update with the range.

Before appears on the right and after on the left of the split. Both labels remain visible as orientation guides. JavaScript uses IntersectionObserver with a 400px margin to set both images in a pair to eager loading together as the comparison approaches the viewport. Browsers without IntersectionObserver load all pairs eagerly. Without JavaScript, the static 50% comparison remains visible.

Each after image was generated by editing its matching before image. Major framing and architecture were preserved, but generated textures and minor details can differ. These are illustrative concepts, not measured evidence of workmanship or results. Replace both sides with authentic matched project photographs before presenting comparisons as completed-work proof.

For replacements, use matching camera position, lens, framing, dimensions, lighting, and image crop. Keep range data-frame/data-output attributes matched to their IDs. Project cards link to the estimate form; there is no gallery lightbox or booking integration.

7. Services, audience, and city preselection

Service, comparison, project, property, and city buttons scroll to #estimate. Only nonempty data attributes update the corresponding fields. Existing name, contact details, project description, and all unrelated selections are preserved.

<a href="#estimate" data-service="kitchen"
   data-audience="Residential" data-city="">
  Discuss This Service
</a>

Audience values: Residential, Small Commercial, Rental Property, Other / Not Sure. The commercial-property action selects both Small Commercial and commercial service; the residential-property action changes only the audience. City buttons change only location. Check My Location scrolls without overwriting entries. Location is free text with datalist suggestions, not a coverage or availability check.

When adding a service or changing an option value, update every corresponding data-service attribute. Any preselection invalidates the existing email draft.

8. Form validation and email draft

Required fields: name, email, service, property type, city or ZIP, and project details. Optional fields: phone, project size, existing condition, material/design preferences, preferred discussion date, and timing flexibility.

1. Native browser validation checks required fields and email syntax.
2. JavaScript derives today from the visitor’s local calendar and rejects past dates.
3. Prepare Estimate Inquiry creates a structured draft and mailto link. It does not send or store anything.
4. The visitor reviews the draft, opens their email app, and sends it themselves.
5. Copy Draft uses the clipboard when available. If unavailable, the text is selected for manual copying.
6. Visitors may attach photos in their own email application.

Draft preparation preserves the form entries. Editing any field or using a preselection action hides the old draft and clears its link. Reset clears entries, draft, status, and date errors. Data is not persisted across reloads; no localStorage or cookies are used. No files, payment details, or access codes are requested.

Nothing is automatically sent. An inquiry does not confirm a price, appointment, project acceptance, or contract.

If JavaScript is disabled, draft preparation stays disabled and phone/email alternatives remain available. A configured email client is needed to handle mailto; long drafts may exceed some clients’ limits. Copy into an email service manually when needed. The example email address must be replaced before actual use.

9. Automatic delivery and integrations

Automatic submission needs a configured backend endpoint or form service. Replace the draft submit handler, validate input server-side, add appropriate abuse protection, and handle failures. Show delivery success only after a successful server response. Keep secret keys on the server, never in client JavaScript.

Update form wording, policies, and this guide to describe the actual processing. No online payments, CRM, scheduling calendar, automatic estimating, or live availability is implemented.

10. Navigation, FAQs, policies, and accessibility

Bootstrap 5.3.8 powers the collapsing mobile navigation, thirteen FAQ items, and Privacy/Terms modals. Keep data-bs-target values matched to IDs. The menu closes after a navigation link is selected. Bootstrap provides modal focus containment, Escape dismissal, and focus restoration.

Semantic landmarks, a skip link, form labels, status messages, visible focus, and reduced-motion rules support keyboard use. Sticky-header scroll offsets keep anchor sections clear. The mobile call/estimate bar reserves bottom spacing and respects safe-area insets. Telephone links use tel; email links use mailto. There are no dead social links.

The local SVG sprite is available for reuse; page icons are inline SVG and aria-hidden. Preserve meaningful visible text on controls. Recheck accessibility after content or palette changes; these measures are not an accessibility certification.

11. Responsive layout

The layout uses Bootstrap rows with custom breakpoints: six services display in three columns on large screens, two on medium screens, and one on small screens. Comparisons stack below 992px. Project cards adapt from four columns to two to one. The navigation collapses below 1200px; mobile fixed actions appear below 768px.

Keep imagery proportional, allow buttons to wrap, and inspect long city names, emails, headings, and translated text. Do not remove bottom padding while the fixed bar is active.

12. Dependencies and license notices

See LICENSES.txt and vendor headers for dependency notices. This documentation does not grant additional template license rights; those follow the applicable purchase terms. No support contact is invented.

13. Launch checklist

1. Replace fictional business contacts, hours, service areas, and marketing copy.
2. Confirm all services and scope statements describe the actual business.
3. Replace sample testimonials with authorized genuine feedback.
4. Replace illustrative photos as appropriate. Use authentic matched project photos before claiming completed-project proof.
5. Review Privacy/Terms for actual business and hosting practices.
6. Update metadata, wordmark, and favicon.
7. Check every preselection path and preserve unrelated inputs.
8. Test preferred dates, required fields, reset, draft, copy fallback, and your real email workflow.
9. Check desktop, tablet, mobile, keyboard, touch, and visible button states.
10. Verify HTTPS, local assets, and directory paths after deployment.

14. Troubleshooting