Pages Medium
Insurance — Life Insurance Landing
An empathetic life-insurance landing page with a reassuring hero, a term vs whole comparison, an interactive coverage calculator teaser, beneficiary peace-of-mind messaging, customer testimonials, an expandable FAQ accordion and a get-a-quote call to action.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--blue: #2563eb;
--blue-d: #1d4ed8;
--green: #15a06b;
--blue-50: #eef4ff;
--ink: #0f1a2b;
--muted: #5a6b82;
--bg: #f3f7fc;
--white: #ffffff;
--line: #e3ecf7;
--radius: 18px;
--radius-sm: 12px;
--shadow: 0 10px 30px -12px rgba(15, 26, 43, 0.18);
--shadow-sm: 0 4px 14px -8px rgba(15, 26, 43, 0.22);
--font: 'Inter', system-ui, -apple-system, sans-serif;
--maxw: 1100px;
}
* { 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, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; border-radius: 6px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; font-family: var(--font); font-weight: 600; font-size: 15px;
padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-d); box-shadow: var(--shadow); }
.btn-ghost { background: var(--white); color: var(--blue-d); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 18px;
padding: 14px clamp(16px, 4vw, 40px);
background: rgba(243, 247, 252, 0.85); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.brand-mark {
display: inline-grid; place-items: center; width: 34px; height: 34px;
border-radius: 10px; background: var(--blue-50); color: var(--green);
}
.site-nav { margin-left: auto; display: flex; gap: 26px; }
.site-nav a { color: var(--muted); font-weight: 500; font-size: 15px; }
.site-nav a:hover { color: var(--ink); }
.site-header .btn-sm { flex-shrink: 0; }
/* ---------- Shared ---------- */
.eyebrow {
display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--blue-d); background: var(--blue-50);
padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.section-head { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.section-head p { color: var(--muted); margin-top: 10px; }
section { padding: clamp(48px, 7vw, 90px) clamp(16px, 4vw, 40px); }
section h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; }
/* ---------- Hero ---------- */
.hero {
display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 64px);
align-items: center; max-width: var(--maxw); margin: 0 auto;
padding-top: clamp(40px, 6vw, 72px);
}
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.lede { color: var(--muted); font-size: 18px; margin-top: 18px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.trust-row {
list-style: none; padding: 0; margin: 26px 0 0;
display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.trust-row li { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 500; }
.trust-row span { color: var(--green); font-weight: 800; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 22px 20px; box-shadow: var(--shadow-sm);
}
.stat-num { font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--blue-d); }
.stat-label { color: var(--muted); font-size: 14px; margin-top: 4px; }
/* ---------- Peace of mind ---------- */
.peace { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.peace h2 { margin-bottom: 36px; }
.peace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.peace-card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 26px; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .2s ease;
}
.peace-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.peace-ico {
display: inline-grid; place-items: center; width: 48px; height: 48px;
font-size: 24px; background: var(--blue-50); border-radius: 14px; margin-bottom: 14px;
}
.peace-card h3 { font-size: 19px; margin-bottom: 6px; }
.peace-card p { color: var(--muted); font-size: 15px; }
/* ---------- Plans ---------- */
.plans { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 0 auto; }
.plan-card {
background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
padding: 28px; display: flex; flex-direction: column;
}
.plan-featured { background: var(--white); border: 2px solid var(--blue); box-shadow: var(--shadow); position: relative; }
.plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.plan-head h3 { font-size: 22px; }
.plan-tag { font-size: 12px; font-weight: 700; color: var(--blue-d); background: var(--blue-50); padding: 4px 10px; border-radius: 999px; }
.plan-tag-green { color: #0c7a50; background: #e2f6ee; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price .amt { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; }
.plan-price .per { color: var(--muted); font-weight: 600; }
.plan-sub { color: var(--muted); font-size: 14px; margin: 4px 0 18px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 11px; flex: 1; }
.plan-feats li { display: flex; gap: 9px; font-size: 15px; align-items: flex-start; }
.plan-feats li span { color: var(--green); font-weight: 800; flex-shrink: 0; }
.plan-feats li.muted { color: var(--muted); }
.plan-feats li.muted span { color: var(--muted); }
.plan-cta { width: 100%; }
/* ---------- Calculator ---------- */
.calc {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px);
align-items: center; max-width: var(--maxw); margin: 0 auto;
}
.calc-copy p { color: var(--muted); margin-top: 12px; font-size: 17px; }
.calc-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.calc-points li { display: flex; gap: 9px; color: var(--ink); font-weight: 500; }
.calc-points span { color: var(--green); font-weight: 800; }
.calc-card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 28px; box-shadow: var(--shadow);
}
.field { margin-bottom: 22px; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.field output { color: var(--blue-d); font-weight: 700; }
.field-row { display: flex; align-items: center; justify-content: space-between; }
.field-label { font-weight: 600; font-size: 15px; }
input[type="range"] {
-webkit-appearance: none; appearance: none; width: 100%; height: 6px;
border-radius: 999px; background: var(--blue-50); outline-offset: 4px; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
background: var(--blue); border: 3px solid var(--white); box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%; background: var(--blue);
border: 3px solid var(--white); box-shadow: var(--shadow-sm); cursor: pointer;
}
.toggle { display: inline-flex; background: var(--blue-50); border-radius: 999px; padding: 4px; }
.toggle-btn {
border: none; background: transparent; font-family: var(--font); font-weight: 600; font-size: 14px;
color: var(--muted); padding: 7px 18px; border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.toggle-btn.is-active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.calc-result {
background: var(--blue-50); border-radius: var(--radius-sm); padding: 20px; text-align: center; margin: 4px 0 18px;
}
.calc-est-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.calc-est { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 4px 0; }
.calc-est #calc-amount { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--blue-d); transition: color .2s ease; }
.calc-per { color: var(--muted); font-weight: 600; }
.calc-note { font-size: 13px; color: var(--muted); }
/* ---------- Testimonials ---------- */
.testimonials { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 100%; }
.testimonials h2 { text-align: center; margin-bottom: 38px; }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: var(--maxw); margin: 0 auto; }
.test-card {
margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
}
.stars { color: #f5a623; font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.test-card blockquote { margin: 0 0 18px; font-size: 16px; line-height: 1.6; }
.test-card figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.test-card figcaption strong { color: var(--ink); }
.avatar {
display: inline-grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 700; font-size: 14px;
}
/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq h2 { text-align: center; margin-bottom: 32px; }
.faq-list { display: grid; gap: 12px; }
.faq-item {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px;
box-shadow: var(--shadow-sm);
}
.faq-item summary {
list-style: none; cursor: pointer; font-weight: 600; font-size: 17px; padding: 16px 0;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
content: ""; position: absolute; background: var(--blue); border-radius: 2px; transition: transform .2s ease;
}
.faq-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-item p { color: var(--muted); padding: 0 0 18px; font-size: 15px; }
/* ---------- Quote CTA ---------- */
.quote { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%); }
.quote-inner { max-width: 620px; margin: 0 auto; text-align: center; color: var(--white); }
.quote-inner h2 { color: var(--white); }
.quote-inner > p { margin-top: 12px; color: rgba(255,255,255,0.85); font-size: 17px; }
.quote-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin: 28px 0 14px; text-align: left; }
.qfield { display: flex; flex-direction: column; }
.qfield label { color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.qfield input {
font-family: var(--font); font-size: 15px; padding: 13px 14px; border-radius: var(--radius-sm);
border: 1px solid transparent; background: var(--white); color: var(--ink);
}
.qfield input:focus-visible { outline: 3px solid rgba(255,255,255,0.6); }
.quote-form .btn { align-self: end; height: 48px; }
.quote-msg { grid-column: 1 / -1; min-height: 20px; font-size: 14px; font-weight: 600; color: #d9ffe9; }
.quote-fine { font-size: 13px; color: rgba(255,255,255,0.7); }
/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c8d4e4; padding: 56px clamp(16px, 4vw, 40px) 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; max-width: var(--maxw); margin: 0 auto; }
.foot-brand .brand { color: var(--white); }
.foot-brand .brand-mark { background: rgba(255,255,255,0.08); }
.foot-brand p { margin-top: 12px; font-size: 14px; color: #94a6bf; max-width: 26ch; }
.site-footer h4 { color: var(--white); font-size: 14px; margin-bottom: 14px; }
.site-footer nav { display: flex; flex-direction: column; gap: 9px; }
.site-footer nav a { color: #94a6bf; font-size: 14px; }
.site-footer nav a:hover { color: var(--white); }
.foot-legal { max-width: var(--maxw); margin: 36px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: #7f93ad; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; }
.calc { grid-template-columns: 1fr; }
.peace-grid, .test-grid, .plan-grid { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.site-nav { display: none; }
.hero-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { padding: 16px 14px; }
.hero-cta .btn { flex: 1; }
.quote-form { grid-template-columns: 1fr; }
.quote-form .btn { height: auto; }
.foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.plan-card { padding: 22px; }
section { padding: 44px 16px; }
}/* Evergreen Life — landing interactions (vanilla JS, no libraries) */
(function () {
"use strict";
/* ---------- Coverage calculator ---------- */
var form = document.getElementById("calc-form");
if (form) {
var ageInput = document.getElementById("age");
var coverageInput = document.getElementById("coverage");
var termInput = document.getElementById("term");
var ageOut = document.getElementById("age-out");
var coverageOut = document.getElementById("coverage-out");
var termOut = document.getElementById("term-out");
var amountEl = document.getElementById("calc-amount");
var toggleBtns = form.querySelectorAll(".toggle-btn");
var tobacco = 0;
var usd = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0
});
function estimate() {
var age = Number(ageInput.value);
var coverage = Number(coverageInput.value);
var term = Number(termInput.value);
// Illustrative pricing model only — not real actuarial math.
// Base cost per $1,000 of coverage scaled by age, term and tobacco.
var ratePerThousand = 0.018;
var ageFactor = 1 + Math.max(0, age - 30) * 0.035;
var termFactor = 1 + (term - 10) * 0.018;
var tobaccoFactor = tobacco ? 2.4 : 1;
var monthly =
(coverage / 1000) *
ratePerThousand *
ageFactor *
termFactor *
tobaccoFactor;
monthly = Math.max(8, monthly); // floor
return Math.round(monthly);
}
function render() {
ageOut.textContent = ageInput.value;
coverageOut.textContent = usd.format(Number(coverageInput.value));
termOut.textContent = termInput.value + " years";
var value = estimate();
amountEl.textContent = usd.format(value);
// brief highlight on change
amountEl.style.color = "var(--green)";
window.clearTimeout(amountEl._t);
amountEl._t = window.setTimeout(function () {
amountEl.style.color = "";
}, 280);
}
[ageInput, coverageInput, termInput].forEach(function (el) {
el.addEventListener("input", render);
});
toggleBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
tobacco = Number(btn.getAttribute("data-tobacco"));
toggleBtns.forEach(function (b) {
var active = b === btn;
b.classList.toggle("is-active", active);
b.setAttribute("aria-pressed", String(active));
});
render();
});
});
render();
}
/* ---------- Quote form (demo only) ---------- */
var quoteForm = document.getElementById("quote-form");
if (quoteForm) {
var msg = document.getElementById("quote-msg");
quoteForm.addEventListener("submit", function (e) {
e.preventDefault();
var email = quoteForm.querySelector("#q-email");
var zip = quoteForm.querySelector("#q-zip");
var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim());
var zipOk = /^\d{5}$/.test(zip.value.trim());
if (!emailOk) {
msg.textContent = "Please enter a valid email address.";
msg.style.color = "#ffd9d9";
email.focus();
return;
}
if (!zipOk) {
msg.textContent = "Please enter a 5-digit ZIP code.";
msg.style.color = "#ffd9d9";
zip.focus();
return;
}
msg.style.color = "#d9ffe9";
msg.textContent = "Thanks! Your illustrative quote for " + zip.value + " is on its way (demo).";
quoteForm.reset();
});
}
/* ---------- FAQ: keep accordion single-open ---------- */
var faqItems = document.querySelectorAll(".faq-item");
faqItems.forEach(function (item) {
item.addEventListener("toggle", function () {
if (item.open) {
faqItems.forEach(function (other) {
if (other !== item) other.open = false;
});
}
});
});
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Evergreen Life — Life insurance that quietly has your back</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<a class="brand" href="#top" aria-label="Evergreen Life home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.35-9.5-8.5C.9 9.7 2.2 6 5.5 6 7.6 6 9 7.4 12 10c3-2.6 4.4-4 6.5-4 3.3 0 4.6 3.7 3 6.5C19 16.65 12 21 12 21Z"/></svg>
</span>
Evergreen Life
</a>
<nav class="site-nav" aria-label="Primary">
<a href="#plans">Plans</a>
<a href="#calculator">Calculator</a>
<a href="#faq">FAQ</a>
</nav>
<a class="btn btn-primary btn-sm" href="#quote">Get a quote</a>
</header>
<main id="top">
<!-- HERO -->
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">Life insurance, made human</span>
<h1>Protect the people who count on you — for less than your streaming subscriptions.</h1>
<p class="lede">
Coverage that pays out when it matters most, so your family keeps the home, the routine and
the calm. No medical exam for most applicants. Decisions in minutes.
</p>
<div class="hero-cta">
<a class="btn btn-primary" href="#quote">Get my free quote</a>
<a class="btn btn-ghost" href="#calculator">See an estimate</a>
</div>
<ul class="trust-row" aria-label="Reasons to trust us">
<li><span aria-hidden="true">✓</span> A+ financial strength rating</li>
<li><span aria-hidden="true">✓</span> No exam up to $1M</li>
<li><span aria-hidden="true">✓</span> Cancel anytime</li>
</ul>
</div>
<div class="hero-stats" aria-label="Key figures">
<div class="stat-card">
<p class="stat-num">1.8M+</p>
<p class="stat-label">Members protected</p>
</div>
<div class="stat-card">
<p class="stat-num">$4.2B</p>
<p class="stat-label">Claims paid in 2025</p>
</div>
<div class="stat-card">
<p class="stat-num">99.2%</p>
<p class="stat-label">Claims approved</p>
</div>
<div class="stat-card">
<p class="stat-num">4.8/5</p>
<p class="stat-label">12,400 reviews</p>
</div>
</div>
</section>
<!-- PEACE OF MIND -->
<section class="peace" aria-labelledby="peace-h">
<h2 id="peace-h">Peace of mind for the people you love</h2>
<div class="peace-grid">
<article class="peace-card">
<span class="peace-ico" aria-hidden="true">🏠</span>
<h3>Keep the home</h3>
<p>A lump-sum payout can cover the mortgage so your family stays put through the hardest year.</p>
</article>
<article class="peace-card">
<span class="peace-ico" aria-hidden="true">🎓</span>
<h3>Fund the future</h3>
<p>Earmark coverage for tuition, childcare or everyday bills — paid directly to your beneficiaries.</p>
</article>
<article class="peace-card">
<span class="peace-ico" aria-hidden="true">🤝</span>
<h3>Name who matters</h3>
<p>Add or update beneficiaries online in seconds. Spouse, kids, a sibling, or a cause you believe in.</p>
</article>
</div>
</section>
<!-- PLANS / COMPARISON -->
<section id="plans" class="plans" aria-labelledby="plans-h">
<header class="section-head">
<span class="eyebrow">Two simple paths</span>
<h2 id="plans-h">Term vs Whole — pick what fits your life</h2>
<p>Not sure? Most young families start with Term. You can convert later, no new exam.</p>
</header>
<div class="plan-grid">
<article class="plan-card">
<header class="plan-head">
<h3>Term Life</h3>
<p class="plan-tag">Most popular</p>
</header>
<p class="plan-price"><span class="amt">$18</span><span class="per">/mo</span></p>
<p class="plan-sub">$500,000 coverage · 20-year term · age 32</p>
<ul class="plan-feats">
<li><span aria-hidden="true">✓</span> Lowest cost per dollar of coverage</li>
<li><span aria-hidden="true">✓</span> Fixed price for 10, 20 or 30 years</li>
<li><span aria-hidden="true">✓</span> Convert to Whole without re-applying</li>
<li class="muted"><span aria-hidden="true">—</span> No cash value build-up</li>
</ul>
<a class="btn btn-primary plan-cta" href="#quote">Choose Term</a>
</article>
<article class="plan-card plan-featured">
<header class="plan-head">
<h3>Whole Life</h3>
<p class="plan-tag plan-tag-green">Lifelong</p>
</header>
<p class="plan-price"><span class="amt">$96</span><span class="per">/mo</span></p>
<p class="plan-sub">$500,000 coverage · covers you for life · age 32</p>
<ul class="plan-feats">
<li><span aria-hidden="true">✓</span> Coverage that never expires</li>
<li><span aria-hidden="true">✓</span> Builds tax-deferred cash value</li>
<li><span aria-hidden="true">✓</span> Borrow against your policy</li>
<li><span aria-hidden="true">✓</span> Level premiums for life</li>
</ul>
<a class="btn btn-primary plan-cta" href="#quote">Choose Whole</a>
</article>
</div>
</section>
<!-- CALCULATOR TEASER -->
<section id="calculator" class="calc" aria-labelledby="calc-h">
<div class="calc-copy">
<span class="eyebrow">Coverage calculator</span>
<h2 id="calc-h">How much would it cost me?</h2>
<p>Slide to your details for an illustrative monthly estimate. Your real quote may be lower.</p>
<ul class="calc-points">
<li><span aria-hidden="true">✓</span> No sign-up, no credit check</li>
<li><span aria-hidden="true">✓</span> Numbers update instantly</li>
</ul>
</div>
<form class="calc-card" id="calc-form" novalidate>
<div class="field">
<label for="age">Your age <output id="age-out">32</output></label>
<input type="range" id="age" name="age" min="18" max="65" value="32" step="1" />
</div>
<div class="field">
<label for="coverage">Coverage amount <output id="coverage-out">$500,000</output></label>
<input type="range" id="coverage" name="coverage" min="100000" max="2000000" value="500000" step="50000" />
</div>
<div class="field">
<label for="term">Term length <output id="term-out">20 years</output></label>
<input type="range" id="term" name="term" min="10" max="30" value="20" step="5" />
</div>
<div class="field field-row">
<span class="field-label">Tobacco use</span>
<div class="toggle" role="group" aria-label="Tobacco use">
<button type="button" class="toggle-btn is-active" data-tobacco="0" aria-pressed="true">No</button>
<button type="button" class="toggle-btn" data-tobacco="1" aria-pressed="false">Yes</button>
</div>
</div>
<div class="calc-result" aria-live="polite">
<p class="calc-est-label">Estimated monthly premium</p>
<p class="calc-est"><span id="calc-amount">$18</span><span class="calc-per">/mo</span></p>
<p class="calc-note">Illustrative only — get an exact quote in under 3 minutes.</p>
</div>
<a class="btn btn-primary btn-block" href="#quote">Lock in this rate</a>
</form>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials" aria-labelledby="test-h">
<h2 id="test-h">Families who sleep a little easier</h2>
<div class="test-grid">
<figure class="test-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“Applied on my phone during lunch, approved before dinner. When my husband passed, the claim was paid in nine days. No fight, no forms.”</blockquote>
<figcaption><span class="avatar" aria-hidden="true">PR</span><span><strong>Priya Raman</strong><br />Term member · Austin, TX</span></figcaption>
</figure>
<figure class="test-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“I wanted something that wouldn't expire. The Whole policy builds value and I actually borrowed against it for a deposit.”</blockquote>
<figcaption><span class="avatar" aria-hidden="true">MO</span><span><strong>Marcus Owens</strong><br />Whole member · Denver, CO</span></figcaption>
</figure>
<figure class="test-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>“No medical exam, honest pricing, and a real person answered when I called. Switched our whole family over.”</blockquote>
<figcaption><span class="avatar" aria-hidden="true">LC</span><span><strong>Lena Castillo</strong><br />Term member · Seattle, WA</span></figcaption>
</figure>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="faq" aria-labelledby="faq-h">
<h2 id="faq-h">Questions, answered plainly</h2>
<div class="faq-list">
<details class="faq-item" open>
<summary>Do I need a medical exam?<span class="faq-icon" aria-hidden="true"></span></summary>
<p>Most applicants up to $1,000,000 in coverage qualify with no exam — just a few health questions answered online. Larger policies may request a quick visit.</p>
</details>
<details class="faq-item">
<summary>What's the difference between term and whole?<span class="faq-icon" aria-hidden="true"></span></summary>
<p>Term covers you for a fixed period (10–30 years) at the lowest cost. Whole covers you for life and builds cash value you can borrow against. You can convert term to whole later with no new exam.</p>
</details>
<details class="faq-item">
<summary>How fast are claims paid?<span class="faq-icon" aria-hidden="true"></span></summary>
<p>Once we receive the required documents, the median claim is paid in nine days. In 2025 we approved 99.2% of claims submitted.</p>
</details>
<details class="faq-item">
<summary>Can I change my beneficiaries later?<span class="faq-icon" aria-hidden="true"></span></summary>
<p>Yes — add, remove or re-weight beneficiaries anytime from your online account. Changes take effect immediately.</p>
</details>
<details class="faq-item">
<summary>What if I cancel?<span class="faq-icon" aria-hidden="true"></span></summary>
<p>You can cancel anytime with no penalty. There's also a 30-day money-back window if you change your mind after starting a policy.</p>
</details>
</div>
</section>
<!-- QUOTE CTA -->
<section id="quote" class="quote" aria-labelledby="quote-h">
<div class="quote-inner">
<h2 id="quote-h">Get a free quote in under 3 minutes</h2>
<p>No spam, no pushy calls. See your real rate, then decide on your own time.</p>
<form class="quote-form" id="quote-form" novalidate>
<div class="qfield">
<label for="q-email">Email address</label>
<input type="email" id="q-email" name="email" placeholder="[email protected]" autocomplete="email" required />
</div>
<div class="qfield">
<label for="q-zip">ZIP code</label>
<input type="text" id="q-zip" name="zip" placeholder="78701" inputmode="numeric" pattern="\d{5}" maxlength="5" required />
</div>
<button type="submit" class="btn btn-primary">Get my quote</button>
<p class="quote-msg" id="quote-msg" role="status" aria-live="polite"></p>
</form>
<p class="quote-fine">By continuing you agree to receive your illustrative estimate. This is a demo — no data is sent.</p>
</div>
</section>
</main>
<footer class="site-footer">
<div class="foot-grid">
<div class="foot-brand">
<span class="brand">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.35-9.5-8.5C.9 9.7 2.2 6 5.5 6 7.6 6 9 7.4 12 10c3-2.6 4.4-4 6.5-4 3.3 0 4.6 3.7 3 6.5C19 16.65 12 21 12 21Z"/></svg>
</span>
Evergreen Life
</span>
<p>Coverage that quietly has your back.</p>
</div>
<nav aria-label="Products"><h4>Products</h4><a href="#plans">Term life</a><a href="#plans">Whole life</a><a href="#calculator">Calculator</a></nav>
<nav aria-label="Company"><h4>Company</h4><a href="#">About</a><a href="#">Careers</a><a href="#">Press</a></nav>
<nav aria-label="Support"><h4>Support</h4><a href="#faq">FAQ</a><a href="#">Contact</a><a href="#">File a claim</a></nav>
</div>
<p class="foot-legal">© 2026 Evergreen Life (demo). Illustrative UI only — not a real insurance product or financial advice.</p>
</footer>
<script src="script.js"></script>
</body>
</html>Life Insurance Landing
A calm, trustworthy landing page for a life-insurance product. The hero leads with an empathetic headline and a clear value proposition, backed by big confident numbers (members protected, claims paid, satisfaction). A side-by-side Term vs Whole comparison helps visitors pick the right plan, while a coverage-calculator teaser lets them slide their age, coverage amount and term to see an illustrative monthly estimate update live.
Beneficiary peace-of-mind messaging, three customer testimonials and an expandable FAQ accordion build confidence before the final get-a-quote call to action. The soft blue-and-green palette, rounded cards and friendly iconography keep the tone reassuring rather than salesy.
Everything is plain HTML, CSS custom properties and vanilla JavaScript — no frameworks, no libraries. The calculator math is intentionally simple and illustrative.
Illustrative UI only — not a real insurance product, quote, or financial advice.