Pages Hard
Insurance — Health Insurance Landing
A reassuring health-insurance landing page with a plan-finder hero teaser, three pricing tiers with a live billing toggle, network and benefit highlights, an open-enrollment countdown banner, member testimonials, an accordion FAQ, and a confident get-a-quote call to action.
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: #0e7a51;
--ink: #0f1a2b;
--muted: #5a6b82;
--bg: #f3f7fc;
--white: #ffffff;
--line: #dbe6f4;
--shadow-sm: 0 1px 3px rgba(15, 26, 43, .06), 0 1px 2px rgba(15, 26, 43, .04);
--shadow-md: 0 12px 30px rgba(37, 99, 235, .10), 0 4px 10px rgba(15, 26, 43, .05);
--r: 16px;
--r-lg: 22px;
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.skip {
position: absolute;
left: -999px;
top: 0;
background: var(--ink);
color: var(--white);
padding: 10px 16px;
border-radius: 0 0 10px 0;
z-index: 100;
}
.skip:focus { left: 0; }
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
:focus-visible {
outline: 3px solid rgba(37, 99, 235, .45);
outline-offset: 2px;
border-radius: 6px;
}
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font: inherit;
font-weight: 600;
border: 1px solid transparent;
border-radius: 12px;
padding: 12px 20px;
cursor: pointer;
transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }
.btn-primary {
background: var(--blue);
color: var(--white);
box-shadow: 0 8px 18px rgba(37, 99, 235, .28);
}
.btn-primary:hover { background: var(--blue-d); box-shadow: 0 10px 24px rgba(37, 99, 235, .34); }
.btn-ghost {
background: var(--white);
color: var(--blue-d);
border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--blue); background: var(--blue-50); }
/* ---------- nav ---------- */
.nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(243, 247, 252, .82);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; }
.brand-mark {
display: inline-grid;
place-items: center;
width: 30px; height: 30px;
background: var(--blue);
color: var(--white);
border-radius: 9px;
font-size: .95rem;
}
.brand-accent { color: var(--blue); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); font-weight: 600; font-size: .94rem; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
background: var(--ink);
color: var(--white) !important;
padding: 9px 16px;
border-radius: 10px;
}
.nav-cta:hover { background: var(--blue-d); }
/* ---------- hero ---------- */
.hero { padding: 64px 0 36px; }
.hero-grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 48px;
align-items: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(21, 160, 107, .12);
color: var(--green-d);
font-weight: 700;
font-size: .8rem;
letter-spacing: .02em;
padding: 6px 13px;
border-radius: 999px;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(21, 160, 107, .2);
}
.hero-copy h1 {
font-size: clamp(2.1rem, 4.6vw, 3.3rem);
line-height: 1.08;
letter-spacing: -.02em;
margin: 18px 0 16px;
}
.lede { color: var(--muted); font-size: 1.08rem; max-width: 46ch; }
.hero-checks {
list-style: none;
padding: 0;
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
}
.hero-checks li {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: .92rem;
}
.hero-checks li::before {
content: "✓";
display: grid;
place-items: center;
width: 20px; height: 20px;
background: rgba(21, 160, 107, .15);
color: var(--green-d);
border-radius: 50%;
font-size: .72rem;
font-weight: 800;
}
/* plan finder */
.finder {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
padding: 26px;
}
.finder-title { font-size: 1.15rem; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .82rem; font-weight: 700; color: var(--ink); }
.field select,
.field input {
font: inherit;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--bg);
color: var(--ink);
transition: border-color .15s, background .15s;
}
.field select:focus,
.field input:focus { border-color: var(--blue); background: var(--white); outline: none; }
.finder-result {
background: var(--blue-50);
border: 1px dashed rgba(37, 99, 235, .35);
border-radius: 14px;
padding: 14px 16px;
margin: 4px 0 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.finder-label { font-size: .76rem; font-weight: 700; color: var(--blue-d); text-transform: uppercase; letter-spacing: .04em; }
.finder-amount { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.finder-amount small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.finder-note { font-size: .78rem; color: var(--muted); }
/* trust strip */
.trust {
margin-top: 52px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
padding: 24px 18px;
}
.trust-item { text-align: center; }
.trust-num { display: block; font-size: 1.7rem; font-weight: 800; color: var(--blue-d); letter-spacing: -.02em; }
.trust-cap { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
/* ---------- enrollment banner ---------- */
.enroll {
background: linear-gradient(110deg, var(--blue-d), var(--blue));
color: var(--white);
margin: 40px 0;
}
.enroll-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 0;
flex-wrap: wrap;
}
.enroll-badge {
display: inline-block;
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .3);
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: 4px 11px;
border-radius: 999px;
margin-bottom: 8px;
}
.enroll-text p { font-size: 1.05rem; }
.enroll-text strong { color: #ffe27a; }
.countdown { display: flex; gap: 10px; }
.cd-cell {
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 12px;
padding: 10px 12px;
min-width: 60px;
text-align: center;
}
.cd-num { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cd-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
/* ---------- section heads ---------- */
.section-head { text-align: center; max-width: 56ch; margin: 0 auto 30px; }
.section-head-left { text-align: left; margin-inline: 0; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.section-head p { color: var(--muted); margin-top: 8px; font-size: 1.02rem; }
/* ---------- plans ---------- */
.plans { padding: 24px 0 56px; }
.billing-toggle {
display: inline-flex;
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
padding: 5px;
margin: 0 auto 36px;
gap: 4px;
box-shadow: var(--shadow-sm);
}
.plans .billing-toggle { display: flex; width: fit-content; }
.bt-opt {
font: inherit;
font-weight: 600;
border: none;
background: transparent;
color: var(--muted);
padding: 9px 22px;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .18s, color .18s;
}
.bt-opt.is-active { background: var(--blue); color: var(--white); }
.save-tag {
font-size: .68rem;
font-weight: 800;
background: rgba(21, 160, 107, .18);
color: var(--green-d);
padding: 2px 7px;
border-radius: 999px;
}
.bt-opt.is-active .save-tag { background: rgba(255, 255, 255, .25); color: var(--white); }
.plan-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;
}
.plan {
position: relative;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 28px 24px;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform .15s ease, box-shadow .15s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan-featured {
border-color: var(--blue);
box-shadow: var(--shadow-md);
}
.ribbon {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--green);
color: var(--white);
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
padding: 5px 14px;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(21, 160, 107, .35);
}
.plan-top h3 { font-size: 1.3rem; }
.plan-sub { color: var(--muted); font-size: .9rem; margin-top: 5px; min-height: 2.6em; }
.price { margin: 16px 0 2px; display: flex; align-items: baseline; gap: 2px; }
.cur { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.amt { font-size: 2.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.per { color: var(--muted); font-weight: 600; }
.annual-note { font-size: .82rem; color: var(--green-d); font-weight: 600; min-height: 1.2em; }
.plan-feats {
list-style: none;
padding: 18px 0;
margin: 8px 0 0;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 11px;
flex: 1;
}
.plan-feats li {
position: relative;
padding-left: 26px;
font-size: .92rem;
}
.plan-feats li::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
display: grid;
place-items: center;
width: 18px; height: 18px;
background: rgba(21, 160, 107, .14);
color: var(--green-d);
border-radius: 50%;
font-size: .68rem;
font-weight: 800;
}
/* ---------- benefits ---------- */
.benefits { padding: 56px 0; background: var(--white); border-block: 1px solid var(--line); }
.benefit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.benefit {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 24px;
transition: transform .15s, border-color .15s;
}
.benefit:hover { transform: translateY(-3px); border-color: var(--blue); }
.b-icon {
display: inline-grid;
place-items: center;
width: 46px; height: 46px;
background: var(--blue-50);
border-radius: 13px;
font-size: 1.4rem;
margin-bottom: 14px;
}
.benefit h3 { font-size: 1.08rem; margin-bottom: 6px; }
.benefit p { color: var(--muted); font-size: .92rem; }
/* ---------- testimonials ---------- */
.quotes { padding: 60px 0; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qcard {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 24px;
box-shadow: var(--shadow-sm);
}
.stars { color: #f5a623; letter-spacing: 2px; font-size: 1rem; margin-bottom: 10px; }
.qcard blockquote { font-size: .96rem; color: var(--ink); }
.qcard figcaption {
display: flex;
align-items: center;
gap: 11px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.avatar {
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--blue);
color: var(--white);
font-weight: 700;
font-size: .85rem;
flex: none;
}
.qcard figcaption strong { display: block; font-size: .92rem; }
.qcard figcaption small { color: var(--muted); font-size: .8rem; }
/* ---------- faq ---------- */
.faq { padding: 20px 0 64px; }
.faq-wrap {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 44px;
align-items: start;
}
.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item {
background: var(--white);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.acc-item.open { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.acc-q {
width: 100%;
font: inherit;
font-weight: 600;
text-align: left;
background: transparent;
border: none;
padding: 17px 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
color: var(--ink);
}
.acc-icon {
flex: none;
display: grid;
place-items: center;
width: 26px; height: 26px;
border-radius: 8px;
background: var(--blue-50);
color: var(--blue-d);
font-size: 1.2rem;
font-weight: 700;
transition: transform .2s, background .2s, color .2s;
}
.acc-item.open .acc-icon { transform: rotate(45deg); background: var(--blue); color: var(--white); }
.acc-a {
max-height: 0;
overflow: hidden;
transition: max-height .28s ease;
}
.acc-a p { padding: 0 18px 18px; color: var(--muted); font-size: .94rem; }
/* ---------- cta ---------- */
.cta { padding: 20px 0 70px; }
.cta-card {
background: linear-gradient(150deg, var(--ink), #16263f);
color: var(--white);
border-radius: var(--r-lg);
padding: 44px clamp(24px, 5vw, 56px);
text-align: center;
box-shadow: var(--shadow-md);
}
.cta-card h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.cta-card > p { color: #c5d4e8; margin: 10px auto 26px; max-width: 50ch; }
.cta-form { max-width: 680px; margin-inline: auto; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr .6fr; gap: 12px; text-align: left; margin-bottom: 16px; }
.cta-row .field { margin-bottom: 0; }
.cta-row label { color: #c5d4e8; }
.cta-row input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: var(--white); }
.cta-row input::placeholder { color: rgba(255, 255, 255, .45); }
.cta-row input:focus { background: rgba(255, 255, 255, .12); border-color: #7aa6ff; }
.cta-msg {
margin-top: 14px;
background: rgba(21, 160, 107, .18);
border: 1px solid rgba(21, 160, 107, .4);
color: #b9f0d8;
padding: 12px 16px;
border-radius: 12px;
font-weight: 600;
}
/* ---------- footer ---------- */
.footer { background: var(--white); border-top: 1px solid var(--line); padding: 44px 0 26px; }
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 28px;
}
.footer-brand .brand-name { font-weight: 800; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 8px; }
.footer-brand p { color: var(--muted); font-size: .9rem; margin-top: 10px; max-width: 34ch; }
.footer nav h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: 12px; }
.footer nav a { display: block; color: var(--muted); font-size: .9rem; padding: 4px 0; transition: color .15s; }
.footer nav a:hover { color: var(--blue); }
.footer-bottom { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-bottom p { color: var(--muted); font-size: .84rem; }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 32px; }
.trust { grid-template-columns: repeat(2, 1fr); }
.plan-grid, .benefit-grid, .quote-grid { grid-template-columns: 1fr; }
.faq-wrap { grid-template-columns: 1fr; gap: 24px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.nav-links a:not(.nav-cta) { display: none; }
.hero { padding: 40px 0 24px; }
.trust { grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 12px; }
.trust-num { font-size: 1.4rem; }
.enroll-inner { flex-direction: column; align-items: flex-start; }
.countdown { gap: 7px; }
.cd-cell { min-width: 52px; padding: 8px; }
.cd-num { font-size: 1.25rem; }
.cta-row { grid-template-columns: 1fr; }
.cta-card { padding: 32px 20px; }
.footer-grid { grid-template-columns: 1fr; }
.billing-toggle { width: 100%; }
.bt-opt { flex: 1; justify-content: center; }
}(function () {
"use strict";
/* ---------- Plan finder teaser ---------- */
var finder = document.getElementById("finder");
var household = document.getElementById("household");
var zip = document.getElementById("zip");
var amountEl = document.getElementById("finderAmount");
// Rough base monthly per household size, with a ZIP-driven regional nudge.
var baseByHousehold = { "1": 189, "2": 312, "3": 468, "5": 612 };
function regionFactor(z) {
var n = parseInt((z || "").slice(0, 2), 10);
if (isNaN(n)) return 1;
// Spread between ~0.9 and ~1.15 based on first two ZIP digits.
return 0.9 + ((n % 26) / 25) * 0.25;
}
function fmt(n) {
return "$" + Math.round(n).toLocaleString("en-US");
}
function updateFinder() {
var base = baseByHousehold[household.value] || 312;
var factor = regionFactor(zip.value);
var low = base * factor * 0.92;
var high = base * factor * 1.12;
amountEl.innerHTML = fmt(low) + " – " + fmt(high) + "<small>/mo</small>";
}
if (household && zip && amountEl) {
household.addEventListener("change", updateFinder);
zip.addEventListener("input", function () {
zip.value = zip.value.replace(/\D/g, "").slice(0, 5);
updateFinder();
});
updateFinder();
}
if (finder) {
finder.addEventListener("submit", function (e) {
e.preventDefault();
var plans = document.getElementById("plans");
if (plans) plans.scrollIntoView({ behavior: "smooth" });
});
}
/* ---------- Billing toggle (recalculate prices live) ---------- */
var btMonthly = document.getElementById("btMonthly");
var btAnnual = document.getElementById("btAnnual");
var amtNodes = document.querySelectorAll(".plan .amt");
var noteNodes = document.querySelectorAll(".plan .annual-note");
var perNodes = document.querySelectorAll(".plan .per");
function setBilling(annual) {
btMonthly.classList.toggle("is-active", !annual);
btAnnual.classList.toggle("is-active", annual);
btMonthly.setAttribute("aria-pressed", String(!annual));
btAnnual.setAttribute("aria-pressed", String(annual));
amtNodes.forEach(function (node, i) {
var monthly = parseInt(node.getAttribute("data-monthly"), 10);
if (annual) {
// Show effective monthly when billed annually (16% off).
var perMonth = Math.round((monthly * 12 * 0.84) / 12);
node.textContent = perMonth.toLocaleString("en-US");
} else {
node.textContent = monthly.toLocaleString("en-US");
}
if (perNodes[i]) perNodes[i].textContent = annual ? "/mo*" : "/mo";
});
noteNodes.forEach(function (node) {
var yearly = parseInt(node.getAttribute("data-annual"), 10);
if (annual) {
var discounted = Math.round(yearly * 0.84);
var saving = yearly - discounted;
node.textContent = "$" + discounted.toLocaleString("en-US") +
"/yr · save $" + saving.toLocaleString("en-US");
} else {
node.textContent = "$" + yearly.toLocaleString("en-US") + " billed yearly";
}
});
}
if (btMonthly && btAnnual) {
btMonthly.addEventListener("click", function () { setBilling(false); });
btAnnual.addEventListener("click", function () { setBilling(true); });
}
/* ---------- Enrollment countdown ---------- */
var cdDays = document.getElementById("cdDays");
var cdHrs = document.getElementById("cdHrs");
var cdMin = document.getElementById("cdMin");
var cdSec = document.getElementById("cdSec");
// Target: Dec 15 23:59 of the current (or next) year.
function nextDeadline() {
var now = new Date();
var target = new Date(now.getFullYear(), 11, 15, 23, 59, 59);
if (target < now) target = new Date(now.getFullYear() + 1, 11, 15, 23, 59, 59);
return target;
}
var deadline = nextDeadline();
function pad(n) { return String(n).padStart(2, "0"); }
function tick() {
var diff = deadline - new Date();
if (diff < 0) diff = 0;
var s = Math.floor(diff / 1000);
var d = Math.floor(s / 86400);
var h = Math.floor((s % 86400) / 3600);
var m = Math.floor((s % 3600) / 60);
var sec = s % 60;
if (cdDays) cdDays.textContent = pad(d);
if (cdHrs) cdHrs.textContent = pad(h);
if (cdMin) cdMin.textContent = pad(m);
if (cdSec) cdSec.textContent = pad(sec);
}
if (cdDays) { tick(); setInterval(tick, 1000); }
/* ---------- FAQ accordion ---------- */
var accordion = document.getElementById("accordion");
if (accordion) {
accordion.addEventListener("click", function (e) {
var btn = e.target.closest(".acc-q");
if (!btn) return;
var item = btn.parentElement;
var panel = item.querySelector(".acc-a");
var isOpen = item.classList.contains("open");
// Close others (single-open accordion).
accordion.querySelectorAll(".acc-item.open").forEach(function (other) {
if (other !== item) {
other.classList.remove("open");
other.querySelector(".acc-q").setAttribute("aria-expanded", "false");
other.querySelector(".acc-a").style.maxHeight = null;
}
});
item.classList.toggle("open", !isOpen);
btn.setAttribute("aria-expanded", String(!isOpen));
panel.style.maxHeight = !isOpen ? panel.scrollHeight + "px" : null;
});
}
/* ---------- Quote form ---------- */
var quoteForm = document.getElementById("quoteForm");
var quoteMsg = document.getElementById("quoteMsg");
if (quoteForm) {
quoteForm.addEventListener("submit", function (e) {
e.preventDefault();
var name = document.getElementById("qname").value.trim() || "there";
var first = name.split(" ")[0];
quoteMsg.hidden = false;
quoteMsg.textContent =
"Thanks, " + first + " — a personalized quote is on its way to your inbox. (Demo only.)";
quoteForm.querySelector("button[type=submit]").textContent = "Quote sent ✓";
});
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brightcare Health — Coverage that feels human</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="nav">
<div class="wrap nav-inner">
<a class="brand" href="#main" aria-label="Brightcare Health home">
<span class="brand-mark" aria-hidden="true">✚</span>
<span class="brand-name">Brightcare<span class="brand-accent">Health</span></span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#plans">Plans</a>
<a href="#benefits">Benefits</a>
<a href="#faq">FAQ</a>
<a href="#quote" class="nav-cta">Get a quote</a>
</nav>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="eyebrow">Open enrollment is on</span>
<h1>Health coverage that<br />actually feels human.</h1>
<p class="lede">
Doctor visits, prescriptions and preventive care — covered with clear pricing and a
$0 deductible option. Find a plan that fits your family in under two minutes.
</p>
<ul class="hero-checks">
<li>No referrals for specialists</li>
<li>24/7 virtual care included</li>
<li>Same-week appointments</li>
</ul>
</div>
<!-- PLAN FINDER TEASER -->
<form class="finder" id="finder" aria-labelledby="finder-title">
<h2 id="finder-title" class="finder-title">Estimate your monthly cost</h2>
<div class="field">
<label for="household">Who needs coverage?</label>
<select id="household">
<option value="1">Just me</option>
<option value="2" selected>Me + partner</option>
<option value="3">Family (3–4)</option>
<option value="5">Large family (5+)</option>
</select>
</div>
<div class="field">
<label for="zip">ZIP code</label>
<input id="zip" type="text" inputmode="numeric" maxlength="5"
placeholder="e.g. 78701" value="78701" autocomplete="postal-code" />
</div>
<div class="finder-result" id="finderResult" aria-live="polite">
<span class="finder-label">Estimated range</span>
<span class="finder-amount" id="finderAmount">$284 – $396<small>/mo</small></span>
<span class="finder-note">Based on a 34-year-old non-smoker. Final price after a quick quote.</span>
</div>
<button type="submit" class="btn btn-primary btn-block">See my plans</button>
</form>
</div>
<!-- TRUST STRIP -->
<div class="wrap trust">
<div class="trust-item">
<span class="trust-num">38,000+</span>
<span class="trust-cap">In-network doctors</span>
</div>
<div class="trust-item">
<span class="trust-num">$2.4B</span>
<span class="trust-cap">Claims paid in 2025</span>
</div>
<div class="trust-item">
<span class="trust-num">4.8★</span>
<span class="trust-cap">Member rating (12,400 reviews)</span>
</div>
<div class="trust-item">
<span class="trust-num">98%</span>
<span class="trust-cap">Claims approved first time</span>
</div>
</div>
</section>
<!-- ENROLLMENT BANNER -->
<section class="enroll" aria-label="Open enrollment period">
<div class="wrap enroll-inner">
<div class="enroll-text">
<span class="enroll-badge">Enrollment closes soon</span>
<p>Open enrollment ends <strong>December 15</strong>. Lock in 2026 rates before they change.</p>
</div>
<div class="countdown" id="countdown" aria-live="polite" aria-label="Time remaining to enroll">
<div class="cd-cell"><span class="cd-num" id="cdDays">00</span><span class="cd-lbl">days</span></div>
<div class="cd-cell"><span class="cd-num" id="cdHrs">00</span><span class="cd-lbl">hrs</span></div>
<div class="cd-cell"><span class="cd-num" id="cdMin">00</span><span class="cd-lbl">min</span></div>
<div class="cd-cell"><span class="cd-num" id="cdSec">00</span><span class="cd-lbl">sec</span></div>
</div>
</div>
</section>
<!-- PLANS -->
<section class="plans" id="plans">
<div class="wrap">
<div class="section-head">
<h2>Pick a plan, not a puzzle</h2>
<p>Three clear tiers. No surprise fees. Switch or cancel anytime.</p>
</div>
<div class="billing-toggle" role="group" aria-label="Billing period">
<button type="button" class="bt-opt is-active" id="btMonthly" aria-pressed="true">Monthly</button>
<button type="button" class="bt-opt" id="btAnnual" aria-pressed="false">
Annual <span class="save-tag">save 16%</span>
</button>
</div>
<div class="plan-grid">
<!-- Essential -->
<article class="plan">
<header class="plan-top">
<h3>Essential</h3>
<p class="plan-sub">For healthy individuals who want a safety net.</p>
</header>
<p class="price"><span class="cur">$</span><span class="amt" data-monthly="189">189</span><span class="per">/mo</span></p>
<p class="annual-note" data-annual="1900">$1,900 billed yearly</p>
<ul class="plan-feats">
<li>$2,500 deductible</li>
<li>Primary care & urgent care</li>
<li>Generic prescriptions</li>
<li>Free annual checkup</li>
</ul>
<a href="#quote" class="btn btn-ghost btn-block">Choose Essential</a>
</article>
<!-- Plus (featured) -->
<article class="plan plan-featured">
<span class="ribbon">Most popular</span>
<header class="plan-top">
<h3>Plus</h3>
<p class="plan-sub">Low out-of-pocket costs with broad coverage.</p>
</header>
<p class="price"><span class="cur">$</span><span class="amt" data-monthly="312">312</span><span class="per">/mo</span></p>
<p class="annual-note" data-annual="3140">$3,140 billed yearly</p>
<ul class="plan-feats">
<li><strong>$0 deductible</strong></li>
<li>Specialists, no referral</li>
<li>Brand & generic prescriptions</li>
<li>Mental health & therapy</li>
<li>24/7 virtual care included</li>
</ul>
<a href="#quote" class="btn btn-primary btn-block">Choose Plus</a>
</article>
<!-- Family -->
<article class="plan">
<header class="plan-top">
<h3>Family</h3>
<p class="plan-sub">Everyone covered under one simple plan.</p>
</header>
<p class="price"><span class="cur">$</span><span class="amt" data-monthly="468">468</span><span class="per">/mo</span></p>
<p class="annual-note" data-annual="4710">$4,710 billed yearly</p>
<ul class="plan-feats">
<li>$0 deductible for kids</li>
<li>Pediatric & dental care</li>
<li>Maternity & newborn care</li>
<li>Up to 6 members</li>
</ul>
<a href="#quote" class="btn btn-ghost btn-block">Choose Family</a>
</article>
</div>
</div>
</section>
<!-- BENEFITS / NETWORK -->
<section class="benefits" id="benefits">
<div class="wrap">
<div class="section-head">
<h2>What every plan includes</h2>
<p>The essentials are never an add-on.</p>
</div>
<div class="benefit-grid">
<div class="benefit">
<span class="b-icon" aria-hidden="true">🩺</span>
<h3>Nationwide network</h3>
<p>38,000+ doctors and 1,200 hospitals across all 50 states. See who's near you before you enroll.</p>
</div>
<div class="benefit">
<span class="b-icon" aria-hidden="true">💊</span>
<h3>Prescription savings</h3>
<p>Generics from $4 and predictable copays on brand-name drugs at 60,000 pharmacies.</p>
</div>
<div class="benefit">
<span class="b-icon" aria-hidden="true">📱</span>
<h3>Virtual care, anytime</h3>
<p>Talk to a board-certified doctor in minutes, day or night — no extra charge on any plan.</p>
</div>
<div class="benefit">
<span class="b-icon" aria-hidden="true">🧘</span>
<h3>Mental health support</h3>
<p>Therapy, counseling and 24/7 crisis lines included. Care for your mind, not just your body.</p>
</div>
<div class="benefit">
<span class="b-icon" aria-hidden="true">🛡️</span>
<h3>Preventive care free</h3>
<p>Annual physicals, screenings and vaccines at $0 — because catching it early costs less.</p>
</div>
<div class="benefit">
<span class="b-icon" aria-hidden="true">⚡</span>
<h3>Fast, fair claims</h3>
<p>98% of claims approved on the first pass and most reimbursed within 5 business days.</p>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="quotes" aria-label="Member testimonials">
<div class="wrap">
<div class="section-head">
<h2>Members who switched, stayed</h2>
<p>Rated 4.8 out of 5 across 12,400 reviews.</p>
</div>
<div class="quote-grid">
<figure class="qcard">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>"My daughter needed a specialist fast. No referral, booked same week, and the claim just... worked. First time insurance hasn't stressed me out."</blockquote>
<figcaption><span class="avatar" aria-hidden="true">RM</span><span><strong>Renée Mbeki</strong><small>Plus plan · Austin, TX</small></span></figcaption>
</figure>
<figure class="qcard">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>"The virtual care saved me a 2am ER trip. A real doctor, in eight minutes, on my couch. That alone pays for the plan."</blockquote>
<figcaption><span class="avatar" aria-hidden="true">DK</span><span><strong>Daniel Koh</strong><small>Essential plan · Portland, OR</small></span></figcaption>
</figure>
<figure class="qcard">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>"Switching covered all four of us for less than my old solo plan. The pricing page is honest — what you see is what you pay."</blockquote>
<figcaption><span class="avatar" aria-hidden="true">SP</span><span><strong>Sofia Patel</strong><small>Family plan · Chicago, IL</small></span></figcaption>
</figure>
</div>
</div>
</section>
<!-- FAQ -->
<section class="faq" id="faq">
<div class="wrap faq-wrap">
<div class="section-head section-head-left">
<h2>Questions, answered</h2>
<p>Still unsure? Our enrollment advisors are a call away.</p>
</div>
<div class="accordion" id="accordion">
<div class="acc-item">
<button class="acc-q" aria-expanded="false">When can I enroll?
<span class="acc-icon" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Open enrollment runs through December 15 for coverage starting January 1. A qualifying life event — marriage, a new baby, losing other coverage — opens a special enrollment window anytime.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">Can I keep my current doctor?
<span class="acc-icon" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Most likely. Our network covers 38,000+ providers nationwide. Enter your ZIP in the plan finder to confirm your doctor is in-network before you commit.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">What's a deductible, really?
<span class="acc-icon" aria-hidden="true">+</span></button>
<div class="acc-a"><p>It's what you pay before the plan starts sharing costs. Our Plus and Family plans offer a $0 deductible, so covered care is shared from day one.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">Are prescriptions covered?
<span class="acc-icon" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Yes. Generics start at $4 on every plan, with predictable copays on brand-name medications at over 60,000 partner pharmacies.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">Can I cancel if it's not for me?
<span class="acc-icon" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Absolutely. There's no lock-in. Cancel or switch tiers anytime from your member dashboard — changes apply at the start of the next billing cycle.</p></div>
</div>
</div>
</div>
</section>
<!-- CTA / QUOTE -->
<section class="cta" id="quote">
<div class="wrap cta-card">
<h2>Get a personalized quote in 2 minutes</h2>
<p>No spam, no commitment — just a clear price for the coverage you actually need.</p>
<form class="cta-form" id="quoteForm">
<div class="cta-row">
<div class="field">
<label for="qname">Full name</label>
<input id="qname" type="text" placeholder="Jordan Ellis" autocomplete="name" required />
</div>
<div class="field">
<label for="qemail">Email</label>
<input id="qemail" type="email" placeholder="[email protected]" autocomplete="email" required />
</div>
<div class="field">
<label for="qzip">ZIP</label>
<input id="qzip" type="text" inputmode="numeric" maxlength="5" placeholder="78701" required />
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Get my quote</button>
<p class="cta-msg" id="quoteMsg" role="status" aria-live="polite" hidden></p>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer-grid">
<div class="footer-brand">
<span class="brand-name"><span class="brand-mark" aria-hidden="true">✚</span> Brightcare<span class="brand-accent">Health</span></span>
<p>Coverage that feels human. Fictional brand for demo purposes.</p>
</div>
<nav aria-label="Plans"><h4>Plans</h4><a href="#plans">Essential</a><a href="#plans">Plus</a><a href="#plans">Family</a></nav>
<nav aria-label="Company"><h4>Company</h4><a href="#benefits">Benefits</a><a href="#faq">FAQ</a><a href="#quote">Contact</a></nav>
<nav aria-label="Legal"><h4>Legal</h4><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Licenses</a></nav>
</div>
<div class="wrap footer-bottom">
<p>© 2026 Brightcare Health (fictional). Illustrative UI only — not real insurance.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>Health Insurance Landing
A calm, clarity-driven marketing page for a fictional health plan. The hero pairs a confident headline with a compact plan-finder teaser — pick your household size and ZIP, and an estimated monthly range appears instantly. A trust strip surfaces big numbers (network size, claims paid, member rating) so the value lands fast.
Three pricing tiers — Essential, Plus and Family — sit in rounded cards with clear monthly prices and a Monthly / Annual billing toggle that recalculates every price live and shows the annual saving. Below, network and benefit highlights, an open-enrollment countdown banner that ticks down in real time, member testimonials and an accordion FAQ round out the story before the final get-a-quote call to action. Everything is vanilla HTML, CSS and JS — no frameworks.
Illustrative UI only — not real insurance, pricing or coverage.