Evergreen Landscape

5-Minute Setup

1. Extract the ZIP and open evergreen-landscape/index.html.
2. Replace the sample name, phone, email, service areas, hours, and testimonials in index.html.
3. Review all generated photographs and replace them with your business photography where appropriate.
4. Configure the inquiry destination in assets/js/main.js. Connect a backend if you need automatic delivery.
5. Review Privacy Policy and Terms, then upload the folder contents to your hosting account.
6. Test the public site and send a real test inquiry before launch.

The included form prepares an email draft only. It does not send inquiries or confirm bookings. The example-domain email address must be replaced.

Package Contents

evergreen-landscape/
├── index.html
├── README.html
├── LICENSES.txt
└── assets/
    ├── favicon.svg
    ├── css/style.css
    ├── js/main.js
    ├── vendor/bootstrap.min.css
    ├── vendor/bootstrap.bundle.min.js
    └── images/  (11 WebP photographs)

The homepage contains all sections. Project details, Privacy Policy, and Terms open in modals; there are no separate service pages. README.html is self-contained documentation.

Technology & Included Features

HTML5, CSS3, vanilla JavaScript, and locally bundled Bootstrap 5.3.3. No build process, package installation, external fonts, CDN requests, map API, or third-party embed is required.

• Responsive header and mobile navigation.
• Six service cards with form preselection.
• Six project inspiration cards, category filters, and project modals.
• Property-type, service-area, and seasonal-care estimate actions.
• Validated inquiry form with an explicit email-draft fallback.
• FAQ accordion, policy modals, mobile call/estimate bar, and automatic footer year.

Use a text editor such as VS Code to customize the files. Open index.html directly for a quick preview, or serve the folder with a local static web server. No JavaScript fetch requests are needed.

1. Business Information

Edit index.html. Search the whole file so the header, service areas, contact section, FAQs, footer, and metadata remain consistent.

The phone number is fictional and the example-domain email is not a live inquiry destination. No walk-in address is included.

<a href="tel:+16305550148">(630) 555-0148</a>
<a href="mailto:hello@evergreenlandscape.example">Email us</a>

2. Logo, Colors & Typography

The wordmark is inline SVG plus editable text inside .brand. The browser icon is assets/favicon.svg.

Edit the :root variables at the top of assets/css/style.css:

--bg: #142c24;       /* main forest background */
--surface: #1c352b;  /* cards */
--deep: #10241d;     /* alternating sections */
--leaf: #c2d9aa;     /* buttons and accents */
--ink: #f5f3e9;      /* headings */
--muted: #bac7bc;    /* body copy */

Headings use the locally available Georgia/Times New Roman serif stack. Body copy uses Arial/Helvetica. No font files or external font services are required. Change h1,h2 and --bs-body-font-family to adjust typography.

Section spacing is controlled by .section; cards, forms, and buttons have named CSS selectors. Keep body copy readable and check contrast after changing colors.

3. Services & Page Content

Edit the six cards in #services and matching choices in #service. Service names passed by data-service must exactly match an option value (the option text is its value in this template).

<a href="#estimate" data-service="Garden Beds & Planting">
  Request This Service
</a>

Also update relevant project entries in the projects array in main.js and any seasonal service buttons. To add or remove a service, update each of these references together.

The homepage contains services, project inspiration, residential/commercial panels, the Evergreen approach, service areas, sample reviews, seasonal care, process, about, estimate, contact, and FAQs.

4. Image Replacement Guide

All photography is generated illustration, stored locally under assets/images/. It is not evidence of real employees or completed customer work.

Each supplied photograph is 1536 × 1024 px. Keep replacement files at a 3:2 ratio, ideally at least that size; a wider 1920 × 1280 hero also works. CSS crops imagery responsively with object-fit: cover. Inspect the actual crops on mobile and desktop.

Keep filenames unchanged for the simplest swap, use real WebP encoding, and update alt text and width/height attributes if dimensions change. Hero loading is prioritized; other photos load lazily. Replace generated people and project illustrations with representative business photographs before presenting them as real work.

5. Project Gallery & Filters

Cards live in #projectGrid. Each parent .project-col has a data-category: Gardens, Lawns, or Patios & Paths. Filter buttons use matching data-filter values, plus All.

Each project button has a zero-based data-project index referring to the projects array in main.js. Each array entry contains the title, image filename stem, service name, and description.

['Front Yard Welcome', 'project-front-yard',
 'Landscape Design & Installation', 'Your project description.']

When adding a card, add its corresponding array entry and set its index. “Plan a Similar Project” fills service and project interest, closes the modal, and moves to the form. It preserves the visitor’s other fields. Keep the illustrative-gallery disclosure unless you replace the images with actual work.

6. Navigation & Mobile Actions

Navigation anchors target section IDs: services, projects, process, areas, contact, and estimate. Preserve IDs or update every matching link.

Bootstrap Collapse controls #mainNav. It closes after a navigation choice. The bottom action bar appears below 768 px and includes Call and Request an Estimate. Body padding and safe-area insets keep it clear of content.

Sticky-header anchor spacing is set by scroll-padding-top. Keyboard focus is visible, and reduced-motion preferences disable smooth scrolling and transitions.

7. Estimate Form & Real Delivery

#estimateForm contains name, email, phone, service, property type, city/ZIP, project interest, preferred timeframe, and project details. Name, email, service, property type, city/ZIP, and details are required. Other fields are optional.

Validation uses browser validity checks plus visible inline feedback and aria-invalid. Invalid submissions focus the first field needing attention.

A valid form creates a URL-encoded mailto: draft. The visitor must click Open Email Draft and send from their email app. No request is sent automatically, no backend is connected, and nothing is saved to browser storage. Long drafts may be subject to email-client limits; a production form handler is preferable.

Replace hello@evergreenlandscape.example in main.js before using email drafts. Changing only the visible contact address will not change the draft recipient.

To enable real delivery, connect a secure form endpoint or provider, replace the existing submit handler, and show success only after the endpoint confirms acceptance. Add server-side validation and appropriate spam controls. Keep secrets on the server. Handle failed submissions and test actual receipt. Update the form’s explanatory copy and Privacy Policy to match the implemented behavior.

Never insert private API keys in this downloadable JavaScript.

8. Preselection & Existing Entries

Only the fields supplied by an action are changed. Name, email, phone, timeframe, and project details remain intact. Selecting a project sets its associated service and project interest. Seasonal buttons select Mulch & Bed Refresh, Seasonal Yard Cleanup, or Lawn Care & Maintenance.

Changing form data invalidates an old email-draft link. Prepare the inquiry again so it reflects the latest information.

9. FAQs, Reviews & Policy Modals

FAQ items use Bootstrap Accordion. When adding items, give every panel a unique ID and update its button’s data-bs-target and aria-controls.

All three reviews are sample testimonials. Replace them with genuine, authorized customer feedback before launch. Do not attribute them to review platforms.

#privacyModal and #termsModal contain sample wording. Review it for the actual business, hosting, form handling, and legal requirements. Bootstrap manages Escape, focus containment, and close controls. The project modal also restores focus to its originating card.

10. Page Title & Search Metadata

Edit <title> and meta name="description" in index.html. Keep the visible business name, location, services, and contact information consistent.

The package includes basic title/description metadata and a favicon. It does not include canonical URLs, Open Graph images, JSON-LD, sitemap.xml, or robots.txt. Add these only with the real production domain and business information if needed. Do not add fabricated ratings or addresses.

The documentation is not a customer landing page. You may keep README.html off your public host; it is not linked from the website.

11. Hostinger Deployment

1. Extract evergreen-landscape.zip.
2. Open Hostinger File Manager or your SFTP client.
3. Upload the contents of evergreen-landscape to public_html, or your chosen subfolder.
4. Confirm index.html is at the intended URL root. Keep the assets folder structure intact.
5. Visit the site over HTTPS and check all images, CSS, and JavaScript.
6. Test navigation, gallery, policy modals, phone links, and the configured inquiry flow.

For a demo at /demos/landing-pages/evergreen-landscape/, put index.html and assets directly inside that folder. Relative paths support this deployment. No build step or Node.js server is required.

README.html may remain with the local buyer package instead of being uploaded publicly.

12. Performance & Responsive Checks

Photos use optimized WebP, explicit dimensions, lazy loading below the fold, and hero priority. All assets are local. The site does not include analytics or tracking embeds.

Test at 1440, 1024, 768, 390, and 375 px widths after editing. Check heading wraps, image crops, card heights, menu behavior, form errors, modal scrolling, and the mobile bar. Also check keyboard use and 200% zoom.

If changes are not visible after uploading, clear hosting/browser caches. You can add consistent version query strings to the CSS and JavaScript URLs when publishing updates.

13. Dependencies & License Notices

Bootstrap 5.3.3 CSS and JavaScript bundle are stored in assets/vendor. Bootstrap is MIT licensed; retain LICENSES.txt and the bundled license headers. The JavaScript bundle includes Popper.

No downloaded font files or third-party icon package are included. The wordmark, service icons, and favicon are local SVG graphics; typography uses system fonts.

This README does not create a template resale license or support entitlement. Apply your actual product license and support terms separately. Generated photography should be reviewed for suitability before publication.

14. Before-Launch Checklist

• Replace all sample business/contact information and service coverage.
• Verify services, scope, business hours, and claims.
• Replace sample reviews with genuine authorized feedback.
• Review or replace generated photos and update descriptions.
• Configure a real inquiry destination or backend and verify receipt.
• Update Privacy Policy, Terms, and form status text.
• Check title, description, favicon, and real-domain metadata if added.
• Test all gallery filters, modals, selections, and navigation links.
• Test desktop, tablet, mobile, keyboard navigation, and zoom.
• Verify all local assets load from the final hosting subdirectory.

15. Troubleshooting