Home services home page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home services home page</title>
  <style>
    body{margin:0;font-family:'Open Sans',Arial,sans-serif;color:#1a2633;background:#ffffff}
    .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
    section{padding:76px 0}
    h1,h2,h3{font-family:'Poppins',Arial,sans-serif;color:#1a2633;margin:0}
    h1{font-size:48px;line-height:1.12;letter-spacing:-.02em;margin:0 0 18px;color:#ffffff}
    h2{font-size:34px;line-height:1.2;letter-spacing:-.01em;margin:0 0 14px}
    h3{font-size:19px;line-height:1.3;margin:0 0 8px}
    p{margin:0;line-height:1.75;color:#5b6b7c;font-size:16px}
    .btn{display:inline-block;white-space:nowrap;padding:15px 26px;border-radius:8px;text-decoration:none;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:16px}
    .btn-orange{background:#f2711c;color:#1a2633}
    .btn-line{border:2px solid #ffffff;color:#ffffff}
    .btn-blue{background:#14365d;color:#ffffff}
    .hero{background:#14365d}
    .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
    .tag{display:inline-block;margin:0 0 18px;padding:6px 14px;border-radius:999px;background:#f2711c;color:#1a2633;font-size:13px;font-weight:700;letter-spacing:.04em}
    .hero .lead{color:#eef2f6;font-size:18px;margin:0 0 28px}
    .row{display:flex;gap:14px;flex-wrap:wrap}
    .trust{margin:24px 0 0;color:#eef2f6;font-size:14px}
    .hero-img{width:100%;min-width:0;background:#eef2f6;height:440px;object-fit:cover;border-radius:14px;display:block}
    .head{max-width:680px;margin:0 0 36px}
    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .svc{padding:28px;border:2px solid #eef2f6;border-radius:12px;background:#ffffff}
    .icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:#eef2f6;color:#14365d;font-size:22px;margin:0 0 16px}
    .tint{background:#eef2f6}
    .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
    .side-img{width:100%;min-width:0;background:#eef2f6;height:500px;object-fit:cover;border-radius:14px;display:block}
    .checks{display:flex;flex-direction:column;gap:14px;margin:22px 0 0}
    .checks > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.65;color:#1a2633}
    .tick{color:#f2711c;font-size:18px;line-height:1.5;font-weight:700}
    .step{padding:26px;border-radius:12px;background:#eef2f6}
    .num{margin:0 0 10px;color:#f2711c;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
    .rcard{padding:28px;border:2px solid #eef2f6;border-radius:12px;background:#ffffff}
    .rcard h3{font-size:16px;margin:0 0 10px}
    .stars{color:#f2711c;font-size:20px;letter-spacing:2px;margin:0 0 12px}
    .rcard figure{margin:0}
    .rcard blockquote{margin:0 0 16px;font-size:16px;line-height:1.75;color:#1a2633}
    .rcard figcaption{font-size:14px;color:#5b6b7c}
    .fine{margin:22px 0 0;font-size:13px}
    .band{background:#f2711c;padding:56px 0}
    .band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px}
    .band h2{margin:0 0 8px}
    .band p{color:#1a2633;max-width:640px}
    @media(max-width:780px){section{padding:52px 0}.wrap{padding:0 16px}.hero .wrap,.split,.grid3,.grid4{grid-template-columns:1fr}.hero .wrap{gap:32px}h1{font-size:34px}h2{font-size:27px}.hero-img{height:260px}.side-img{height:300px}.band .wrap{flex-direction:column;align-items:flex-start}.row .btn{flex:1;text-align:center}}
  </style>
</head>
<body>
  <section class="hero">
    <div class="wrap">
      <div>
        <p class="tag">Serving Larkfield County</p>
        <h1>Plumbing and electrical repairs, fixed on the first visit</h1>
        <p class="lead">Leaks, blocked drains, dead outlets and tripping breakers. Tell us what is wrong and we give you a fixed price before any work starts.</p>
        <div class="row">
          <a class="btn btn-orange" href="tel:+15550142290">Call (555) 014-2290</a>
          <a class="btn btn-line" href="#quote">Get a free quote</a>
        </div>
        <p class="trust">Licensed and insured · License no. [your license number] · Insured with [your insurer]</p>
      </div>
      <img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/homeservices/plumber-under-sink.jpg" width="1600" height="1000" alt="Plumber in a navy work shirt tightening a pipe fitting under a kitchen sink">
    </div>
  </section>

  <section id="services">
    <div class="wrap">
      <div class="head">
        <h2>What we fix</h2>
        <p>Most jobs are finished in one visit because the van carries the common parts. If a part has to be ordered, you will know the cost and the return date before we leave.</p>
      </div>
      <div class="grid3">
        <article class="svc"><span class="icon">◎</span><h3>Leaks and burst pipes</h3><p>Dripping taps, leaking joints and split pipes found, isolated and repaired.</p></article>
        <article class="svc"><span class="icon">↻</span><h3>Drains and blockages</h3><p>Sinks, showers and toilets cleared, with a camera check when a blockage keeps coming back.</p></article>
        <article class="svc"><span class="icon">●</span><h3>Water heaters</h3><p>Tank and tankless units repaired, serviced or replaced, with the old unit taken away.</p></article>
        <article class="svc"><span class="icon">✓</span><h3>Electrical faults</h3><p>Breakers that trip, outlets that stopped working and flickering circuits traced to the cause.</p></article>
        <article class="svc"><span class="icon">+</span><h3>Lighting and outlets</h3><p>New fixtures, extra outlets, outdoor lights and USB outlets fitted and tested.</p></article>
        <article class="svc"><span class="icon">➜</span><h3>Panel upgrades</h3><p>Older panels replaced and upgraded for EV chargers, heat pumps or a new kitchen.</p></article>
      </div>
    </div>
  </section>

  <section class="tint">
    <div class="wrap split">
      <img class="side-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/homeservices/technician-at-door.jpg" width="1000" height="1250" alt="Technician with a toolbag greeting a homeowner at the front door of a house">
      <div>
        <h2>Why homeowners call us back</h2>
        <p>Small things decide whether you would let a tradesperson into your home twice. These are the ones we hold ourselves to.</p>
        <div class="checks">
          <div><span class="tick">✓</span><span><strong>A fixed price first.</strong> You approve the price before work begins, and it does not change.</span></div>
          <div><span class="tick">✓</span><span><strong>An arrival window you can plan around.</strong> Two-hour windows, and a text when we are on the way.</span></div>
          <div><span class="tick">✓</span><span><strong>Shoe covers and drop cloths.</strong> We leave the room the way we found it.</span></div>
          <div><span class="tick">✓</span><span><strong>Work guaranteed for [your guarantee period].</strong> If the repair fails, we come back at no charge.</span></div>
          <div><span class="tick">✓</span><span><strong>One company for both trades.</strong> No waiting for a second contractor when a job needs both.</span></div>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="wrap">
      <div class="head">
        <h2>How a job works</h2>
        <p>From the first call to the invoice, there are four steps and no surprises.</p>
      </div>
      <div class="grid4">
        <article class="step"><p class="num">Step 1</p><h3>Call or send the form</h3><p>Describe the problem. A photo helps us bring the right parts.</p></article>
        <article class="step"><p class="num">Step 2</p><h3>Pick a time</h3><p>Choose an arrival window. Urgent jobs are booked the same day where we can.</p></article>
        <article class="step"><p class="num">Step 3</p><h3>Approve the price</h3><p>We diagnose on site and give you a fixed price. Nothing starts until you say yes.</p></article>
        <article class="step"><p class="num">Step 4</p><h3>Fixed and tested</h3><p>We test the repair with you, clean up and send the invoice by email.</p></article>
      </div>
    </div>
  </section>

  <section class="tint" id="reviews">
    <div class="wrap">
      <div class="head">
        <h2>What customers say</h2>
        <p>Replace these with reviews your customers have actually left, and link to where they were posted.</p>
      </div>
      <div class="grid3">
        <article class="rcard">
          <h3>Burst pipe, Westmere</h3>
          <div class="stars">★★★★★</div>
          <figure><blockquote>Water was coming through the kitchen ceiling on a Sunday morning. They talked me through shutting the main valve on the phone and were here within the hour.</blockquote><figcaption><strong>Dana M.</strong> · Westmere</figcaption></figure>
        </article>
        <article class="rcard">
          <h3>Panel upgrade, Larkfield</h3>
          <div class="stars">★★★★★</div>
          <figure><blockquote>Clear quote, arrived when they said, and the new panel was in and labeled by mid-afternoon. They even explained which breaker runs what.</blockquote><figcaption><strong>Victor A.</strong> · Larkfield</figcaption></figure>
        </article>
        <article class="rcard">
          <h3>Blocked drain, Oakhurst</h3>
          <div class="stars">★★★★☆</div>
          <figure><blockquote>The shower drain had blocked three times in a year. The camera found tree roots, and they showed me the footage before quoting the fix.</blockquote><figcaption><strong>Priya S.</strong> · Oakhurst</figcaption></figure>
        </article>
      </div>
      <p class="fine">Sample reviews for layout only. Publish real customer reviews with their permission.</p>
    </div>
  </section>

  <section class="band">
    <div class="wrap">
      <div>
        <h2>Water where it shouldn’t be? A burning smell from an outlet?</h2>
        <p>Don’t wait for a quote. Turn off the water at the main valve or the power at the panel if it is safe to do so, then call the emergency line.</p>
      </div>
      <a class="btn btn-blue" href="tel:+15550142290">Call (555) 014-2290</a>
    </div>
  </section>
</body>
</html>