Call-First Website Template for Residential & Emergency Electricians

Build a complete, mobile-first website for a residential electrician whose business runs on phone calls, including emergency call-outs. The most important job of every page is to get a homeowner to call. The second job is to capture a callback request from people who can't call right now. Use the business details below. They are fictional samples: replace them with your own before you build, or keep them to make a demo. BUSINESS DETAILS - Business name: Halden Electric - Trade: licensed residential electrician, owner-operated with a small crew - Phone (the main call to action): (555) 014-2290 - Email: [email protected] - Based in: Marlow Springs - Service area towns: Marlow Springs, Eastfield, Kettle Ridge, Pine Hollow, Ashford Lake, North Bend Township - Hours: Monday to Friday 7am to 6pm, Saturday 8am to 2pm - Emergency service: available 24/7 for genuine electrical emergencies - License number: [LICENSE NUMBER] - Years in business, reviews, ratings, awards: none supplied HONESTY RULES (follow these exactly) - Never invent reviews, testimonials, star ratings, review counts, awards, years in business, license numbers, insurance amounts, prices or guarantees. - Where one of these would normally appear, show a clearly marked placeholder in square brackets, for example "[Add your Google review score]" or "[License #]", styled so the owner can see it needs filling in. - Don't use photos of real people and don't present any image as a real job. Use illustrations and icons instead (see Visual direction). PAGES Build four pages that share one header, one footer and one stylesheet. 1. Home - Header: the business name as a text logo, links to the four pages, and the phone number as a large tap-to-call button on the right. On phones, collapse the links into a menu but keep the call button visible. - Hero: a headline that says what you do and where (in the spirit of "Electrician in Marlow Springs and nearby towns", written naturally), one sentence about fast response, and two buttons: "Call (555) 014-2290" (primary) and "Request a callback" (secondary, scrolls to the callback form). Beside or under it, a compact strip that reads "Electrical emergency? We answer 24/7" with the phone number. - Trust strip with four items: "Licensed and insured [License #]", "Upfront price before work starts", "We clean up after every job", "[Add your review score]". Keep the placeholders visibly marked. - Services grid of six cards, each with a simple icon, a title and one sentence: Emergency repairs, Panel upgrades, Lighting and fixtures, Outlets and switches, EV charger installation, Safety inspections. Each card links to its section on the Services page. - "What happens when you call": three short numbered steps (you call and describe the problem, we give you an arrival window, we fix it and explain what we did). - Service area section: the towns as a clear list or chips, plus a sentence inviting people outside the list to call and ask. - Callback form: name, phone, town (a select with the service area towns plus "Other"), a short description of the problem, and a checkbox labelled "This is an emergency". Button: "Request a callback". - Reviews placeholder: one panel that says "[Add 2 to 3 genuine customer reviews here]" with a small note that only real reviews belong here. - Final call band: the phone number set large, with a "Call now" button. - Footer: business name, phone, email, hours, service area summary, license placeholder, links to all pages. 2. Services - A short intro paragraph. - One section per service from the home page grid, each with an id so the home page cards can link straight to it. For each: what it covers, common signs you need it, and a "Call about this" button. Write useful, plain-English copy a homeowner would find helpful. - In the Emergency repairs section, list warning signs clearly (burning smell, sparking or scorched outlets, power lost in part of the home, a buzzing or hot panel) and tell people to call straight away. 3. Service areas - A short intro. - A card for each town with one or two sentences of general, useful information, such as the kinds of jobs that are common in older homes versus newer builds. Don't invent local facts, statistics or landmarks. - A simple map-like illustration made with inline SVG or CSS. No real map and no external map service. - A call band. 4. Contact - Phone first and large, then email, hours and the emergency note. - The same callback form as the home page. - A short checklist: "What to have ready when you call". FORMS - Build complete form markup with labels, required fields and clear client-side validation messages. - Leave the form's submission address as a clearly marked placeholder: action="[FORM ENDPOINT]". If someone submits while the placeholder is still in place, don't navigate away. Show an inline message instead: "This form isn't connected yet. Please call (555) 014-2290." VISUAL DIRECTION - Mood: dependable, ready to move fast, never alarmist. - Colors: deep navy #0F1E3D as the main dark, safety orange #FF6B1A for every call to action and for the emergency strip, warm white #FAF8F4 background, light gray #E6E8EC for panels, and near-black text #1A1F2B. Every text and button color pairing must meet WCAG AA contrast; use navy text on orange buttons if white text on orange fails. - Type: a bold condensed sans-serif for headings (Barlow Condensed, 700) and a clean sans-serif for body text (Barlow, 400 and 500), loaded from Google Fonts. - Layout: strong horizontal bands, generous spacing, large tap targets. The phone number should be the most visible thing on every screen. - Imagery: no photos. Use simple inline SVG line icons for the services and one larger geometric illustration in the hero, such as a stylized house outline with a lightning-bolt motif. - On phones, add a sticky bottom bar with two equal buttons: "Call now" and "Callback". COPY AND TONE - Plain, confident and friendly. Short sentences. Speak to homeowners, not other electricians. - Use "you" and "we". Explain any technical term in one line. - Buttons say exactly what happens: "Call (555) 014-2290", "Request a callback". TECHNICAL REQUIREMENTS - Plain HTML, one CSS file and a small amount of vanilla JavaScript (menu toggle and form handling). No frameworks and no build step. - One HTML file per page. All pages share the same header and footer markup. - Semantic HTML: header, nav, main and footer landmarks, one h1 per page, and a logical h2/h3 order. - Every phone number is a tel: link. Every interactive element has a visible keyboard focus style. - Responsive from 320px wide upward. Check the layout at phone, tablet and desktop widths. - Give each page a unique title tag and meta description written for local search, for example "Electrician in Marlow Springs | Halden Electric". - Respect prefers-reduced-motion and keep any animation subtle. - Keep it fast: no large libraries, no autoplaying media, and width and height set on any images added later.