Pages Hard
Insurance — Auto Insurance Landing
A reassuring auto-insurance marketing page with an inline quick-quote widget, a headline savings claim, coverage-type cards, why-us benefits, discount badges, customer testimonials and a mobile-app claims call to action, all rendered in a calm blue and trust-green palette.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--blue: #2563eb;
--blue-d: #1d4ed8;
--blue-50: #eef4ff;
--green: #15a06b;
--green-d: #118055;
--ink: #0f1a2b;
--muted: #5a6b82;
--bg: #f3f7fc;
--white: #ffffff;
--line: #e2eaf4;
--shadow: 0 10px 30px rgba(15, 26, 43, 0.08);
--shadow-sm: 0 2px 8px rgba(15, 26, 43, 0.06);
--radius: 18px;
--radius-sm: 12px;
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
.eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blue);
background: var(--blue-50);
padding: 0.3rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.9rem;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
padding: 0.7rem 1.2rem;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-d); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-d); }
.btn--ghost { background: var(--blue-50); color: var(--blue-d); }
.btn--ghost:hover { background: #e0ebff; }
.btn--light { background: #fff; color: var(--blue-d); }
.btn--light:hover { background: var(--blue-50); }
.btn--block { width: 100%; }
.link-quiet { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.link-quiet:hover { color: var(--ink); }
/* Nav */
.nav {
position: sticky;
top: 0;
z-index: 20;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; padding: 0.9rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.15rem; }
.brand__mark { font-size: 1.3rem; }
.nav__links { display: flex; gap: 1.4rem; margin-left: auto; }
.nav__links a { color: var(--muted); font-weight: 600; font-size: 0.93rem; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 0.9rem; }
/* Hero */
.hero { padding: 3.5rem 0 3rem; background:
radial-gradient(1200px 400px at 80% -10%, var(--blue-50), transparent 60%); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 800; }
.hero .hl { color: var(--green); }
.lede { margin-top: 1.1rem; font-size: 1.1rem; color: var(--muted); max-width: 34ch; }
.lede strong { color: var(--ink); }
.hero__points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0.6rem; }
.hero__points li { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--ink); }
.hero__points span { color: var(--green); font-weight: 800; }
/* Quote card */
.quote-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.6rem;
}
.quote-card__title { font-size: 1.3rem; font-weight: 800; }
.quote-card__sub { color: var(--muted); font-size: 0.92rem; margin-top: 0.2rem; }
.quote-form { margin-top: 1.2rem; display: grid; gap: 0.85rem; }
.field { display: grid; gap: 0.35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.field input, .field select {
font-family: inherit;
font-size: 0.95rem;
padding: 0.62rem 0.7rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: #fbfdff;
color: var(--ink);
}
.field input:focus, .field select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--blue); }
.quote-card__fine { margin-top: 0.9rem; font-size: 0.74rem; color: var(--muted); text-align: center; }
.estimate {
margin-top: 1.1rem;
padding: 1.1rem;
border-radius: var(--radius-sm);
background: linear-gradient(180deg, var(--blue-50), #fff);
border: 1px solid var(--line);
text-align: center;
}
.estimate__label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.estimate__price { font-size: 2.4rem; font-weight: 800; color: var(--blue-d); line-height: 1; margin: 0.25rem 0 0.1rem; }
.estimate__per { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: 0.15rem; }
.estimate__save { color: var(--green-d); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.9rem; }
/* Trust strip */
.trust { padding: 1.6rem 0; background: var(--white); border-block: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.stat { display: grid; gap: 0.15rem; }
.stat__num { font-size: 1.9rem; font-weight: 800; color: var(--blue-d); letter-spacing: -0.02em; }
.stat__lbl { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
/* Sections */
.section { padding: 4rem 0; }
.section--alt { background: var(--white); border-block: 1px solid var(--line); }
.section__head { max-width: 56ch; margin-bottom: 2.2rem; }
.section__head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.section__sub { margin-top: 0.7rem; color: var(--muted); font-size: 1.02rem; }
/* Coverage cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.cov {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.4rem;
box-shadow: var(--shadow-sm);
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.section--alt .cov { background: var(--bg); }
.cov:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cdddf3; }
.cov__icon {
display: inline-grid; place-items: center;
width: 2.8rem; height: 2.8rem;
font-size: 1.4rem;
background: var(--blue-50);
border-radius: var(--radius-sm);
margin-bottom: 0.9rem;
}
.cov h3 { font-size: 1.12rem; font-weight: 700; }
.cov p { margin-top: 0.45rem; color: var(--muted); font-size: 0.92rem; }
.tag {
display: inline-block; margin-top: 0.9rem;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
padding: 0.25rem 0.6rem; border-radius: 999px;
background: var(--blue-50); color: var(--blue-d);
}
.tag--required { background: #e3f6ee; color: var(--green-d); }
.tag--addon { background: #fff3e0; color: #b86b00; }
/* Why us */
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.why { padding: 0.3rem; }
.why__icon {
display: inline-grid; place-items: center;
width: 3rem; height: 3rem; font-size: 1.5rem;
background: var(--bg); border-radius: 50%; margin-bottom: 0.8rem;
}
.why h3 { font-size: 1.08rem; font-weight: 700; }
.why p { margin-top: 0.4rem; color: var(--muted); font-size: 0.92rem; }
/* Discount badges */
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.badge {
display: flex; align-items: center; gap: 0.8rem;
font-family: inherit; text-align: left;
background: var(--white); border: 1.5px solid var(--line);
border-radius: var(--radius); padding: 1rem 1.1rem; cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.badge:hover { transform: translateY(-2px); border-color: #cdddf3; }
.badge:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.35); outline-offset: 2px; }
.badge.is-on { border-color: var(--green); background: #effaf4; }
.badge__icon {
display: inline-grid; place-items: center;
width: 2.4rem; height: 2.4rem; font-size: 1.2rem;
background: var(--blue-50); border-radius: var(--radius-sm); flex: none;
}
.badge.is-on .badge__icon { background: #d6f3e5; }
.badge__name { font-weight: 700; font-size: 0.95rem; flex: 1; }
.badge__amt { font-weight: 700; font-size: 0.85rem; color: var(--green-d); }
.discount-total {
display: flex; align-items: center; justify-content: space-between;
margin-top: 1.4rem; padding: 1.1rem 1.4rem;
background: var(--ink); color: #fff; border-radius: var(--radius);
}
.discount-total span { font-weight: 500; color: #c7d4e6; }
.discount-total strong { font-size: 1.9rem; font-weight: 800; color: #5ee0a6; }
.discount-total small { font-size: 0.95rem; font-weight: 600; color: #c7d4e6; margin-left: 0.15rem; }
/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.review {
margin: 0; background: var(--bg); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1.5rem;
}
.section--alt .review { background: var(--white); }
.review__stars { color: #f5b301; letter-spacing: 0.1em; font-size: 1.05rem; }
.review blockquote { margin: 0.7rem 0 1.1rem; font-size: 0.97rem; color: var(--ink); }
.review figcaption { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--muted); }
.review__avatar {
display: inline-grid; place-items: center;
width: 2.4rem; height: 2.4rem; flex: none;
border-radius: 50%; background: var(--blue); color: #fff;
font-weight: 700; font-size: 0.82rem;
}
.review figcaption strong { color: var(--ink); }
/* CTA */
.cta { padding: 3.5rem 0; }
.cta__inner {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
background: linear-gradient(120deg, var(--blue), var(--blue-d));
border-radius: var(--radius); padding: 2.4rem; color: #fff;
}
.cta__copy h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; }
.cta__copy p { margin-top: 0.6rem; color: #d7e3fb; max-width: 40ch; }
.cta__btns { display: flex; gap: 0.8rem; margin-top: 1.3rem; flex-wrap: wrap; }
.cta__claim {
background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius); padding: 1.4rem; text-align: center;
}
.cta__claim-eyebrow { font-size: 0.8rem; color: #c7d4e6; font-weight: 600; }
.cta__claim-title { font-size: 1.3rem; font-weight: 800; margin: 0.2rem 0 1rem; }
/* Footer */
.foot { background: var(--ink); color: #b9c6d8; padding: 3rem 0 1.5rem; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.foot__brand .brand { color: #fff; }
.foot__brand p { margin-top: 0.6rem; font-size: 0.9rem; max-width: 26ch; }
.foot h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; margin-bottom: 0.8rem; }
.foot nav { display: grid; gap: 0.5rem; }
.foot nav a { font-size: 0.9rem; color: #b9c6d8; }
.foot nav a:hover { color: #fff; }
.foot__bar {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.82rem; color: #8194ab;
}
.foot__bar a:hover { color: #fff; }
/* Responsive */
@media (max-width: 900px) {
.hero__grid { grid-template-columns: 1fr; gap: 2rem; }
.lede { max-width: none; }
.cards, .why__grid { grid-template-columns: repeat(2, 1fr); }
.reviews { grid-template-columns: 1fr; }
.badges { grid-template-columns: repeat(2, 1fr); }
.cta__inner { grid-template-columns: 1fr; }
.foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.nav__links { display: none; }
.nav__cta .link-quiet { display: none; }
.hero { padding: 2.5rem 0; }
.trust__grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
.cards, .why__grid, .badges { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.section { padding: 2.8rem 0; }
.cta__inner { padding: 1.6rem; }
.foot__grid { grid-template-columns: 1fr; gap: 1.4rem; }
.foot__bar { flex-direction: column; gap: 0.4rem; }
.discount-total strong { font-size: 1.6rem; }
}// DriveSure auto-insurance landing — quick-quote estimator + discount calculator.
// Vanilla JS, no libraries. Estimates are illustrative only.
(function () {
'use strict';
/* ---- Quick quote estimator ---- */
var form = document.getElementById('quoteForm');
var estimate = document.getElementById('estimate');
var estPrice = document.getElementById('estPrice');
var estSave = document.getElementById('estSave');
var zip = document.getElementById('zip');
// Keep ZIP numeric.
if (zip) {
zip.addEventListener('input', function () {
zip.value = zip.value.replace(/\D/g, '').slice(0, 5);
});
}
var COVERAGE_BASE = { basic: 78, standard: 112, full: 158 };
function yearFactor(year) {
var y = parseInt(year, 10);
if (y >= 2024) return 1.18;
if (y >= 2022) return 1.08;
if (y >= 2019) return 1.0;
if (y >= 2015) return 0.92;
return 0.85;
}
function zipFactor(z) {
// Deterministic, friendly variance from the ZIP digits (demo only).
var sum = 0;
for (var i = 0; i < z.length; i++) sum += z.charCodeAt(i);
return 0.92 + ((sum % 17) / 100); // 0.92 – 1.08
}
if (form) {
form.addEventListener('submit', function (e) {
e.preventDefault();
var z = (zip.value || '').trim();
if (z.length < 5) {
zip.focus();
zip.setAttribute('aria-invalid', 'true');
return;
}
zip.removeAttribute('aria-invalid');
var coverage = document.getElementById('coverage').value;
var year = document.getElementById('year').value;
var safe = document.getElementById('safe').checked;
var bundle = document.getElementById('bundle').checked;
var monthly = COVERAGE_BASE[coverage] * yearFactor(year) * zipFactor(z);
var fullPrice = monthly;
if (safe) monthly *= 0.9; // safe-driver discount
if (bundle) monthly *= 0.88; // bundle discount
monthly = Math.round(monthly);
var saved = Math.round((fullPrice - monthly) * 12);
estPrice.textContent = '$' + monthly;
if (saved > 0) {
estSave.textContent = 'You could save about $' + saved + '/yr with your discounts';
estSave.style.display = '';
} else {
estSave.textContent = 'Add discounts below to save even more';
estSave.style.display = '';
}
estimate.hidden = false;
estimate.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
}
/* ---- Discount badge calculator ---- */
var badges = document.getElementById('badges');
var totalEl = document.getElementById('discountTotal');
function renderTotal() {
if (!badges || !totalEl) return;
var total = 0;
badges.querySelectorAll('.badge.is-on').forEach(function (b) {
total += parseInt(b.getAttribute('data-save'), 10) || 0;
});
totalEl.innerHTML = '$' + total + '<small>/yr</small>';
}
if (badges) {
badges.addEventListener('click', function (e) {
var btn = e.target.closest('.badge');
if (!btn) return;
btn.classList.toggle('is-on');
btn.setAttribute('aria-pressed', btn.classList.contains('is-on') ? 'true' : 'false');
renderTotal();
});
// Initialise aria state.
badges.querySelectorAll('.badge').forEach(function (b) {
b.setAttribute('aria-pressed', 'false');
});
renderTotal();
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DriveSure — Auto Insurance That Actually Saves You Money</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="nav">
<div class="wrap nav__inner">
<a class="brand" href="#" aria-label="DriveSure home">
<span class="brand__mark" aria-hidden="true">🛡️</span>
<span class="brand__name">DriveSure</span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#coverage">Coverage</a>
<a href="#why">Why us</a>
<a href="#discounts">Discounts</a>
<a href="#reviews">Reviews</a>
</nav>
<div class="nav__cta">
<a href="#" class="link-quiet">Log in</a>
<a href="#quote" class="btn btn--ghost">Get a quote</a>
</div>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero" id="quote">
<div class="wrap hero__grid">
<div class="hero__copy">
<span class="eyebrow">Switch & save in minutes</span>
<h1>Auto insurance that<br />drivers actually <span class="hl">trust</span>.</h1>
<p class="lede">
Drivers who switch to DriveSure save an average of
<strong>$612 a year</strong>. Get a real quote in under two minutes —
no calls, no pressure.
</p>
<ul class="hero__points">
<li><span aria-hidden="true">✓</span> Rated 4.8 / 5 by 38,400 drivers</li>
<li><span aria-hidden="true">✓</span> Claims paid in as little as 48 hours</li>
<li><span aria-hidden="true">✓</span> Cancel anytime, no fees</li>
</ul>
</div>
<!-- QUICK QUOTE WIDGET -->
<aside class="quote-card" aria-labelledby="quote-title">
<h2 id="quote-title" class="quote-card__title">Quick quote</h2>
<p class="quote-card__sub">See your estimated monthly premium.</p>
<form id="quoteForm" class="quote-form" novalidate>
<div class="field">
<label for="zip">ZIP code</label>
<input id="zip" name="zip" inputmode="numeric" maxlength="5"
placeholder="73301" autocomplete="postal-code" required />
</div>
<div class="field-row">
<div class="field">
<label for="year">Vehicle year</label>
<select id="year" name="year">
<option value="2024">2024</option>
<option value="2022" selected>2022</option>
<option value="2019">2019</option>
<option value="2015">2015</option>
<option value="2010">2010 or older</option>
</select>
</div>
<div class="field">
<label for="coverage">Coverage</label>
<select id="coverage" name="coverage">
<option value="basic">Basic</option>
<option value="standard" selected>Standard</option>
<option value="full">Full</option>
</select>
</div>
</div>
<label class="check">
<input type="checkbox" id="safe" name="safe" checked />
<span>I have a clean driving record (5+ yrs)</span>
</label>
<label class="check">
<input type="checkbox" id="bundle" name="bundle" />
<span>Bundle with home / renters</span>
</label>
<button type="submit" class="btn btn--primary btn--block">Estimate my premium</button>
</form>
<div class="estimate" id="estimate" hidden aria-live="polite">
<p class="estimate__label">Your estimated premium</p>
<p class="estimate__price"><span id="estPrice">$0</span><span class="estimate__per">/mo</span></p>
<p class="estimate__save" id="estSave"></p>
<a href="#" class="btn btn--block btn--green">Continue to full quote</a>
</div>
<p class="quote-card__fine">Estimate only. Final price depends on your full profile.</p>
</aside>
</div>
</section>
<!-- TRUST STRIP -->
<section class="trust" aria-label="By the numbers">
<div class="wrap trust__grid">
<div class="stat"><span class="stat__num">$612</span><span class="stat__lbl">avg. yearly savings</span></div>
<div class="stat"><span class="stat__num">48 hrs</span><span class="stat__lbl">avg. claim payout</span></div>
<div class="stat"><span class="stat__num">1.2M</span><span class="stat__lbl">drivers insured</span></div>
<div class="stat"><span class="stat__num">4.8★</span><span class="stat__lbl">customer rating</span></div>
</div>
</section>
<!-- COVERAGE -->
<section class="section" id="coverage">
<div class="wrap">
<header class="section__head">
<span class="eyebrow">Coverage</span>
<h2>Build a policy that fits how you drive</h2>
<p class="section__sub">Mix and match the protection you want. Every plan includes 24/7 support.</p>
</header>
<div class="cards">
<article class="cov">
<span class="cov__icon" aria-hidden="true">🚗</span>
<h3>Liability</h3>
<p>Covers damage and injuries you cause to others. Required in most states.</p>
<span class="tag tag--required">Included</span>
</article>
<article class="cov">
<span class="cov__icon" aria-hidden="true">💥</span>
<h3>Collision</h3>
<p>Repairs your car after an accident, no matter who was at fault.</p>
<span class="tag">Popular</span>
</article>
<article class="cov">
<span class="cov__icon" aria-hidden="true">🌧️</span>
<h3>Comprehensive</h3>
<p>Theft, hail, fire, vandalism and the things you can't see coming.</p>
<span class="tag">Recommended</span>
</article>
<article class="cov">
<span class="cov__icon" aria-hidden="true">🔧</span>
<h3>Roadside</h3>
<p>Towing, jump-starts, flat tires and lockouts, day or night.</p>
<span class="tag tag--addon">Add-on</span>
</article>
</div>
</div>
</section>
<!-- WHY US -->
<section class="section section--alt" id="why">
<div class="wrap">
<header class="section__head">
<span class="eyebrow">Why DriveSure</span>
<h2>Insurance without the runaround</h2>
</header>
<div class="why__grid">
<div class="why">
<span class="why__icon" aria-hidden="true">⚡</span>
<h3>Fast, fair claims</h3>
<p>File from the app in minutes and track every step. Most claims are paid within 48 hours.</p>
</div>
<div class="why">
<span class="why__icon" aria-hidden="true">🔍</span>
<h3>Transparent pricing</h3>
<p>No hidden fees and no surprise hikes. You see exactly what changes your rate.</p>
</div>
<div class="why">
<span class="why__icon" aria-hidden="true">🤝</span>
<h3>Real human help</h3>
<p>Licensed agents on chat and phone, 24/7. No phone-tree mazes, ever.</p>
</div>
<div class="why">
<span class="why__icon" aria-hidden="true">📱</span>
<h3>All in one app</h3>
<p>ID cards, payments, roadside and claims — your whole policy in your pocket.</p>
</div>
</div>
</div>
</section>
<!-- DISCOUNTS -->
<section class="section" id="discounts">
<div class="wrap">
<header class="section__head">
<span class="eyebrow">Save more</span>
<h2>Discounts that stack up fast</h2>
<p class="section__sub">Most drivers qualify for at least three. Tap one to see how much you could save.</p>
</header>
<div class="badges" id="badges">
<button class="badge" type="button" data-save="118">
<span class="badge__icon" aria-hidden="true">🛞</span>
<span class="badge__name">Safe driver</span>
<span class="badge__amt">−$118/yr</span>
</button>
<button class="badge" type="button" data-save="146">
<span class="badge__icon" aria-hidden="true">🏠</span>
<span class="badge__name">Bundle</span>
<span class="badge__amt">−$146/yr</span>
</button>
<button class="badge" type="button" data-save="72">
<span class="badge__icon" aria-hidden="true">🎓</span>
<span class="badge__name">Good student</span>
<span class="badge__amt">−$72/yr</span>
</button>
<button class="badge" type="button" data-save="94">
<span class="badge__icon" aria-hidden="true">📡</span>
<span class="badge__name">Telematics</span>
<span class="badge__amt">−$94/yr</span>
</button>
<button class="badge" type="button" data-save="60">
<span class="badge__icon" aria-hidden="true">💳</span>
<span class="badge__name">Pay in full</span>
<span class="badge__amt">−$60/yr</span>
</button>
<button class="badge" type="button" data-save="48">
<span class="badge__icon" aria-hidden="true">🚙</span>
<span class="badge__name">Multi-car</span>
<span class="badge__amt">−$48/yr</span>
</button>
</div>
<div class="discount-total">
<span>Selected savings</span>
<strong id="discountTotal">$0<small>/yr</small></strong>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section section--alt" id="reviews">
<div class="wrap">
<header class="section__head">
<span class="eyebrow">Reviews</span>
<h2>Drivers love the switch</h2>
</header>
<div class="reviews">
<figure class="review">
<div class="review__stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>Cut my premium by $54 a month and the app actually works. Filed a claim for a cracked windshield and it was approved before lunch.</blockquote>
<figcaption><span class="review__avatar" aria-hidden="true">MR</span><span><strong>Marcus Reyes</strong><br />Austin, TX · 2 yrs with us</span></figcaption>
</figure>
<figure class="review">
<div class="review__stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>I bundled my apartment and my Civic and saved more than I expected. Support answered on chat in under a minute.</blockquote>
<figcaption><span class="review__avatar" aria-hidden="true">PT</span><span><strong>Priya Tan</strong><br />Seattle, WA · 1 yr with us</span></figcaption>
</figure>
<figure class="review">
<div class="review__stars" aria-label="4 out of 5 stars">★★★★☆</div>
<blockquote>Roadside towed me 30 miles after a flat at midnight. No upsells, no nonsense. Renewing for sure.</blockquote>
<figcaption><span class="review__avatar" aria-hidden="true">DK</span><span><strong>Devon Klein</strong><br />Columbus, OH · 3 yrs with us</span></figcaption>
</figure>
</div>
</div>
</section>
<!-- APP / CLAIMS CTA -->
<section class="cta">
<div class="wrap cta__inner">
<div class="cta__copy">
<h2>Manage everything from the DriveSure app</h2>
<p>ID cards, payments, roadside requests and one-tap claims. Available on iOS and Android.</p>
<div class="cta__btns">
<a href="#" class="btn btn--light">📱 App Store</a>
<a href="#" class="btn btn--light">▶ Google Play</a>
</div>
</div>
<div class="cta__claim">
<p class="cta__claim-eyebrow">Need to file now?</p>
<p class="cta__claim-title">Start a claim 24/7</p>
<a href="#" class="btn btn--green">File a claim</a>
</div>
</div>
</section>
</main>
<footer class="foot">
<div class="wrap foot__grid">
<div class="foot__brand">
<span class="brand"><span class="brand__mark" aria-hidden="true">🛡️</span><span class="brand__name">DriveSure</span></span>
<p>Friendly auto coverage for everyday drivers.</p>
</div>
<nav aria-label="Coverage">
<h3>Coverage</h3>
<a href="#">Liability</a>
<a href="#">Collision</a>
<a href="#">Comprehensive</a>
<a href="#">Roadside</a>
</nav>
<nav aria-label="Company">
<h3>Company</h3>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Press</a>
<a href="#">Contact</a>
</nav>
<nav aria-label="Support">
<h3>Support</h3>
<a href="#">File a claim</a>
<a href="#">Help center</a>
<a href="#">Roadside</a>
<a href="#">Login</a>
</nav>
</div>
<div class="wrap foot__bar">
<p>© 2026 DriveSure Insurance. Illustrative demo — not a real product.</p>
<p><a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Licenses</a></p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>Auto Insurance Landing
A confident, trust-forward landing page for an auto-insurance brand. The hero pairs a big savings claim with an inline quick-quote widget — enter a ZIP, vehicle year and coverage level and it estimates a friendly monthly premium on the spot, no page reload.
Below the fold sit coverage-type cards (liability, collision, comprehensive, roadside), a why-us benefits row, discount badges for safe drivers and bundling, real-sounding testimonials, and a mobile-app claims CTA. The palette is calm blue with a trust-green accent, rounded cards and big confident numbers throughout.
Everything is vanilla HTML, CSS and JS — the quote estimator and discount toggles are wired with a few small event listeners and no libraries.
Illustrative UI only — not a real insurance product, quote or offer.