Make it yours.
Put it to work.

Welcome & template overview

VoltWorks Electric is a premium landing page for local electricians serving homes and small businesses. It introduces your services, explains your coverage, and gives visitors clear ways to call or start a quote inquiry.

The template uses HTML5, CSS3, Bootstrap 5.3.3, and lightweight vanilla JavaScript. Bootstrap, the Manrope variable font, SVG icons, and all photographs are included locally. There is no build process, database, or content-management system.

This guide explains how to customize the supplied files. On small screens, swipe wide tables sideways or focus a table and use the arrow keys. The guide itself uses embedded CSS and system fonts, so you can read it offline.

What’s included

Service, property-type, and location buttons update only their associated fields. Other entries stay intact. Policy dialogs support keyboard navigation, Escape to close, and return focus to their trigger.

Not included: a lead-delivery backend, booking system, instant pricing, payments, live availability, automatic address checks, analytics, or an embedded map.

Folder & file guide

The project root is voltworks-electric/. Inside it, index.html, favicon.svg, LICENSES.txt, this guide, and the assets/ folder sit together. The vendor files are directly inside assets/vendor/, not in another Bootstrap subfolder.

Services and coverage content are written directly in index.html. There is no separate service-data file or configuration panel.

Quick start

1. Extract the downloaded archive into a folder on your computer.
2. Open the voltworks-electric project folder. Keep a backup before editing.
3. Double-click index.html to preview it in a modern browser. Keep the assets/ folder beside it.
4. Edit files with a plain-text or code editor, save, then refresh the browser. No npm installation or build command is required.
5. After uploading, repeat your checks at the actual website address. Verify desktop and mobile behavior before launch.

The site assets work locally. Calling and opening an email draft depend on the device’s phone or email configuration. To use this guide’s View Template link, keep README.html alongside index.html; a standalone copy can be read anywhere, but its template link needs that sibling file.

Uploading to Hostinger

1. Back up any existing website files before replacing them.
2. Open the website’s dashboard in Hostinger and open File Manager. Use hosting that supports uploading custom files; Hostinger Website Builder sites use a different workflow.
3. For a main website, open public_html. For a demo or subsite, create or open the intended folder beneath it.
4. Upload the archive, then use Extract. Inspect the result: this package has an outer voltworks-electric folder.
5. For a main website, move the contents of that extracted folder into public_html. For a subsite, put the contents directly in its chosen folder. Keep index.html, assets/, and favicon.svg together.
6. Visit your domain or the exact subfolder address. Confirm that the page and images load. Hard-refresh if the browser shows an older version.

For example, a subsite can use public_html/electric/index.html with public_html/electric/assets/. Avoid an unintended extra level such as public_html/electric/voltworks-electric/index.html.

You can omit README.html from the public upload. Retain applicable license notices. Remove the uploaded archive from public hosting after extraction.

Optional online help: Hostinger File Manager and extracting archives. This guide does not need those pages to load.

Changing business details & page copy

Most changes begin in index.html. Search for the current wording instead of relying on line numbers. Update each relevant occurrence, then review the page from top to bottom.

The phone number is fictional and the .example email is for demonstration; neither should be used to receive real inquiries. No walk-in office address or directions link is supplied. Do not add unsupported licensing, insurance, certification, response-time, or emergency-service claims.

Keep link destinations in the appropriate format. These are the supplied demonstration links:

<a href="tel:+15125550146">(512) 555-0146</a>
<a href="mailto:hello@voltworks.example">hello@voltworks.example</a>

In main.js, update the email address in emailLink.href and both contact details in status.textContent. Updating only the visible contact block will not change the prepared email’s recipient.

Managing services, property types & areas

Edit a service

1. Find its .service-card inside #services. Update the heading, description, and icon path.
2. If you rename it, update the button’s data-service and the matching option in select#service.
3. Update any other related buttons, particularly the EV upgrade button, plus related FAQs and copy.
4. Click every affected button and verify the selected form option.

This is the supplied EV card, formatted for readability. The comment explains the value match:

<!-- data-service must exactly match the form option value. -->
<article class="service-card h-100">
<div class="card-top">
<img class="icon" src="assets/icons/ev.svg" width="28" height="28" alt="" loading="lazy">
<span>04</span>
</div>
<h3>EV Charger Installation</h3>
<p>Explore a home charging setup that suits your vehicle, electrical capacity, and daily routine.</p>
<a class="text-action" href="#quote" data-service="EV Charger Installation">Request This Service</a>
</article>

<!-- The option text is also its value when no value attribute is supplied. -->
<option>EV Charger Installation</option>

To add a service, duplicate an entire col-md-6 col-lg-4 wrapper in the services row and add its form option. Give the card a suitable local icon and update its displayed sequence number. To remove a service, remove its wrapper and option, and update related buttons or text. Keep Other / Not Sure available for uncertain inquiries.

Property and area buttons

<!-- These attributes are used by the supplied click handler. -->
<a class="btn btn-outline-light" href="#quote" data-property="Residential">
  Discuss a Home Project
</a>
<a class="btn btn-outline-light" href="#quote" data-property="Commercial">
  Discuss a Business Project
</a>
<a href="#quote" data-location="Austin" class="area-link"
   aria-label="Ask About Your Area: Austin">
  <span>Austin</span><span class="area-action">Ask about your area</span>
</a>

The last example shows the functional area-link attributes and text; the full supplied link also contains a decorative pin icon. Property choices are Residential, Commercial, and Other. Keep attribute values equal to the corresponding option values.

The coverage grid contains Austin, Round Rock, Cedar Park, Pflugerville, Leander, and Georgetown. To edit a community, update its displayed name, data-location, and accessible label. Update the coverage references elsewhere, including FAQs and metadata.

The handler in main.js reads attributes only on links with href="#quote". It fills #service, #property, or #location without resetting other fields. “Check My Location” simply goes to the form; it performs no location verification and does not overwrite an existing location.

Replacing images & icons

All five photographs are optimized WebP files with a 3:2 aspect ratio. They are AI-generated illustrations, not evidence of actual staff, customer projects, or completed installations. Use accurate, authorized photographs for a real business launch.

1. Export an optimized, genuine WebP file. A 3:2 original is a practical match; keep enough resolution for the display size and high-density screens.
2. For the simplest replacement, keep the existing filename and place the new file in assets/images/.
3. If you change the filename, update the image’s src in index.html. For the hero, also update the rel="preload" image link in the head.
4. Update alt to describe the new photograph and set width/height to its actual pixel dimensions.
5. Check the crops on desktop, tablet, and mobile. A landscape original can be shown in a tall frame.

<img src="assets/images/electrician-hero.webp"
     alt="Electrician inspecting a closed electrical panel in a bright, tidy home utility room"
     width="1536" height="1024" fetchpriority="high">

Keep the hero prioritized rather than lazy-loaded. The four lower photographs use loading="lazy" and decoding="async". Preserve relative paths; a leading slash can break a subfolder installation.

Adjust a crop

In style.css, .hero-media>img and .upgrade-photo img use object-fit: cover. Their object-position rules choose the visible part of the photo. The hero uses 58% horizontally by default, 35% on tablet, and center on mobile. The upgrade photo uses 80% on desktop and center at widths up to 991px. Edit the appropriate rule for the affected screen size and review the subject placement.

The assets/icons/ folder holds local SVG line icons. Their yellow stroke is written inside each SVG; changing CSS color variables alone does not recolor them. Keep decorative icons’ empty alt text when the neighboring text already explains them.

Replace favicon.svg to change the browser-tab icon. If renamed, update the head’s rel="icon" link. Its colors are written inside the SVG. The page wordmark is separate HTML.

Colors, typography & styling

Edit custom styles in assets/css/style.css, leaving the bundled Bootstrap files intact. The :root block contains these palette variables:

Bootstrap’s body background, text, and border variables refer to these tokens. Some component colors are literal values: for example, the yellow hover shade is #ffe57b, and SVG colors are inside the SVG files. Review those when changing the brand palette.

/* Existing palette values in assets/css/style.css */
:root {
  --ink: #141719;
  --surface: #1c2022;
  --yellow: #f4d34c;
  --white: #f4f4ee;
  --muted: #b9bdbb;
  --line: #373d3f;
}

Fonts and spacing

The site loads manrope-latin-variable.woff2 through @font-face, with weights 200–800 and font-display: swap. To replace it, place a properly licensed font in assets/fonts/, update the font-face URL and family, --bs-body-font-family, and the font preload in index.html. Keep license notices in LICENSES.txt. This Latin font may need replacement or additional character coverage for another language.

Use .section for section spacing, .container for width and side padding, and .btn, .btn-electric, and .btn-outline-light for buttons. Review headings and line heights after any font change.

Responsive behavior

The stylesheet includes adjustments at 1199, 991, 767, and 359px, plus a large-screen rule and a tablet-specific hero crop. The navigation expands at Bootstrap’s extra-large breakpoint; the fixed mobile action bar appears at widths up to 767px.

The root scroll-padding-top is 110px, reduced to 92px on mobile, to account for the sticky header. Keep an adequate offset if the header height changes. Mobile body padding uses calc(90px + env(safe-area-inset-bottom)); the action bar also accounts for the safe-area inset. Preserve enough clearance below the footer and focused form controls.

After changes, check text contrast, visible focus, 200% zoom, small screens, image crops, and reduced-motion behavior.

Quote form & lead delivery

Current visitor flow

1. Service, property-type, and area links fill their corresponding fields while retaining the other entries.
2. Prepare Quote Request runs validation. Missing required values, whitespace-only required text, or an invalid email produce field messages and a focused error summary.
3. Valid entries create the Open Email Request link. The status explicitly says the request has not been sent.
4. The visitor opens their email app, reviews the recipient and body, and sends the message manually. Preparing or opening it never confirms pricing or an appointment.

Changing form entries hides the previously prepared link, so the visitor must prepare the updated request again. The phone and preferred timeframe are optional. Timeframe choices are “As soon as scheduling allows,” “Within the next few weeks,” “Within the next few months,” and “Just exploring options.”

If no email app opens, the visitor can write to the listed email address or call. A mail link depends on device settings and is not a guaranteed delivery mechanism. Very long drafts may also be limited by the email app. The site does not save a draft if the page is closed or reloaded. Replace the demonstration contact details before using either fallback.

Where to edit

In assets/js/main.js, find form.addEventListener('submit', ...). It prevents the default submission, validates fields, reads new FormData(form), then sets emailLink.href and status.textContent. The email subject and body use encodeURIComponent. In HTML, the main IDs are quote-form, form-errors, request-status, and email-request.

The submit button is disabled in the initial HTML and enabled by main.js. If JavaScript is unavailable, the phone/email fallback remains. Do not merely remove the disabled attribute or add a form action and assume delivery is connected: the current handler still prevents default submission.

Connecting real delivery

1. Choose a server-side endpoint or form service and configure the real recipient and delivery behavior outside the browser.
2. Replace the email-only submit branch with the provider’s required request format and field mapping. Retain useful client-side validation.
3. Validate and limit incoming data on the server. Add appropriate spam protection and rate limits. Keep private keys and mail credentials server-side.
4. Show a pending state during submission. Show success only after the endpoint confirms acceptance, and a useful error with a retry option when it fails. Do not describe acceptance as a booked appointment or guaranteed email delivery.
5. Test real receipt, invalid inputs, network failures, rejected submissions, and duplicate clicks. Update the form notice, labels, no-JavaScript fallback, FAQs, Privacy Policy, and Terms to match the integration.

No integration is supplied in this package. If retaining email-only delivery, configure genuine contact details and keep its limitations clearly explained.

Navigation, FAQs & modals

The main section IDs are services, properties, why, areas, reviews, upgrades, process, about, quote, contact, and faq. A link such as href="#services" must match its section ID.

The collapsible mobile menu uses #main-nav. Its toggle’s data-bs-target and aria-controls must match that ID. Bootstrap handles collapse; main.js closes it after section navigation and supports Escape. The .mobile-actions bar has a telephone link and a quote link; update them with the other contact actions.

Renaming #quote requires updating all related links, the JavaScript link selector, and the focus target. Keeping these functional IDs unchanged is usually simpler.

FAQ edits

Find #faq-list. The eight panels use IDs faq-0 through faq-7. Edit the question inside .accordion-button and answer inside .accordion-body. To add a question, duplicate a complete .accordion-item, give the panel a new unique ID, and match the button’s target and accessible control reference. Keep data-bs-parent="#faq-list" if you want one answer open at a time.

<!-- Related attributes must point to the same panel. -->
<button class="accordion-button collapsed" type="button"
        data-bs-toggle="collapse" data-bs-target="#faq-0"
        aria-expanded="false" aria-controls="faq-0">
  What electrical services do you offer?
</button>

Policies

The Privacy Policy content is in #privacy-modal; Terms content is in #terms-modal, near the end of index.html. Their title IDs are privacy-title and terms-title. Edit the actual modal body, not just the footer link label.

Preserve data-bs-toggle="modal" on triggers, matching href targets, aria-labelledby and title IDs, tabindex="-1", close-button labels, and data-bs-dismiss="modal". Bootstrap supplies dialog behavior and focus restoration; the end of main.js also wraps Tab at dialog boundaries. Test Tab, Shift+Tab, and Escape after edits. Keep both policy texts accurate for the live site’s actual information handling.

SEO & accessibility

• Update the head’s <title> and <meta name="description"> for the real business, services, and location. Keep location claims consistent with the page.
• Keep one clear main heading and a logical sequence of section headings. Choose meaningful link and button labels.
• Update the favicon and all image alt text when changing visuals. Use empty alt text for purely decorative icons.
• Keep the “Skip to content” link and its #main destination.
• Preserve input labels, their for/ID matches, and the error message IDs referenced by aria-describedby. Test the error summary and aria-invalid behavior.
• Navigate the site using only the keyboard. Check visible focus, mobile navigation, form controls, FAQ buttons, and policy dialogs.
• Check text and button contrast after palette changes. Test at 200% zoom and narrow widths without clipped text or page-wide scrolling.
• Retain the prefers-reduced-motion: reduce rules that disable smooth scrolling and unnecessary animation. Ensure the mobile bar never covers footer links or controls.

These steps support usability and clear page information; they do not guarantee search rankings or formal accessibility certification.

Before-launch checklist

• Replace the business name, demonstration telephone number, email address, hours, time zone, and sample communities everywhere they appear.
• Replace sample testimonials with genuine, approved statements. Remove any sample that cannot be replaced.
• Use accurate, authorized business photographs and review their alt text and responsive crops.
• Verify service descriptions and any credentials, coverage, availability, or other business claims.
• Review and replace policy wording to reflect actual contact methods, hosting, and data handling.
• Connect and test lead delivery, or configure the email-only workflow with real contact details and retain its truthful notices.
• Verify telephone/email destinations, every quote prefill, navigation anchors, menu, FAQ accordion, and both policy dialogs.
• Test required-field errors, email preparation or real submission, failure states, and preservation of existing form entries.
• Confirm no action falsely claims an inquiry was delivered, a price agreed, or an appointment booked.
• Test desktop, tablet, mobile, keyboard navigation, reduced motion, and zoom. Check mobile bottom-bar clearance.
• Check the public URL after upload and refresh cached assets. Keep relative paths intact.
• Retain third-party license notices. Omit this guide from the public upload if preferred.

Troubleshooting

Licenses & dependencies

Read LICENSES.txt and preserve the applicable third-party notices when modifying or distributing the template. The site has no remote font, image, icon, or CDN dependency. This guide introduces no external dependency.

This documentation does not create template purchase terms, resale rights, support services, update guarantees, or warranties. Refer to any separately supplied purchase agreement for those matters.