FreshCoat Painting

Quick start

1. Extract freshcoat-painting.zip and open index.html.
2. Replace business details, services, California coverage, hours, and testimonials.
3. Set the real inquiry recipient in assets/js/main.js and update HTML contact links.
4. Replace illustrative before-and-after pairs with authentic project photography before using them as customer proof.
5. Review imagery and policy wording, then upload the folder contents to Hostinger.
6. Test the live site, comparison sliders, and actual inquiry receipt.

The form prepares an email draft. Visitors must open their email application and send it themselves. Automatic delivery requires a backend.

1. Overview & features

FreshCoat Painting is a Bootstrap 5 landing page for painting businesses. It includes a full-width photographic hero, six services, three independent before-and-after sliders, four project-inspiration cards, residential and commercial actions, eight California city actions, a four-step process, thirteen FAQs, policy modals, and an estimate inquiry form.

Service, property, and city actions preselect form fields without erasing unrelated entries. There are no instant prices, payments, accounts, subscriptions, live crew availability, or promotional discounts.

2. Package files

HTML5, CSS3, vanilla JavaScript, and local Bootstrap run without a build process. System Arial/Helvetica and Georgia fonts require no downloads. No map, CDN, analytics, or remote embed is included.

3. Business details & content

Edit all repeated values in index.html, including metadata, contact cards, footer, and policies.

• FreshCoat Painting: your actual business name.
• (916) 555-0176 and tel:+19165550176: your real phone.
• hello@freshcoatpainting.example: your real email.
• Sacramento and nearby cities: your actual coverage.
• Mon–Fri 8 am–5 pm, Sat 9 am–1 pm, Sunday closed: your real hours.

The phone is fictional and the example-domain email cannot receive inquiries. There is no walk-in showroom. Update BUSINESS_EMAIL and BUSINESS_PHONE in assets/js/main.js as well as the visible HTML links.

Replace the three sample testimonials with genuine authorized feedback. Keep services, preparation, FAQs, and claims aligned with actual capabilities. Do not imply that lead-paint removal, structural repairs, or hazardous-material work is included.

4. Brand, typography & spacing

Edit both .brand wordmarks in index.html and assets/favicon.svg. The logo uses a simple local inline roller SVG.

--ink: #23313c;
--slate: #244c79;
--amber: #efd3bd;
--paper: #faf9f5;
--pale: #eef2f6;
--blue: #244c79;
--terra: #9c4e38;

These CSS variables are in assets/css/style.css. Body text uses Arial/Helvetica; hero emphasis uses Georgia. Edit body, h1, h2, .section, and .container for typography and spacing. Recheck contrast, text wrapping, and narrow screens after customization.

5. Full-width hero

The hero photograph sits directly in .hero-full, outside the text container, and spans the browser width. The .hero-shade gradient protects text contrast. .hero-copy limits the text width.

Replace assets/images/painting-hero.webp with a wide, high-resolution photo that leaves room on the left for text. A 1920 × 1080 or wider image is suitable; update the HTML dimensions to match your file. The supplied image is 1536 × 1024. object-fit: cover crops the image, with mobile object-position defined in CSS. Check the subject and text at every screen size.

6. Services & project gallery

Edit #services and #projects. Six service cards and all project actions use data-service values that must match an option in #service.

<a class="btn btn-primary" href="#estimate"    data-service="Interior Painting">Request This Service</a>

The gallery reuses interior-after.webp, exterior-after.webp, and cabinets-after.webp, plus trim-door-painting.webp. Keep descriptions and alt text consistent with replacement images. Generated imagery is project inspiration, not verified customer work.

7. Before-and-after sliders

#before-after contains three .comparison-card elements. Each has a .comparison image area, a native range input, a percentage output, and an inquiry action.

The before image fills the frame. The after image lies above it and is clipped using --reveal. At 0%, the complete before image is visible. At 100%, the complete after image is visible. The divider and visible labels follow the range value.

Drag or tap the native range control below each image using a mouse or touch. With keyboard focus, use arrow keys to adjust, Home for 0%, and End for 100%. Each control is independent and begins at 50%. The image itself is not a drag target; the visible range below it is the interaction control.

Both images are requested together when the pair nears the viewport. The JavaScript waits for both to decode before displaying them. Preserve image loading and range IDs if editing the markup.

8. Replace comparison pairs correctly

1. Use authentic, authorized before-and-after photos of the same space.
2. Match camera position, focal length, framing, and image dimensions.
3. Align architecture and fixed objects before exporting.
4. Keep the same aspect ratio and crop for both files.
5. Replace the corresponding before.webp and after.webp files together.
6. Update alt text and image dimensions.
7. Test 0%, 50%, and 100% on desktop and mobile.

The supplied pairs are AI-generated concept examples. They are labeled “Illustrative Before & After” and must not be presented as evidence of completed customer work. Replace them with real project pairs before making that claim.

Do not use different properties or introduce unrelated renovations into a paint-only comparison. Keep furniture, architecture, and non-painted objects aligned. Browser layering cannot correct differences in the original photographs.

9. Image map

All supplied images are 1536 × 1024 WebP. Keep matched pairs identical in size. The hero and selected editorial photos use cover crops; comparison images share one 3:2 frame. Preserve filenames or update src values. Update descriptive alt text and dimensions. The hero is prioritized and below-the-fold photos are lazy-loaded.

Generated photographs illustrate this template and are not evidence of real employees or jobs. Review or replace them for your business.

10. Form & preselection

The form ID is estimateForm. Required fields: name, email, service, property, location, and details. Phone, project size, surface condition, color-selection status, preferred start date, and timing flexibility are optional.

The residential action selects Residential. The commercial action selects Commercial and Small Commercial Painting. City buttons populate the location. Only specified fields change; existing contact and project information remains intact.

Preferred dates use the visitor’s local calendar date as a minimum. Past dates and empty required fields are rejected. Accessible error spans and aria-invalid identify problems, and invalid submission focuses the first error. Preferred timing is not availability or a reservation.

11. Email draft & backend

const BUSINESS_EMAIL = 'hello@freshcoatpainting.example';
const BUSINESS_PHONE = '(916) 555-0176';

Update these constants in assets/js/main.js. The submit handler prepares an encoded mailto link in #emailDraft. Nothing is sent automatically. The visitor must open the email application and send it. Photos can be attached manually in that application; the website has no file upload or automatic attachments.

Editing form data hides any old draft link. Prepare the inquiry again to use current entries. Email clients may limit long drafts, and a configured application is needed. Telephone contact is provided as an alternative.

For automatic delivery, replace the submit handler with a secure backend integration. Validate on the server, add spam controls, keep secrets off the client, preserve entries on failures, and display success only after confirmed acceptance. Test receipt and update privacy and form wording to describe the real data handling.

12. Navigation, FAQs & policies

Navigation targets #services, #before-after, #projects, #areas, #contact, and #estimate. The process section is #process. Bootstrap Collapse controls #mainNav and closes it after a navigation selection.

The thirteen FAQs use #faq0 through #faq12 with matching targets and aria-controls. Policies use #privacyModal and #termsModal. Bootstrap plus the local keyboard handler support focus containment, Escape, and focus restoration.

The mobile action bar has page-bottom and safe-area spacing. Reduced-motion and visible focus rules are included. This guide’s top menu has a Back to Template link to index.html.

Review and replace the sample policy text before launch. The supplied wording describes the static email-draft flow without invented analytics, fees, or warranties.

13. California coverage & metadata

Sample cities: Sacramento, West Sacramento, Elk Grove, Rancho Cordova, Citrus Heights, Roseville, Rocklin, and Folsom. Keep #areas, FAQs, contact, footer, hero, and metadata consistent. This is not statewide coverage.

Edit the page title and meta description in index.html. A favicon and theme color are included. No canonical URL, sitemap, structured data, or social preview image is supplied. Use real production information if adding these. README.html is marked noindex and can be kept offline.

14. Hostinger & launch checklist

1. Extract freshcoat-painting.zip.
2. Upload the contents of freshcoat-painting to public_html or a chosen subdirectory using File Manager or SFTP.
3. Keep index.html and assets together; preserve case-sensitive names and relative paths.
4. Open the final HTTPS URL and check every asset and interaction.
5. Confirm real inquiries reach the configured destination.

• Replace contacts, hours, coverage, services, and testimonials.
• Review images, illustrative labels, and policy wording.
• Use authentic matched pairs before claiming completed-project proof.
• Test sliders with mouse, touch, and keyboard.
• Check full-width hero cropping at desktop, tablet, and mobile sizes.
• Test form preservation, validation, FAQs, modals, and mobile actions.

Bootstrap 5.3.3 and bundled Popper notices are retained in LICENSES.txt and vendor files. No downloaded font or icon library is included. This guide creates no additional license rights, support contracts, or purchase terms.

15. Troubleshooting