Shield Pest Control

Quick start

1. Extract shield-pest-control.zip and open index.html.
2. Replace sample business details, California coverage, hours, services, and testimonials.
3. Configure the real email recipient in assets/js/main.js and update the HTML contact links.
4. Confirm the $200 promotion and finalize its terms before launch.
5. Review images and policies, upload the contents to Hostinger, and test the public URL.

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

1. Overview & features

Shield Pest Control is a responsive Bootstrap 5 landing page with a full-width photographic hero, six pest services, three treatment plans, a $200 new-customer offer, eight California city actions, residential and commercial inquiry actions, twelve FAQs, policy modals, and a quote form.

Buttons preselect only their designated fields and preserve unrelated entries. The offer requires a visitor-provided new-customer declaration before preparing an inquiry. It does not establish eligibility or apply a discount. No live appointments, payment, analytics, subscriptions, or accounts are included.

2. File structure

No build process, external font, CDN, or installation is needed. Arial/Helvetica and Georgia are system fonts.

3. Business information

Edit index.html and replace repeated values consistently in the hero, areas, contact, FAQs, footer, and policies.

• Shield Pest Control: your business name and wordmarks.
• (916) 555-0148 and tel:+19165550148: your real phone.
• hello@shieldpestcontrol.example: your real email.
• Sacramento service base and the eight listed cities: your actual coverage.
• Mon–Fri 8 am–5 pm, Sat 9 am–1 pm, Sunday closed: your hours.

The phone is fictional and the example-domain email cannot receive inquiries. There is no walk-in address. Also update BUSINESS_EMAIL and BUSINESS_PHONE in assets/js/main.js.

Replace all three sample testimonials with genuine authorized feedback. Align service descriptions, qualifications, claims, FAQs, and exclusions with your actual business and applicable requirements. Do not add unsupported guarantees or universal safety claims.

4. Brand & full-width hero

Edit the header and footer .brand elements and assets/favicon.svg. The palette in assets/css/style.css uses --ink #132e35, --slate #285b47, --amber #e7bc68, --paper #faf9f5, and --pale #eef3ed.

The hero image spans the full browser width through .hero-full, outside the text container. The .hero-shade overlay maintains text contrast. The .hero-copy limits text width, while the image uses object-fit: cover. Mobile object-position focuses on the right side of the photo. Keep the image full width when customizing.

Adjust body, h1, h2, .section, and .container rules for typography, spacing, and content width. Recheck desktop and mobile wraps after changes.

5. Services & treatment plans

Edit #services and #plans in index.html. Six service cards use data-service, which must match an option in #service. Three plan cards use data-plan matching #plan.

<a href="#estimate" data-plan="Ongoing Home Care"    class="btn btn-primary">Discuss This Plan</a>

Plan choices are Targeted Treatment, Ongoing Home Care, Property & Small Business Care, and Help Me Choose. They have no fixed prices or automatic recurring billing. Keep scope, follow-up, exclusions, repairs, and quote wording consistent across plans and FAQs.

6. $200 new-customer offer

The promotion is in #new-customer-offer. The action uses data-offer="$200 New Customer Offer". It selects #offer in the form but never checks #newCustomer on the visitor’s behalf.

When the offer is requested, the visitor must check “I am a new customer” or remove the offer before preparing the email. This declaration is not eligibility confirmation. The prepared email includes both the offer and a Yes/No declaration.

• New customers only.
• Applies to qualifying treatment plans.
• Eligibility and qualifying services are confirmed before work is agreed.
• The $200 discount must appear in the written quote before acceptance.
• Requesting the offer does not apply it or reserve an appointment.

Confirm this requested promotion with the business and finalize the actual terms before launch. No expiry date, minimum spend, coupon code, countdown, or price calculation is implemented.

Keep the hero callout, offer section, form option, JavaScript comparison, FAQs, and Terms consistent if changing the offer amount or wording.

7. California coverage & preselection

Sample coverage: Sacramento, West Sacramento, Elk Grove, Rancho Cordova, Citrus Heights, Roseville, Rocklin, and Folsom. This is not a claim of statewide coverage. City buttons set data-location; Check My Location only scrolls to the form.

The home action selects Residential. The property action selects Commercial / Managed Property and Property & Small Business Care. Unrelated names, details, dates, and other entries are preserved. Editing entries hides any old email draft until the visitor prepares it again.

8. Photography

All photographs are original AI-generated illustrations of the service setting, not proof of real staff or customer work. Review or replace them before launch.

Use 1536 × 1024 or larger photographs with intentional crops. The hero needs a wide composition with the subject on the right and room for text on the left. A 1920 × 1080 or wider replacement is suitable; update width and height attributes to match the actual image.

Store optimized WebP files locally. Preserve names or update src values. Use descriptive alt text. The hero is prioritized; below-the-fold images are lazy-loaded. Check object-fit and object-position crops on desktop and mobile.

9. Form validation & preferred dates

The form is #estimateForm. Required fields: name, email, service, plan, property, location, and details. Phone, size, date, time, and offer selection are optional. The new-customer checkbox becomes necessary only when requesting the offer.

The date minimum uses the visitor’s local calendar date and refreshes at submission. Past dates are rejected. No live calendar or availability is checked.

Visible error spans and aria-invalid states identify invalid fields. Invalid submission focuses the first field needing attention. Do not request sensitive information. No file upload is provided.

10. Email draft & backend

const BUSINESS_EMAIL = 'hello@shieldpestcontrol.example'; const BUSINESS_PHONE = '(916) 555-0148';

Update these in assets/js/main.js and the HTML contacts. A valid form builds #emailDraft as an encoded mailto link. Visitors must open it and send the email themselves. Long drafts and unconfigured email applications can limit this fallback; a phone alternative is provided.

For automatic delivery, replace the submit handler with a secure backend integration. Validate server-side, add appropriate spam controls, keep secrets off the client, preserve data on errors, and show success only after confirmed acceptance. Test receipt and update form explanations and privacy wording. A delivered inquiry still does not confirm an appointment or discount.

11. Navigation, FAQs & policies

Navigation targets #services, #plans, #new-customer-offer, #areas, #contact, and #estimate. Bootstrap controls #mainNav, the #faq accordion, and #privacyModal/#termsModal. Keep IDs and matching data-bs-target and aria-controls attributes aligned.

Modals support Escape, focus containment, and return focus. The mobile bar uses safe-area padding and page-bottom spacing. Reduced-motion and visible focus styles are included.

README.html’s top horizontal menu has a Back to Template link to index.html, visible at all tested widths. Review and replace the sample policy wording for the real business; the supplied wording describes the static email-draft flow and requested offer.

12. Metadata & Hostinger

Edit the title and meta description in index.html. Keep California coverage accurate. A favicon and theme color are included; no sitemap, canonical URL, structured data, or social image is supplied.

1. Extract the ZIP.
2. Open Hostinger File Manager or SFTP.
3. Upload the contents of shield-pest-control into public_html for the main domain, or a chosen subfolder.
4. Keep index.html and assets together and preserve filename case.
5. Visit the final HTTPS URL and test images, menu, forms, offer selection, policies, and phone links.

Relative paths work in subdirectories. README.html is marked noindex and can remain offline if desired.

13. Dependencies & launch checklist

Bootstrap 5.3.3 CSS and bundled JavaScript are local. Retain Bootstrap/Popper notices in LICENSES.txt and vendor files. No external icon or font library is included. This guide does not create license grants, purchase terms, or support entitlements.

• Replace sample business details, coverage, hours, and reviews.
• Verify services and treatment claims.
• Finalize $200 offer eligibility and terms.
• Review or replace generated images and policies.
• Configure contact destinations and test actual receipt.
• Test preselection, declaration validation, dates, menus, keyboard focus, and mobile spacing.
• Verify all assets at the final hosting path.

14. Troubleshooting