# Craftline

An original MRHTML home services template. A navy and orange split hero, locally bundled kitchen photography, clear service rows, an editorial inspiration gallery, a project process, and a practical inquiry checklist create a useful introduction to a small home improvement business.

## Open it

Unzip the complete folder and open `index.html` in a modern browser. Keep the `assets` directory, `styles.css`, and `script.js` next to it. No installation, account, build process, web font, or live image service is needed. Upload the same folder contents to your static host after customization.

## Make it yours

1. Replace Craftline, the introduction, page title, description, services, and all fictional business labels with your own accurate identity. This sample claims no license, insurance, reviews, years of experience, completed commissions, customers, or measurable results.
2. Edit colors in the `:root` custom properties of `styles.css`. The site uses installed Arial, Helvetica, and Courier New with generic fallbacks.
3. Replace the inspiration photographs with your own project photos if you want to present completed work. The supplied photos are clearly labeled **inspiration, not Craftline projects**. Keep those labels if retaining the photos. Update useful alt text, explicit image dimensions, and photographer credits when replacing files. See `ASSETS.md` for individual photo sources, free license verification, and transformations.
4. Update each service and native disclosure to describe work you actually provide. Check relevant business claims and required credentials before publishing. The supplied carpentry sketch is decorative, has no dimensions, and is not a construction or safety specification.
5. Replace the illustrative service-area map and fictional neighborhood labels with actual coverage details. Hillfield, Riverbank, and Old Quarter are fictional areas. Do not present the drawing as a real map or directions.
6. The inquiry checklist is a **local planning aid**. It does not transmit or persist information. The four checkboxes work without JavaScript; JavaScript adds the count and reset. If you change their number, also update the complete-state text in `script.js`. The code does not collect personal information and has no storage dependency.
7. **Contact is not connected.** Replace `.contact-note` with an accurate business contact or verified booking destination when you have one. An ordinary `mailto:` link opens the visitor's mail app and does not prove a message was sent. A form or automated quote workflow needs a separately configured and tested service. Never add a false success message or imply the sample checklist submits an inquiry.
8. Before publishing your customized real site, remove `<meta name="robots" content="noindex,follow" />`. It is included so the uncustomized MRHTML demo is not indexed. Set accurate metadata and add a canonical URL only when the real public URL is known.

## Included behavior and limits

The navigation reaches real sections and focuses the destination. Native disclosures explain services, inspiration ideas, and common questions. The local project checklist updates its count and clearly states that nothing has been sent; Reset clears only the checklist on the current page. There are no accounts, payments, booking slots, live estimates, forms, recipients, backend, cookies, analytics, external fonts, or runtime fetch calls.

All content remains available without JavaScript. This template also works in an opaque-origin iframe using only `sandbox="allow-scripts"`; it does not require forms, same-origin access, storage, popups, or top-level navigation. External credit links are followed only if the visitor clicks them.

## Accessibility and responsive use

The site includes a skip link, semantic headings, visible focus indicators, labeled native checkboxes, keyboard-operable disclosures, status announcements, reduced-motion handling, and layouts down to 320px. New content can affect accessibility. Test keyboard navigation, browser zoom, mobile layouts, replacement image descriptions, and contrast after customization.

## Files and licensing

- `index.html`: page, services, gallery, original SVG, and guide.
- `styles.css`: palette, layouts, original map illustration, and responsive rules.
- `script.js`: local checklist and anchor focus.
- `assets/kitchen.webp` and `assets/interior.webp`: optimized local photographs.
- `ASSETS.md`: individual provenance and separate photo licensing.
- `LICENSE`: MIT license for original code, copy, and artwork.

Original MRHTML materials are copyright 2026 MRHTML and released under MIT. The bundled photographs use the separate Unsplash License, not MIT. The footer's **Designed by MRHTML** credit links to `https://mrhtml.com/` with `rel="nofollow"`. MIT does not require a visible footer or followed link; retain its copyright and permission notice in copies or substantial portions of the code.