ComfortAir HVAC
A guide to making it yours.

5-Minute Setup

1. Extract the downloaded archive, keep a backup, and open the comfortair-hvac folder in a plain-text code editor.
2. Open index.html in a browser. No npm installation, build command, database, or framework setup is required.
3. Replace the business details, sample areas, hours, testimonials, and policy wording. Update the contact information in both HTML and JavaScript.
4. Review the six services and seasonal-maintenance controls. Replace illustrative photographs with accurate, authorized business images.
5. Configure real contact details for the email-only workflow, or connect and test a backend. The form does not send or store submissions. Read Inquiry Form and Lead Delivery.
6. Upload the project contents to your hosting directory and test the public page before launch.

Package Contents

The website contains 26 original files. Adding this guide brings the package to 27 files. The Bootstrap files sit directly in assets/vendor/; there is no extra Bootstrap subfolder. Services and locations are written directly in index.html, not a separate data file.

This guide has embedded CSS and uses system fonts. It works offline without loading website assets. On small screens, swipe wide tables and code examples sideways; keyboard users can focus them and use the arrow keys.

Template Features

• Dark navy design with a full-width photographic hero, blue primary accents, and warm-orange heating highlights.
• Six service cards with quote-form preselection.
• Homeowner and small business panels that select the property type.
• Four service principles, six sample service areas, and three sample testimonials.
• Cooling and heating maintenance panels that select the service and seasonal focus; a replacement button selects HVAC Installation & Replacement.
• A three-step process, about section, inquiry form, contact and hours section, nine FAQ answers, and Privacy Policy and Terms modals.
• Responsive navigation, a mobile call-and-quote bar, local assets, visible focus, a skip link, and reduced-motion support.

Technology Used

Keep the deferred scripts in this order: assets/vendor/bootstrap.bundle.min.js, then assets/js/main.js. Custom code expects Bootstrap to be available.

Editing the Template

Open the entire extracted folder in a code editor and save files as UTF-8. Search for the IDs, classes, filenames, or exact wording listed in this guide. Some HTML is compact; formatting a working copy can make it easier to edit.

Back up first, make a focused change, save, and refresh. Browser developer-tool edits are temporary until you apply them to the actual file. File names and capitalization must match exactly on hosting.

A local file preview works for the static page. Use a hosted test URL or local HTTP server for testing any added backend. Keep index.html, favicon.svg, and assets/ together.

1. Update Business Information

Open / search: index.html and assets/js/main.js → ComfortAir.

<!-- Replace the display text and destinations together. -->
<a href="tel:+19195550148">(919) 555-0148</a>
<a href="mailto:hello@comfortair.example">hello@comfortair.example</a>

The examples above show demonstration contacts. Search the entire project after replacing them. Do not add unsupported licensing, insurance, certification, emergency-service, or response-time claims.

2. Wordmark, Favicon, and Hero

Open / search: index.html → .brand.

The header and footer wordmarks are HTML text with an inline airflow SVG inside .brand-mark. Update both names and the accessible labels on the home links. Replacing the favicon will not change these wordmarks.

The favicon is favicon.svg at the root. Replace that file or update the head’s rel="icon" link if the name or format changes.

Edit #hero-title for “Comfort for every season. Care for your home.” Supporting copy lives in .hero-intro, .hero-support, and .hero-location. Keep the headline legible against the photograph.

The hero photograph is assets/images/hvac-hero.webp. If renamed, update both its image src and the image preload in the head. Preserve the hero’s fetchpriority="high", descriptive alt text, and correct dimensions.

3. Colors and Layout

Open / search: assets/css/style.css → :root.

Custom CSS contains base rules followed by a ComfortAir composition and component styling section and its responsive overrides. For a repeated selector, later rules can override earlier ones. Edit the active ComfortAir rule for the screen size you are changing.

Use .section for spacing, .container for widths and side padding, and .btn, .btn-comfort, and .btn-outline-light for buttons. Keep heating cards readable when changing .season-card.heating.

Change both --accent and --cool for a consistent blue accent update. Some hover shades and panel colors are literal values. SVG icon strokes and favicon colors are inside their SVG files; they do not inherit the CSS palette automatically.

/* Supplied ComfortAir accent variables */
:root {
  --accent: #7ecfff;
  --cool: #7ecfff;
  --warm: #f5ac79;
}

4. Fonts and Typography

Open / search: assets/css/style.css → @font-face.

The site uses the local assets/fonts/manrope-latin-variable.woff2 font. Its declaration supports weights 200–800 and uses font-display: swap. The body family is set through --bs-body-font-family, with Arial and sans-serif fallbacks.

1. Add your properly licensed font file to assets/fonts/.
2. Update the font-face family, URL, format, and weight range.
3. Update --bs-body-font-family and the font preload in index.html.
4. Retain the replacement font’s notices alongside the existing applicable notices.
5. Check headings, buttons, line heights, and wrapping on mobile. A different language may require broader glyph coverage than the supplied Latin font.

Manrope’s SIL Open Font License 1.1 notice is in LICENSES.txt. This guide intentionally uses system fonts and requires no font download.

5. Add, Edit, or Remove Services

Open / search: index.html → #services.

Each service is a .service-card inside a col-md-6 col-lg-4 wrapper. Update its heading, description, icon path, and displayed sequence number. The action’s data-service value must match an option in select#service.

This is the actual maintenance card, formatted for readability:

<!-- Keep data-service equal to the form option value. -->
<article class="service-card h-100">
<div class="card-top">
<span class="icon-tile">
<img class="icon" src="assets/icons/calendar.svg" width="28" height="28" alt="" loading="lazy">
</span>
<span>05</span>
</div>
<h3>Seasonal Maintenance</h3>
<p>Plan a checkup ahead of heavier heating or cooling use. A little planning makes the next step clearer.</p>
<a class="text-action" href="#quote" data-service="Seasonal Maintenance">Request This Service</a>
</article>

<!-- With no value attribute, this option's text is its value. -->
<option>Seasonal Maintenance</option>

To add a service, duplicate a full card wrapper and add the corresponding form option. To remove one, delete its wrapper and option, then update related buttons, FAQs, and copy. Keep Other / Not Sure for visitors who are unsure.

When a name contains an ampersand, encode it as & in HTML text and attributes. The browser then uses the same decoded value for both.

6. Seasonal Care and Replacement Buttons

Open / search: index.html → #seasonal.

The seasonal section has a photograph, a cooling panel, a heating panel, and a system-replacement callout. Edit the heading, short descriptions, and buttons without adding unsupported savings, breakdown-prevention, availability, or promotion claims.

<a class="text-action" href="#quote"
   data-service="Seasonal Maintenance"
   data-season="Cooling preparation">
  Ask About Cooling Maintenance
</a>
<a class="text-action" href="#quote"
   data-service="Seasonal Maintenance"
   data-season="Heating preparation">
  Ask About Heating Maintenance
</a>
<a class="btn btn-comfort" href="#quote"
   data-service="HVAC Installation &amp; Replacement">
  Discuss System Replacement
</a>

The optional select#season contains Cooling preparation, Heating preparation, Both heating and cooling, and Not sure. Keep these values synchronized with the data attributes. Its value is included in the prepared email.

These controls request a conversation; they do not book maintenance or verify technician availability. Other form entries are retained. Read the existing post-validation edge case in Troubleshooting before launch.

7. Home and Business Inquiry Buttons

Open / search: index.html → #properties.

The homeowner and small business panels each contain a photograph, description, and inquiry button. Their data-property values fill select#property. The form options are Residential, Commercial, and Other.

<a class="btn btn-outline-light" href="#quote" data-property="Residential">
  Discuss Home Service
</a>
<a class="btn btn-outline-light" href="#quote" data-property="Commercial">
  Discuss Business Service
</a>

The prefill handler reads only links with href="#quote". Keep that destination and the associated IDs consistent. These buttons update the property type without resetting name, email, service, location, seasonal focus, or project details.

8. Image Replacement Guide

All five photographs are true WebP files with a 3:2 aspect ratio. They are AI-generated illustrations, not photographs of verified employees or completed projects. Replace them with accurate, authorized business photography for a real launch.

1. Export an optimized WebP photograph. Use enough resolution for the display size and high-density screens; preserve a suitable crop.
2. Keep the existing filename for a simple replacement, or update every reference if you rename it.
3. For the hero, update the preload as well as the image path.
4. Write accurate alt text and update the HTML width and height to the new image’s intrinsic dimensions.
5. Review the rendered crop at desktop, tablet, and mobile widths.

The hero is prioritized. Below-the-fold photographs use loading="lazy" and decoding="async". Preserve local relative paths so images load from a hosting subfolder.

<img src="assets/images/hvac-hero.webp"
     alt="HVAC technician inspecting a closed outdoor condenser beside a tidy residential home"
     width="1536" height="1024" fetchpriority="high">

Adjusting the crop

.hero-media>img uses object-fit: cover. In the final ComfortAir rules its position is center 48% by default, 58% horizontally up to 1199px, 63% up to 991px, and 67% on mobile. Later matching rules win. Review the dark overlay in .hero:before if a new photo makes the text hard to read.

The seasonal photo uses .seasonal-photo>img, with center positioning by default, center 52% up to 991px, and 47% center on mobile. The about image has its own crop. Adjust the relevant active rule rather than stretching the photograph.

Local icons are separate SVG files in assets/icons/. Update their stroke colors inside the SVGs if needed. Decorative icons should keep empty alt text when neighboring words convey their meaning. The favicon is separately located at favicon.svg.

9. Service Areas, About, and Testimonials

Open / search: index.html → #areas, #about, #reviews.

The sample communities are Raleigh, Cary, Apex, Morrisville, Wake Forest, and Garner. Each .area-link has visible text, a data-location value, and an accessible label. Update all three together.

<!-- Functional attributes from the supplied Raleigh area link. -->
<a href="#quote" data-location="Raleigh" class="area-link"
   aria-label="Ask About Your Area: Raleigh">
  <span>Raleigh</span>
  <span class="area-action">Ask about your area</span>
</a>

The full supplied link also contains a decorative pin icon. The generic “Check My Location” action only goes to the form; it does not verify an address, promise coverage, or erase an existing location.

Keep coverage wording consistent in the top strip, hero, contact block, footer, FAQs, title, and meta description. Update the about story and Raleigh, North Carolina signature for the real business.

The three sample reviewers are Morgan T., Alex R., and Jamie L. Replace the quotes, names, locations, and avatar initials with approved content, or remove the samples. Do not present them as verified third-party reviews.

10. Inquiry Form and Lead Delivery

Open / search: assets/js/main.js → form.addEventListener('submit'.

How the supplied flow works

1. Service, property, location, and seasonal buttons fill their related fields. Other values remain intact.
2. “Prepare Quote Request” validates required fields and email format. Field messages and a focused error summary explain missing or invalid details.
3. Valid details produce an “Open Email Request” link. The message clearly says nothing has been sent.
4. The visitor opens their email app and sends the message manually. Opening the draft is not proof of delivery, agreed pricing, or an appointment.

Normal input changes hide the prepared link so updated details can be prepared again. The four timeframe choices are As soon as scheduling allows, Within the next few weeks, Within the next few months, and Just exploring options. The page does not save the draft when closed or reloaded.

In main.js, edit the recipient in emailLink.href and the contact details in status.textContent. The subject starts “HVAC inquiry:” and the body includes all nine fields. Keep URL encoding for the subject and body.

If no email app opens, the visitor can write to the real contact email directly or call. Device configuration and email-app limits affect mail links. The supplied example-domain address cannot receive messages.

The submit button starts disabled in HTML and is enabled by main.js. The no-JavaScript fallback provides phone and email links. Do not simply add a form action or remove disabled and assume delivery is connected: the current handler prevents default submission.

Connecting a real backend

1. Configure a server endpoint or form service with the real recipient.
2. Replace the email-only branch with a request using the service’s expected field names and payload format. There is no endpoint setting already waiting to be enabled.
3. Validate inputs on the server, limit payload size, and add spam protection and rate limits. Keep private credentials server-side.
4. Show a pending state and prevent duplicate sends. Report success only after a confirmed response; show errors truthfully and preserve entries for retry.
5. Test receipt, invalid inputs, network failures, and rejected requests. Update form labels/status, the FAQ, and both policies to match the new behavior.

A backend accepting an inquiry still does not confirm an appointment. Review the documented seasonal prefill edge case before launch.

11. Contact Details and Business Hours

Open / search: index.html → #contact.

The sample business is based in Raleigh and has no walk-in office address. There is no map embed or directions link. Update the service-base wording without inventing a physical office.

Business hours are Monday–Friday, 8:00 AM–5:00 PM Eastern Time, with Saturday and Sunday closed. Keep the quote-side block, contact section, and footer aligned. Update both visible phone/email text and their link destinations.

Do not advertise emergency dispatch, 24/7 service, guaranteed response times, or same-day visits unless those are accurate, supported business offerings.

12. Navigation and Section Links

Open / search: index.html → #main-nav.

The main navigation links to Services, Seasonal Care, Service Areas, Reviews, and Contact. Keep each href fragment equal to its section ID. The full page IDs include services, properties, why, areas, reviews, seasonal, process, about, quote, contact, and faq.

The menu button’s data-bs-target="#main-nav" and aria-controls="main-nav" identify the collapse panel. Bootstrap handles opening; custom code closes the menu after navigation and supports Escape.

Quote links use href="#quote". Renaming this ID also requires changing the custom JavaScript selector and focus target. Retain tabindex="-1" on the quote section for its programmatic focus behavior.

The fixed mobile bar is .mobile-actions. Keep its call destination in sync with the business number and preserve the body’s bottom clearance. The root scroll offset is 110px, reduced to 92px on mobile, to account for the sticky header.

13. Frequently Asked Questions

Open / search: index.html → #faq-list.

Nine accordion items cover services, home/business work, areas, requesting service, useful inquiry details, seasonal maintenance, heat pumps/replacement, airflow, and scheduling. Edit the question inside .accordion-button and answer inside .accordion-body.

Existing panel IDs run from faq-0 to faq-8. To add one, duplicate the entire item and give the panel a unique ID. Match that ID in the button’s data-bs-target and aria-controls. Preserve data-bs-parent="#faq-list" for one open answer at a time.

<button class="accordion-button collapsed" type="button"
        data-bs-toggle="collapse" data-bs-target="#faq-0"
        aria-expanded="false" aria-controls="faq-0">
  What heating and cooling services do you offer?
</button>

Keep answers consistent with the form and actual service offerings. Avoid DIY repair instructions and unsupported claims about savings, compatibility, timelines, rebates, or health outcomes.

14. Privacy Policy and Terms

Open / search: index.html → #privacy-modal and #terms-modal.

Both policies are complete sample text in modal bodies near the end of the HTML. Review them for the real business, actual hosting, and inquiry workflow. If you add analytics, another form service, cookies, or a backend, revise the descriptions of information handling accordingly.

Preserve trigger targets, data-bs-toggle="modal", matching IDs, aria-labelledby, title IDs privacy-title/terms-title, tabindex="-1", close-button labels, and data-bs-dismiss="modal".

Bootstrap provides dialog behavior and focus restoration; the end of main.js also wraps Tab at the dialog boundaries. Test Tab, Shift+Tab, and Escape after edits. Do not claim services or tracking features that the live site does not use.

15. SEO and Page Metadata

Open / search: index.html → <head>.

Update the page title, meta description, theme color, favicon link, and hero/font preload paths when the associated assets change. The supplied title identifies heating and cooling in Raleigh, NC. Align the text with the real business and supported areas.

Keep one clear main heading, descriptive section headings, and accurate alt text. The footer copyright year is static text; edit it when appropriate. There is no automatic year updater, sitemap, or robots.txt bundled.

This guide uses noindex, nofollow and can be omitted from the public upload. Good metadata does not guarantee search rankings.

16. Performance and Cache Busting

Open / search: index.html and assets/css/style.css → preload.

Keep photography optimized, retain the hero preload and high priority, and lazy-load lower images. Resize photographs sensibly before exporting; do not upload huge originals solely to display a small card.

After changing a file, confirm it was uploaded to the active directory. Hard-refresh the browser or check a private window. Clear a hosting or CDN cache only if you have enabled one.

<!-- Optional version labels after you publish a CSS or JS update. -->
<link rel="stylesheet" href="assets/css/style.css?v=2">
<script defer src="assets/js/main.js?v=2"></script>

The supplied links have no version query. Update the actual existing tags rather than adding duplicate stylesheet or script loads. Keep Bootstrap before the custom script. Query labels do not change the local filenames.

17. Responsive and Accessibility Checks

• Test desktop, tablet, and mobile widths, including a narrow 320px screen and 200% zoom.
• Keep the skip link and its #main destination. Navigate using only the keyboard and check visible focus.
• Preserve labels and their input IDs, error-message references, the error summary, and status announcements.
• Check text and button contrast after changing colors; heating accents need contrast too.
• Verify menu behavior, accordion controls, modal focus containment, Escape, and focus restoration.
• Keep reduced-motion rules that disable unnecessary movement and smooth scrolling.
• Preserve mobile body padding of calc(90px + env(safe-area-inset-bottom)) and the action bar’s safe-area padding. Increase clearance if the bar grows taller.
• Check image cropping, form controls, validation messages, and footer links for overlap or clipping.

The navigation expands at Bootstrap’s extra-large breakpoint; the bottom action bar appears up to 767px. The stylesheet has additional rules at 1199, 991, 767, and 359px. These checks support usability but do not establish formal accessibility certification.

18. Adding or Removing Content

Duplicate complete Bootstrap column/card structures when adding content, and keep IDs unique. Remove associated navigation links when deleting a section. Update references elsewhere, including FAQs, form options, metadata, and policy wording.

Do not remove form, menu, or status elements without reviewing main.js: it expects #quote-form, #request-status, #email-request, #form-errors, #main-nav, and the documented fields. A missing element can stop later script execution.

When adding a form field, decide whether it is required, provide a label, and add it to the email body mapping. Required fields also need an error element with the expected ID and a message in the labels object. Optional prefills need the validation guard explained in Troubleshooting.

19. Hostinger / Shared Hosting Deployment

1. Back up any existing website files.
2. Open the website’s Hostinger dashboard and File Manager. Use hosting that accepts custom files; Website Builder sites use a different workflow.
3. Choose public_html for the main website or the intended subfolder beneath it.
4. Upload the archive and use Extract. The package contains an outer comfortair-hvac folder.
5. Move that folder’s contents into the destination where the page should load. Keep index.html, favicon.svg, and assets/ together.
6. Visit the domain or chosen subfolder, hard-refresh, and test all assets and interactions. Remove the uploaded archive from the public directory when finished.

For example, a subsite can use public_html/hvac/index.html and public_html/hvac/assets/. Avoid unintended nesting such as public_html/hvac/comfortair-hvac/index.html.

README.html is buyer documentation and can be left out of the public upload. Retain applicable license notices. Relative paths allow the site to work in a subfolder.

Optional online help: Hostinger File Manager and extracting archives.

20. Before-Launch Checklist

• Replace the sample business name, contact information, areas, hours, and time zone everywhere.
• Replace sample testimonials with approved, accurate statements or remove them.
• Use accurate, authorized photographs and update alt text and dimensions.
• Review service descriptions and any business credentials or availability claims.
• Update the policies to reflect actual information handling.
• Configure a real email/telephone workflow or connect and test backend delivery.
• Address the seasonal-prefill validation edge case documented below.
• Test every service, property, area, and seasonal button both before and after a validation attempt. Confirm other entries are preserved.
• Check telephone/email links, mobile navigation, FAQs, dialogs, and all section links.
• Ensure the form never claims a request was sent, a price agreed, or an appointment booked without that outcome.
• Test responsive layouts, keyboard access, reduced motion, and mobile-bar clearance at the hosted URL.
• Keep third-party license notices and take a backup of your launch-ready files.

21. Troubleshooting

Existing seasonal-prefill edge case after validation

In the supplied main.js, using a seasonal button after any form validation attempt can log “Cannot set properties of null (setting 'textContent')”. The service and focus can still populate, but the event handler is interrupted. The optional seasonal field has no season-error element, while the prefill code tries to validate it once validated is true.

To correct this in a working copy, find the prefill loop and restrict that check to required fields:

// Existing line inside the prefill loop:
if (validated) fieldError(field);

// Replace it with:
if (validated && field.required) fieldError(field);

This documentation does not apply the code change. After making it, test both seasonal buttons after an invalid submission and after preparing a valid email. Confirm the selected service/focus, retained entries, updated email contents, and absence of console errors.

For other errors, fix the first console message, then reload and repeat the exact action. Never put hosting passwords, email credentials, or private keys in page files or screenshots.

22. Licenses and Dependencies

LICENSES.txt contains the Bootstrap 5.3.3 MIT notice and the Manrope SIL Open Font License 1.1 notice. The Bootstrap bundle includes Popper; preserve the distributed bundle and its applicable notices. No separate jQuery, font service, image host, or CDN dependency is required.

The five photographs are generated illustrations supplied locally as WebP. The favicon, wordmark symbol, and interface icons are SVG graphics. Check permissions and retain required attribution for replacement media, logos, fonts, or components.

Third-party notices do not establish purchase or resale terms for the complete template. Refer to any separately supplied seller agreement for permitted use and support terms. This guide grants no additional rights and promises no support, updates, or warranties.