Website kits
Home services footer
Trade business footer with an emergency call strip, contact details, service and area links, opening hours and license placeholders.
When to use it
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home services footer</title>
<style>
body{margin:0;font-family:'Open Sans',Arial,sans-serif;color:#eef2f6;background:#ffffff}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.call{background:#f2711c;padding:22px 0}
.call .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.call p{margin:0;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:20px;color:#1a2633}
.btn{display:inline-block;white-space:nowrap;padding:13px 22px;border-radius:8px;background:#14365d;color:#ffffff;text-decoration:none;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:16px}
footer{background:#1a2633;padding:56px 0 0}
.cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
h3{font-family:'Poppins',Arial,sans-serif;font-size:16px;color:#ffffff;margin:0 0 14px}
.name{margin:0 0 10px;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:21px;color:#ffffff}
p{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:#eef2f6}
.links{display:flex;flex-direction:column;gap:9px}
.links a{color:#eef2f6;text-decoration:none;font-size:14.5px}
.bottom{margin:44px 0 0;border-top:1px solid #5b6b7c}
.bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:22px}
.bottom p{margin:0;font-size:13px;color:#eef2f6}
@media(max-width:780px){.wrap{padding:0 16px}.cols{grid-template-columns:1fr 1fr;gap:28px}.brand{grid-column:1 / -1}.call .btn{width:100%;text-align:center;box-sizing:border-box}.bottom .wrap{flex-direction:column;gap:6px}}
</style>
</head>
<body>
<div class="call">
<div class="wrap">
<p>Burst pipe or no power? Call the emergency line.</p>
<a class="btn" href="tel:+15550142290">Call (555) 014-2290</a>
</div>
</div>
<footer>
<div class="wrap cols">
<div class="brand">
<p class="name">Hollis & Reed</p>
<p>Plumbing and electrical repairs across Larkfield County. Fixed prices agreed before work starts.</p>
<p>418 Kettle Row, Larkfield<br>[email protected]</p>
</div>
<div>
<h3>Services</h3>
<div class="links">
<a href="#services">Leaks and pipes</a>
<a href="#services">Drain cleaning</a>
<a href="#services">Water heaters</a>
<a href="#services">Electrical faults</a>
<a href="#services">Panel upgrades</a>
</div>
</div>
<div>
<h3>Company</h3>
<div class="links">
<a href="#areas">Areas we cover</a>
<a href="#reviews">Reviews</a>
<a href="#quote">Request a quote</a>
<a href="#privacy">Privacy policy</a>
</div>
</div>
<div>
<h3>Hours</h3>
<p>Mon–Fri 7am–6pm<br>Saturday 8am–2pm<br>Emergencies: [your emergency hours]</p>
</div>
</div>
<div class="bottom">
<div class="wrap">
<p>© 2026 Hollis & Reed Plumbing and Electrical</p>
<p>License no. [your license number] · Insured with [your insurer]</p>
</div>
</div>
</footer>
</body>
</html>