PowerWash Pro

1. Quick start

1. Extract powerwash-pro.zip.
2. Open powerwash-pro/index.html in a modern browser. No build or installation is required.
3. Open this guide alongside it. Edit HTML, CSS, and JavaScript using a plain-text code editor.
4. Replace the sample business information, testimonials, policies, and generated imagery as appropriate before launch.

The estimate form prepares an email draft only. The visitor must send it using their own email application. Nothing is automatically delivered or booked.

2. Package contents

powerwash-pro/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/style.css
    js/main.js
    icons/favicon.svg
    images/ (12 WebP photographs)
    vendor/bootstrap/bootstrap.min.css
    vendor/bootstrap/bootstrap.bundle.min.js

Fifteen page sections include services, three comparisons, project inspiration, residential/commercial panels, approach, service areas, sample reviews, process, about, estimate form, contact/hours, FAQs, header, hero, and footer. No analytics, account system, payments, upload endpoint, or scheduling backend is included.

3. Business details and content

1. Search index.html for PowerWash Pro and replace the business name, introduction, title, and description.
2. Replace all displayed (916) 555-0147 numbers and corresponding tel:+19165550147 links. The supplied number is fictional.
3. Replace estimates@powerwashpro.example in both index.html and assets/js/main.js. The example domain is not a working mailbox.
4. Update the Sacramento service base, all eight city buttons, form suggestions, hours, FAQs, and footer together.
5. Replace the three visibly labeled sample testimonials with authorized real feedback. Do not imply the samples are real.
6. Adapt the Privacy Policy and Terms modal text to actual business and hosting practices.

No showroom address, credentials, ratings, or business statistics are asserted. Confirm the service scope and any statements about operations before publishing.

4. Colors, typography, spacing, and branding

Edit CSS variables at the beginning of assets/css/style.css.

The typography uses Arial/Helvetica/system fallbacks, with no remote fonts. Adjust section spacing via .section, headings via h1,h2,h3, and container width via .container. The wordmark is HTML; the favicon is an original local SVG. Retain strong normal-state button contrast when changing colors.

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

Increase the stylesheet query version after CSS changes to help refresh cached styles.

5. Images and full-width hero

All twelve photographs are original AI-generated illustrations, optimized as local 1536 × 1024 WebP files. They are not completed customer projects or evidence of actual results.

1. Export replacements as optimized WebP, ideally at the same dimensions.
2. Keep filenames or update every HTML reference.
3. Update alt text and width/height attributes if dimensions change.
4. Inspect desktop and mobile cropping. The hero uses object-fit:cover; adjust .hero-photo object-position for your subject.

The hero is prioritized with fetchpriority. Below-fold images are lazy-loaded. Comparison images switch together to eager loading within 400 pixels of the viewport.

6. Comparison controls and gallery

Three independent range controls begin at 50%. The after image is revealed from the left: 0% shows the full before image and 100% shows the full after image. Use the native slider below the photograph with mouse, touch, arrow keys, Home, and End. The photograph itself is not a drag target.

The after images were generated by editing each before image. The main scene and composition are closely preserved, but generated texture and lighting differences can remain. Replace both images with authentic matched photographs before presenting actual project results. Match camera position, image dimensions, crop, and lighting; do not merely apply a color filter.

Keep the visible illustrative labels for generated examples. Gallery cards reuse the three after images and a separate house photograph.

7. Services and preselection

Page actions use these HTML data attributes:

<a href="#estimate" data-service="driveway"
   data-property="Residential" data-city="Sacramento">
  Discuss Your Property
</a>

Only nonempty data attributes change fields; all unrelated entries are preserved. Commercial actions set both Commercial and the commercial service. City actions fill a free-text city/ZIP field, which also accepts other locations. If a draft exists, changing form entries or using preselection hides the stale draft so the visitor can prepare an updated one.

8. Form validation and email fallback

Name, email, service, property type, city/ZIP, and project details are required. Phone, size, condition, material, preferred date, and timing are optional. Native browser validation checks required fields and email syntax. Dates use the visitor’s local calendar date; past dates are rejected. Dates are preferences only.

1. The visitor completes the form and selects Prepare Email Draft.
2. A read-only, selectable draft appears with an Open Email App link.
3. The visitor opens their email client, optionally adds photographs, and sends the message themselves.
4. If no email app is configured, the visitor can select and copy the draft manually or use the telephone alternative.

Form entries remain until Reset Form is selected or the page is left/reloaded. There is no local-storage persistence, server submission, upload, or automatic confirmation. The submit button is disabled if JavaScript is unavailable, with telephone/email alternatives shown. Email-app support and mailto length limits vary; the manual draft is the fallback.

Recipient configuration is in assets/js/main.js. Do not place secret keys in JavaScript.

9. Automatic delivery

To send automatically, connect a real server endpoint or configured form service. Replace the submit handler with a request to that endpoint, validate fields on the server, add appropriate abuse protection and delivery handling, and report success only after a real successful response. Update privacy terms and documentation to match actual processing. This package does not include that backend.

10. Hostinger upload

1. Back up the destination before uploading.
2. Open the file manager for the intended hosting website.
3. For a standalone domain root, upload the contents of powerwash-pro/ into that domain’s document root, commonly public_html/.
4. For a demo subdirectory, create public_html/demos/landing-pages/powerwash-pro/ and upload the template contents there.
5. Keep index.html, README.html, LICENSES.txt, and assets/ together.
6. Open the final HTTPS URL and test links, images, navigation, and the email draft.

For your PixelToWeb setup, use the dedicated demo subdirectory. Do not replace the marketplace root index or any shared/private files. This ZIP contains no marketplace modifications.

Relative asset URLs support subdirectory hosting. No build process, database, npm install, or runtime CDN is required.

11. Navigation, mobile actions, FAQs, and policies

Bootstrap controls the responsive navbar, FAQ accordion, and policy modals. The mobile navigation closes after an anchor is selected. Sticky-header offsets prevent section headings from being covered. The fixed mobile Call / Estimate bar includes safe-area padding and corresponding body clearance.

Keep unique modal IDs and matching button targets. Bootstrap provides modal focus containment, Escape dismissal, and focus restoration. Retain the skip link, labels, focus outlines, semantic headings, and reduced-motion styling. Test after changing content or dimensions.

12. Dependencies and notices

Applicable dependency notices are retained in the vendor files and LICENSES.txt. Template usage rights follow the applicable purchase agreement; this documentation creates no additional license grant. No support contact is invented.

13. Metadata and launch checklist

1. Replace sample contacts, hours, business introduction, service coverage, and policies.
2. Replace sample testimonials with real authorized feedback.
3. Use authentic matched images for claims about completed projects.
4. Update the title, meta description, favicon, and branding.
5. Confirm every service and CTA maps to the correct form option.
6. Verify normal, hover, focus, and active button states.
7. Test desktop/tablet/mobile layouts, keyboard controls, sliders, FAQs, modals, and mobile actions.
8. Send a real test inquiry through your configured email workflow after replacing the example mailbox.
9. Confirm HTTPS, asset loading, and cache refresh after deployment.

14. Troubleshooting

15. Validation performed

Chromium browser checks passed at widths of 1600, 1024, 768, 390, and 320 pixels, including image loading and horizontal-overflow checks. Form preselection, entry preservation, draft/reset, menu, FAQ, modal dismissal, and slider mouse/keyboard/emulated-touch controls were exercised. Static and DOM checks covered local assets, unique IDs, anchor targets, required/email/past-date validation, and independent slider endpoints. README layouts were checked at desktop and mobile widths. Actual external email delivery, real-device touch, Safari, and Firefox were not tested.