Pages Medium
Insurance — Find an Agent
An agent finder page with location and specialty filters, rating-sorted agent cards showing initials avatar, languages, distance and specialties, a static map placeholder with numbered pins, and a slide-in contact mini-form that validates and confirms the request.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--blue: #2563eb;
--blue-d: #1d4ed8;
--blue-50: #eef4ff;
--green: #15a06b;
--green-50: #e7f7f0;
--ink: #0f1a2b;
--muted: #5a6b82;
--bg: #f3f7fc;
--white: #ffffff;
--line: #e4ecf6;
--amber: #f59e0b;
--shadow: 0 1px 2px rgba(15, 26, 43, .04), 0 8px 24px rgba(15, 26, 43, .06);
--shadow-lg: 0 18px 48px rgba(15, 26, 43, .18);
--radius: 16px;
--radius-sm: 11px;
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.page { max-width: 1140px; margin: 0 auto; padding: 0 20px 60px; }
/* Masthead */
.masthead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
gap: 16px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.brand__mark {
display: grid; place-items: center;
width: 36px; height: 36px;
background: var(--blue); color: var(--white);
border-radius: 10px;
}
.masthead__nav { display: flex; gap: 22px; font-size: .92rem; font-weight: 500; color: var(--muted); }
.masthead__nav a { transition: color .15s; }
.masthead__nav a:hover { color: var(--ink); }
.masthead__nav a[aria-current="page"] { color: var(--blue); font-weight: 600; }
/* Intro */
.intro { margin: 22px 0 20px; }
.intro h1 { font-size: 1.85rem; letter-spacing: -.03em; line-height: 1.15; }
.intro p { color: var(--muted); margin-top: 8px; max-width: 56ch; }
/* Search bar */
.searchbar {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 12px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 14px;
align-items: end;
margin-bottom: 22px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.field__input {
display: flex; align-items: center; gap: 9px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0 12px;
transition: border-color .15s, box-shadow .15s;
}
.field__input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.field__input svg { color: var(--muted); flex: none; }
.field__input input,
.field__input select {
border: 0; background: transparent; outline: none;
font-family: inherit; font-size: .95rem; color: var(--ink);
width: 100%; padding: 11px 0;
}
.field__input select { cursor: pointer; }
.searchbar__go { padding: 12px 22px; height: 44px; }
/* Buttons */
.btn {
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-weight: 600; font-size: .9rem;
padding: 9px 16px;
transition: background .15s, transform .08s, box-shadow .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-d); }
.btn--ghost { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--blue-50); }
.btn--block { width: 100%; padding: 13px; font-size: .95rem; }
.btn:focus-visible { outline: 3px solid var(--blue-50); outline-offset: 1px; }
/* Layout grid */
.finder__grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
/* Results head */
.results__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; gap: 12px;
}
.results__count { font-weight: 700; font-size: 1.02rem; }
.sort { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.sort select {
font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ink);
border: 1px solid var(--line); background: var(--white);
border-radius: 8px; padding: 6px 8px; cursor: pointer; outline: none;
}
.sort select:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
/* Agent cards */
.agents { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.agent {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
transition: border-color .15s, box-shadow .15s, transform .12s;
}
.agent:hover,
.agent.is-hot { border-color: #c9dcfb; box-shadow: var(--shadow-lg); }
.agent.is-hot { transform: translateY(-1px); }
.avatar {
display: grid; place-items: center;
width: 52px; height: 52px;
border-radius: 14px;
font-weight: 700; font-size: 1.05rem; color: var(--white);
letter-spacing: -.01em; flex: none;
}
.agent__body { min-width: 0; }
.agent__name { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent__verify {
display: inline-flex; align-items: center; gap: 4px;
font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--green); background: var(--green-50);
padding: 2px 7px; border-radius: 999px;
}
.agent__line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; margin-top: 5px; }
.agent__line span { display: inline-flex; align-items: center; gap: 4px; }
.stars { color: var(--amber); font-weight: 700; }
.stars b { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip {
font-size: .76rem; font-weight: 600;
color: var(--blue-d); background: var(--blue-50);
border-radius: 999px; padding: 4px 10px;
}
.agent__actions { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.agent__price { font-size: .72rem; color: var(--muted); text-align: right; margin-bottom: 2px; }
.agent__price b { color: var(--ink); font-size: 1.18rem; font-weight: 800; display: block; letter-spacing: -.02em; }
.results__empty { text-align: center; color: var(--muted); padding: 40px 10px; background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius); }
/* Map */
.mapwrap { position: sticky; top: 16px; }
.map {
position: relative;
height: 420px;
border-radius: var(--radius);
border: 1px solid var(--line);
box-shadow: var(--shadow);
overflow: hidden;
background: linear-gradient(160deg, #e9f1fb, #dfeaf8);
}
.map__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
background-size: 34px 34px;
}
.map__road { position: absolute; background: var(--white); opacity: .85; }
.map__road--h { left: 0; right: 0; top: 46%; height: 14px; }
.map__road--v { top: 0; bottom: 0; left: 38%; width: 12px; }
.map__water {
position: absolute; right: -40px; bottom: -40px;
width: 180px; height: 150px; border-radius: 50%;
background: #cfe2f7;
}
.map__label {
position: absolute; top: 12px; left: 12px;
font-size: .74rem; font-weight: 700; color: var(--muted);
background: rgba(255,255,255,.85); padding: 4px 9px; border-radius: 999px;
}
.pin {
position: absolute;
transform: translate(-50%, -100%);
display: grid; place-items: center;
width: 28px; height: 28px;
background: var(--blue); color: var(--white);
font-size: .8rem; font-weight: 700;
border: 2px solid var(--white);
border-radius: 50% 50% 50% 0;
rotate: -45deg;
box-shadow: 0 4px 10px rgba(15,26,43,.25);
transition: background .15s, scale .15s;
cursor: pointer;
}
.pin span { rotate: 45deg; }
.pin.is-hot { background: var(--green); scale: 1.25; z-index: 3; }
.map__note { font-size: .76rem; color: var(--muted); margin-top: 9px; text-align: center; }
/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim {
position: absolute; inset: 0;
background: rgba(15,26,43,.45);
opacity: 0; transition: opacity .25s;
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 92vw);
background: var(--white);
box-shadow: var(--shadow-lg);
padding: 22px;
overflow-y: auto;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,.0,.2,1);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
position: absolute; top: 14px; right: 16px;
border: 0; background: var(--bg); color: var(--muted);
width: 34px; height: 34px; border-radius: 9px;
font-size: 1.4rem; line-height: 1;
}
.drawer__close:hover { background: var(--blue-50); color: var(--ink); }
.drawer__agent { display: flex; align-items: center; gap: 13px; margin: 6px 0 20px; }
.drawer__agent .avatar { width: 48px; height: 48px; }
.drawer__agent h2 { font-size: 1.2rem; letter-spacing: -.02em; }
.drawer__meta { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.contactform { display: flex; flex-direction: column; gap: 14px; }
.formrow { display: flex; flex-direction: column; gap: 5px; }
.formrow label { font-size: .8rem; font-weight: 600; color: var(--ink); }
.formrow input,
.formrow select,
.formrow textarea {
font-family: inherit; font-size: .92rem; color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 11px 12px; background: var(--bg); outline: none;
transition: border-color .15s, box-shadow .15s;
resize: vertical;
}
.formrow input:focus,
.formrow select:focus,
.formrow textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); background: var(--white); }
.formrow.has-error input,
.formrow.has-error textarea { border-color: #e0566c; box-shadow: 0 0 0 3px rgba(224,86,108,.12); }
.err { font-size: .76rem; color: #d63b54; min-height: 0; }
.formrow.has-error .err { min-height: 1em; }
.contactform__fine { font-size: .78rem; color: var(--muted); text-align: center; }
.drawer__done { text-align: center; padding: 40px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.drawer__check {
display: grid; place-items: center;
width: 64px; height: 64px; border-radius: 50%;
background: var(--green-50); color: var(--green);
}
.drawer__done h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.drawer__done p { color: var(--muted); max-width: 30ch; }
.drawer__done .btn { margin-top: 8px; }
/* Responsive */
@media (max-width: 880px) {
.finder__grid { grid-template-columns: 1fr; }
.mapwrap { position: static; }
.map { height: 260px; }
}
@media (max-width: 520px) {
.masthead__nav { display: none; }
.intro h1 { font-size: 1.45rem; }
.searchbar { grid-template-columns: 1fr; }
.searchbar__go { width: 100%; }
.results__head { flex-direction: column; align-items: flex-start; gap: 8px; }
.agent { grid-template-columns: auto 1fr; }
.agent__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.agent__price { text-align: left; margin: 0; }
.agent__price b { display: inline; font-size: 1rem; }
}(function () {
"use strict";
var AGENTS = [
{ name: "Marisol Vega", specialties: ["auto", "home", "life"], rating: 4.9, reviews: 218, distance: 1.2, langs: ["English", "Spanish"], from: 36, color: "#2563eb", x: 30, y: 32 },
{ name: "David Okafor", specialties: ["health", "life"], rating: 4.8, reviews: 174, distance: 2.4, langs: ["English"], from: 42, color: "#15a06b", x: 64, y: 24 },
{ name: "Priya Nair", specialties: ["home", "business"], rating: 4.9, reviews: 301, distance: 3.1, langs: ["English", "Hindi"], from: 51, color: "#7c3aed", x: 46, y: 58 },
{ name: "Caleb Brooks", specialties: ["auto", "business"], rating: 4.6, reviews: 96, distance: 0.8, langs: ["English"], from: 29, color: "#f59e0b", x: 22, y: 66 },
{ name: "Yuki Tanaka", specialties: ["life", "health", "home"], rating: 4.7, reviews: 142, distance: 4.5, langs: ["English", "Japanese"], from: 39, color: "#0ea5e9", x: 74, y: 62 },
{ name: "Renata Costa", specialties: ["auto", "home", "health"], rating: 4.8, reviews: 188, distance: 5.6, langs: ["English", "Portuguese"], from: 33, color: "#db2777", x: 58, y: 40 }
];
var SPEC_LABEL = { auto: "Auto", home: "Home", life: "Life", health: "Health", business: "Business" };
var listEl = document.getElementById("agentList");
var countEl = document.getElementById("resultCount");
var emptyEl = document.getElementById("emptyState");
var mapEl = document.getElementById("map");
var locInput = document.getElementById("location");
var specSelect = document.getElementById("specialty");
var sortSelect = document.getElementById("sort");
var form = document.getElementById("searchbar");
function initials(name) {
return name.split(" ").map(function (p) { return p[0]; }).join("").slice(0, 2).toUpperCase();
}
function getFiltered() {
var spec = specSelect.value;
var rows = AGENTS.filter(function (a) {
return spec === "all" || a.specialties.indexOf(spec) !== -1;
});
var sort = sortSelect.value;
rows.sort(function (a, b) {
if (sort === "distance") return a.distance - b.distance;
if (sort === "reviews") return b.reviews - a.reviews;
return b.rating - a.rating;
});
return rows;
}
function render() {
var rows = getFiltered();
var loc = locInput.value.trim() || "your area";
countEl.textContent = rows.length + (rows.length === 1 ? " agent" : " agents") + " in " + loc;
emptyEl.hidden = rows.length !== 0;
listEl.innerHTML = rows.map(function (a, i) {
var chips = a.specialties.map(function (s) {
return '<span class="chip">' + SPEC_LABEL[s] + "</span>";
}).join("");
return (
'<li class="agent" data-idx="' + i + '">' +
'<span class="avatar" style="background:' + a.color + '">' + initials(a.name) + "</span>" +
'<div class="agent__body">' +
'<div class="agent__name">' + a.name +
'<span class="agent__verify">' +
'<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>Licensed</span>' +
"</div>" +
'<div class="agent__line">' +
'<span class="stars">★ <b>' + a.rating.toFixed(1) + "</b> (" + a.reviews + ")</span>" +
"<span>📍 " + a.distance.toFixed(1) + " mi</span>" +
"<span>💬 " + a.langs.join(", ") + "</span>" +
"</div>" +
'<div class="chips">' + chips + "</div>" +
"</div>" +
'<div class="agent__actions">' +
'<p class="agent__price">from <b>$' + a.from + "/mo</b></p>" +
'<button type="button" class="btn btn--primary" data-contact="' + i + '">Contact</button>' +
'<button type="button" class="btn btn--ghost" data-call="' + i + '">Call</button>' +
"</div>" +
"</li>"
);
}).join("");
renderPins(rows);
wireCards(rows);
}
function renderPins(rows) {
mapEl.querySelectorAll(".pin").forEach(function (p) { p.remove(); });
rows.forEach(function (a, i) {
var pin = document.createElement("button");
pin.type = "button";
pin.className = "pin";
pin.style.left = a.x + "%";
pin.style.top = a.y + "%";
pin.setAttribute("data-pin", i);
pin.setAttribute("aria-label", "Show " + a.name + " on list");
pin.innerHTML = "<span>" + (i + 1) + "</span>";
mapEl.appendChild(pin);
});
}
function setHot(idx, on) {
var card = listEl.querySelector('.agent[data-idx="' + idx + '"]');
var pin = mapEl.querySelector('.pin[data-pin="' + idx + '"]');
if (card) card.classList.toggle("is-hot", on);
if (pin) pin.classList.toggle("is-hot", on);
}
function wireCards(rows) {
listEl.querySelectorAll(".agent").forEach(function (card) {
var idx = card.getAttribute("data-idx");
card.addEventListener("mouseenter", function () { setHot(idx, true); });
card.addEventListener("mouseleave", function () { setHot(idx, false); });
});
mapEl.querySelectorAll(".pin").forEach(function (pin) {
var idx = pin.getAttribute("data-pin");
pin.addEventListener("mouseenter", function () { setHot(idx, true); });
pin.addEventListener("mouseleave", function () { setHot(idx, false); });
pin.addEventListener("click", function () {
var card = listEl.querySelector('.agent[data-idx="' + idx + '"]');
if (card) card.scrollIntoView({ behavior: "smooth", block: "center" });
});
});
listEl.querySelectorAll("[data-contact]").forEach(function (btn) {
btn.addEventListener("click", function () { openDrawer(rows[+btn.getAttribute("data-contact")]); });
});
listEl.querySelectorAll("[data-call]").forEach(function (btn) {
btn.addEventListener("click", function () {
var a = rows[+btn.getAttribute("data-call")];
btn.textContent = "(512) 555-0" + (100 + Math.floor(Math.random() * 800));
setTimeout(function () { btn.textContent = "Call"; }, 4000);
});
});
}
/* ---- Drawer / contact form ---- */
var drawer = document.getElementById("drawer");
var dAvatar = document.getElementById("drawerAvatar");
var dTitle = document.getElementById("drawerTitle");
var dMeta = document.getElementById("drawerMeta");
var cForm = document.getElementById("contactForm");
var dDone = document.getElementById("drawerDone");
var doneMsg = document.getElementById("doneMsg");
var current = null;
function openDrawer(agent) {
current = agent;
dAvatar.textContent = initials(agent.name);
dAvatar.style.background = agent.color;
dTitle.textContent = "Contact " + agent.name;
dMeta.textContent = agent.specialties.map(function (s) { return SPEC_LABEL[s]; }).join(" · ") + " specialist";
cForm.hidden = false;
dDone.hidden = true;
cForm.reset();
clearErrors();
drawer.classList.add("is-open");
drawer.setAttribute("aria-hidden", "false");
document.getElementById("cName").focus();
}
function closeDrawer() {
drawer.classList.remove("is-open");
drawer.setAttribute("aria-hidden", "true");
}
function clearErrors() {
cForm.querySelectorAll(".formrow").forEach(function (r) { r.classList.remove("has-error"); });
cForm.querySelectorAll(".err").forEach(function (e) { e.textContent = ""; });
}
function setError(field, msg) {
var input = cForm.querySelector('[name="' + field + '"]');
var errEl = cForm.querySelector('[data-err="' + field + '"]');
if (input) input.closest(".formrow").classList.add("has-error");
if (errEl) errEl.textContent = msg;
}
cForm.addEventListener("submit", function (e) {
e.preventDefault();
clearErrors();
var name = cForm.name.value.trim();
var email = cForm.email.value.trim();
var msg = cForm.message.value.trim();
var ok = true;
if (name.length < 2) { setError("name", "Please enter your name."); ok = false; }
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setError("email", "Enter a valid email address."); ok = false; }
if (msg.length < 8) { setError("message", "Add a short note (at least 8 characters)."); ok = false; }
if (!ok) return;
cForm.hidden = true;
dDone.hidden = false;
doneMsg.textContent = (current ? current.name : "Your agent") + " will reach out to " + email + " within 1 business day.";
});
drawer.querySelectorAll("[data-close]").forEach(function (el) {
el.addEventListener("click", closeDrawer);
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && drawer.classList.contains("is-open")) closeDrawer();
});
/* ---- Wiring ---- */
form.addEventListener("submit", function (e) { e.preventDefault(); render(); });
specSelect.addEventListener("change", render);
sortSelect.addEventListener("change", render);
locInput.addEventListener("change", render);
render();
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Find an Agent — SureNest Insurance</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>
<div class="page">
<header class="masthead">
<div class="brand">
<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 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
</svg>
</span>
<span class="brand__name">SureNest</span>
</div>
<nav class="masthead__nav" aria-label="Primary">
<a href="#" aria-current="page">Find an agent</a>
<a href="#">Get a quote</a>
<a href="#">Claims</a>
<a href="#">Help</a>
</nav>
</header>
<main class="finder">
<section class="intro">
<h1>Find a licensed agent near you</h1>
<p>Talk to a real person who knows your area. Compare ratings, languages and specialties — then reach out in one tap.</p>
</section>
<form class="searchbar" id="searchbar" autocomplete="off">
<div class="field">
<label for="location">Location</label>
<div class="field__input">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
<input type="text" id="location" name="location" placeholder="City or ZIP code" value="Austin, TX" />
</div>
</div>
<div class="field">
<label for="specialty">Specialty</label>
<div class="field__input">
<select id="specialty" name="specialty">
<option value="all">All specialties</option>
<option value="auto">Auto</option>
<option value="home">Home</option>
<option value="life">Life</option>
<option value="health">Health</option>
<option value="business">Business</option>
</select>
</div>
</div>
<button type="submit" class="btn btn--primary searchbar__go">Search</button>
</form>
<div class="finder__grid">
<section class="results" aria-label="Matching agents">
<div class="results__head">
<p class="results__count" id="resultCount">6 agents in Austin, TX</p>
<label class="sort">
Sort by
<select id="sort">
<option value="rating">Top rated</option>
<option value="distance">Nearest</option>
<option value="reviews">Most reviewed</option>
</select>
</label>
</div>
<ul class="agents" id="agentList"></ul>
<p class="results__empty" id="emptyState" hidden>
No agents match those filters. Try a wider specialty or a different location.
</p>
</section>
<aside class="mapwrap" aria-label="Map of agents">
<div class="map" id="map">
<div class="map__grid" aria-hidden="true"></div>
<span class="map__road map__road--h" aria-hidden="true"></span>
<span class="map__road map__road--v" aria-hidden="true"></span>
<span class="map__water" aria-hidden="true"></span>
<span class="map__label" aria-hidden="true">Austin, TX</span>
<!-- pins injected by JS -->
</div>
<p class="map__note">Map is illustrative — pins highlight as you browse the list.</p>
</aside>
</div>
</main>
</div>
<!-- Contact drawer -->
<div class="drawer" id="drawer" aria-hidden="true">
<div class="drawer__scrim" data-close></div>
<aside class="drawer__panel" role="dialog" aria-modal="true" aria-labelledby="drawerTitle">
<button class="drawer__close" type="button" data-close aria-label="Close contact form">×</button>
<div class="drawer__agent">
<span class="avatar" id="drawerAvatar">--</span>
<div>
<h2 id="drawerTitle">Contact agent</h2>
<p class="drawer__meta" id="drawerMeta">Licensed insurance agent</p>
</div>
</div>
<form class="contactform" id="contactForm" novalidate>
<div class="formrow">
<label for="cName">Your name</label>
<input type="text" id="cName" name="name" placeholder="Jordan Mills" />
<span class="err" data-err="name"></span>
</div>
<div class="formrow">
<label for="cEmail">Email</label>
<input type="email" id="cEmail" name="email" placeholder="[email protected]" />
<span class="err" data-err="email"></span>
</div>
<div class="formrow">
<label for="cTopic">I'm interested in</label>
<select id="cTopic" name="topic">
<option>Auto insurance</option>
<option>Home insurance</option>
<option>Life insurance</option>
<option>Health insurance</option>
<option>Business insurance</option>
</select>
</div>
<div class="formrow">
<label for="cMsg">Message</label>
<textarea id="cMsg" name="message" rows="3" placeholder="Hi! I'd like a quote for a 2022 sedan and renters coverage."></textarea>
<span class="err" data-err="message"></span>
</div>
<button type="submit" class="btn btn--primary btn--block">Send request</button>
<p class="contactform__fine">Usually replies within 1 business day.</p>
</form>
<div class="drawer__done" id="drawerDone" hidden>
<div class="drawer__check" aria-hidden="true">
<svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<h3>Request sent</h3>
<p id="doneMsg">Your agent will be in touch soon.</p>
<button type="button" class="btn btn--ghost" data-close>Done</button>
</div>
</aside>
</div>
<script src="script.js"></script>
</body>
</html>Find an Agent
A reassuring agent-finder page for an insurance brand. A search bar filters licensed agents by location and specialty (auto, home, life, health, business), with a live result count. Each agent card leads with a colored initials avatar, then name, star rating with review count, distance, spoken languages and specialty chips, plus quick Call and Contact actions.
A static map panel on the right shows numbered pins that highlight on card hover, so the list and the map stay in sync. Clicking Contact opens a slide-in mini-form pre-addressed to that agent; it validates name, email and message before showing a friendly confirmation. Everything runs on vanilla JS — no maps SDK, no dependencies.
Illustrative UI only — not a real insurance directory or agent listing.