Pages Medium
Auto — Used Car Lot Landing
A bold, value-driven used-car-lot landing page in a red, white, and steel palette. Features a hero with a live inventory search, a featured-deals grid with deal badges and certified flags, certified and warranty trust sections, an all-credit financing block with a working payment estimator, an instant trade-in offer tool, a multi-location panel, a strong call to action, and a full footer. Includes a sticky nav, mobile menu, scroll reveal, and toast feedback.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Palette override — Used car lot: Red + white + steel */
--red: #d4262b;
--red-d: #aa1c20;
--red-50: #fff0f0;
--steel: #5b6470;
--steel-l: #8a929d;
--steel-d: #3b4049;
--ink: #16181c;
--ink-2: #3b4049;
--muted: #737a85;
--bg: #f3f4f6;
--surface: #ffffff;
--dark: #16181c;
--dark-2: #1f2127;
--line: rgba(20, 21, 24, 0.1);
--line-2: rgba(20, 21, 24, 0.18);
--ok: #2f9e6f;
--warn: #e0962a;
--danger: #d4493e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 18px;
--sh-sm: 0 1px 2px rgba(20, 21, 24, 0.06), 0 1px 3px rgba(20, 21, 24, 0.08);
--sh-md: 0 4px 14px rgba(20, 21, 24, 0.1);
--sh-lg: 0 18px 50px rgba(20, 21, 24, 0.16);
--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.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.hl { color: var(--red); }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { width: min(1180px, 92%); margin-inline: auto; }
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: inherit; font-weight: 700; font-size: 0.95rem;
padding: 12px 20px; border: 0; border-radius: var(--r-sm);
cursor: pointer; transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #fff; box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--red-d); box-shadow: var(--sh-md); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); box-shadow: var(--sh-sm); }
.btn--light:hover { box-shadow: var(--sh-md); }
.btn--block { width: 100%; }
.link-arrow { color: var(--red); font-weight: 700; font-size: 0.92rem; }
.link-arrow:hover { text-decoration: underline; }
.link-btn { background: none; border: 0; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
/* ---------- badges / chips ---------- */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px;
}
.badge--light { background: var(--red-50); color: var(--red-d); }
.badge--accent { background: var(--red); color: #fff; }
.eyebrow {
display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.eyebrow--light { color: #ff7b7e; }
/* ---------- topbar ---------- */
.topbar { background: var(--ink); color: #d6dae0; font-size: 0.82rem; }
.topbar__row { display: flex; gap: 22px; align-items: center; padding: 8px 0; flex-wrap: wrap; }
.topbar__item a { color: #fff; font-weight: 600; }
.topbar__hours { margin-left: auto; color: #8fe3b0; font-weight: 600; }
/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow 0.2s; }
.nav.is-scrolled { box-shadow: var(--sh-md); }
.nav__row { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.brand__mark {
width: 38px; height: 38px; display: grid; place-items: center;
background: var(--red); color: #fff; border-radius: 9px; font-size: 1.2rem; font-weight: 800;
box-shadow: var(--sh-sm); transform: skewX(-6deg);
}
.brand__name { font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1; }
.brand__sub { display: block; font-size: 0.66rem; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub { color: var(--steel-l); }
.nav__links { display: flex; gap: 4px; margin-left: 8px; }
.nav__links a { padding: 8px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: 0.94rem; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
.nav__links a:hover { background: var(--red-50); color: var(--red-d); }
.nav__cta { display: flex; gap: 10px; margin-left: auto; }
.nav__burger { display: none; margin-left: auto; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__burger span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile { display: flex; flex-direction: column; gap: 4px; padding: 12px 4% 18px; border-top: 1px solid var(--line); }
.mobile a { padding: 12px 10px; border-radius: var(--r-sm); font-weight: 600; }
.mobile a:hover { background: var(--red-50); }
.mobile__cta { margin-top: 6px; }
/* ---------- hero ---------- */
.hero { padding: 54px 0 40px; background:
radial-gradient(1200px 420px at 78% -8%, rgba(212, 38, 43, 0.08), transparent 60%),
linear-gradient(180deg, #fff, var(--bg)); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.hero__title { font-size: clamp(2.3rem, 5vw, 3.7rem); font-weight: 800; margin: 16px 0 14px; }
.hero__lead { font-size: 1.1rem; color: var(--ink-2); max-width: 46ch; }
.search {
display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px;
background: var(--surface); padding: 16px; border-radius: var(--r-lg);
box-shadow: var(--sh-lg); margin: 26px 0 18px; border: 1px solid var(--line);
}
.search__field { display: flex; flex-direction: column; gap: 5px; }
.search__field label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.search select {
font: inherit; font-weight: 600; padding: 11px 12px; border: 1.5px solid var(--line-2);
border-radius: var(--r-sm); background: #fff; cursor: pointer; color: var(--ink);
appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23737a85' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.search select:focus { border-color: var(--red); }
.search__btn { align-self: end; height: 44px; }
.search__count { background: rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { font: inherit; font-weight: 600; font-size: 0.86rem; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer; transition: all 0.15s; }
.chip:hover { border-color: var(--red); color: var(--red-d); background: var(--red-50); }
/* hero panel */
.hero__panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; border: 1px solid var(--line); }
.hero__panel-body { padding: 18px 20px 20px; }
.hero__panel-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.hero__panel-top h3 { font-size: 1.12rem; }
.price-block { text-align: right; }
.price-old { display: block; font-size: 0.8rem; color: var(--muted); text-decoration: line-through; }
.price { font-size: 1.35rem; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.spec-row { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.spec-row li { background: var(--bg); border-radius: var(--r-sm); padding: 7px 11px; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.spec-row b { color: var(--muted); font-weight: 700; font-size: 0.72rem; }
.photo { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.photo__icon { font-size: 3.2rem; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)); }
.photo--hero { aspect-ratio: 16 / 8; }
.photo[data-tone="red"] { background: linear-gradient(135deg, #d4262b, #7a1417); }
.photo[data-tone="steel"] { background: linear-gradient(135deg, #6b7480, #3b4049); }
.photo[data-tone="dark"] { background: linear-gradient(135deg, #2a2d34, #141518); }
.photo[data-tone="ember"] { background: linear-gradient(135deg, #e2540a, #8a2a05); }
.photo[data-tone="slate"] { background: linear-gradient(135deg, #4a5560, #232830); }
.photo__deal {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: #fff; color: var(--red-d); font-weight: 800; font-size: 0.82rem;
padding: 5px 12px; border-radius: var(--r-sm); box-shadow: var(--sh-md);
transform: rotate(-3deg);
}
/* trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
.trust-strip__item { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; font-weight: 600; font-size: 0.92rem; box-shadow: var(--sh-sm); }
.trust-strip__item span { font-size: 1.25rem; }
/* ---------- sections ---------- */
.section { padding: 64px 0; }
.section--dark { background: var(--ink); color: #e9ecf0; }
.section--accent { background: linear-gradient(180deg, var(--red-50), #fff); }
.section--muted { background: var(--surface); }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 30px; flex-wrap: wrap; }
.section__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
.section__title--light { color: #fff; }
/* ---------- grid of cars ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.card__title { font-size: 1.06rem; }
.card__meta { font-size: 0.85rem; color: var(--muted); }
.card__price { font-size: 1.3rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__price small { display: block; text-align: right; font-size: 0.72rem; font-weight: 600; color: var(--red); text-decoration: line-through; }
.card__specs { display: flex; gap: 6px; flex-wrap: wrap; }
.card__specs span { background: var(--bg); border-radius: 6px; padding: 4px 9px; font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.card__mo { font-size: 0.84rem; color: var(--ink-2); }
.card__mo b { color: var(--ink); font-variant-numeric: tabular-nums; }
.card__cert { font-size: 0.72rem; font-weight: 700; color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
.grid__empty { text-align: center; padding: 40px; color: var(--muted); font-size: 1.05rem; }
/* ---------- trust (dark) section ---------- */
.trust__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.trust__lead { color: var(--steel-l); font-size: 1.06rem; max-width: 44ch; margin: 14px 0 24px; }
.trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trust-card { background: var(--dark-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-md); padding: 20px; transition: border-color 0.2s, transform 0.2s; }
.trust-card:hover { border-color: var(--red); transform: translateY(-3px); }
.trust-card__ico { display: inline-grid; place-items: center; width: 40px; height: 40px; background: rgba(212, 38, 43, 0.16); color: #ff7b7e; border-radius: 10px; font-size: 1.2rem; font-weight: 800; margin-bottom: 12px; }
.trust-card h3 { font-size: 1rem; color: #fff; margin-bottom: 6px; }
.trust-card p { font-size: 0.88rem; color: var(--steel-l); }
/* ---------- financing ---------- */
.fin__grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: center; }
.fin__lead { font-size: 1.08rem; color: var(--ink-2); margin: 14px 0 18px; max-width: 44ch; }
.fin__list { display: flex; flex-direction: column; gap: 10px; }
.fin__list li { font-weight: 600; color: var(--ink-2); }
.calc { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid var(--line); padding: 24px; }
.calc__title { font-size: 1.15rem; margin-bottom: 16px; }
.calc__field { margin-bottom: 16px; }
.calc__field label { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.calc__field output { font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line-2); outline-offset: 4px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: var(--sh-md); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: var(--sh-md); cursor: pointer; }
.calc__result { display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: #fff; padding: 16px 18px; border-radius: var(--r-md); margin: 6px 0 10px; }
.calc__result strong { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.calc__result small { font-size: 0.9rem; font-weight: 600; color: var(--steel-l); }
.calc__note { font-size: 0.78rem; color: var(--muted); margin: 8px 0 16px; }
/* ---------- trade-in ---------- */
.trade { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: start; }
.trade__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-md); }
.trade__card .section__title { margin: 10px 0 8px; }
.trade__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: 18px; align-items: end; }
.trade__field { display: flex; flex-direction: column; gap: 6px; }
.trade__field label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.trade__field input { font: inherit; padding: 11px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.trade__field input:focus { border-color: var(--red); }
.trade__btn { height: 44px; }
.trade__offer { margin-top: 22px; background: var(--red-50); border: 1px dashed var(--red); border-radius: var(--r-md); padding: 18px; text-align: center; animation: pop 0.35s ease; }
.trade__offer span { font-size: 0.84rem; font-weight: 600; color: var(--red-d); }
.trade__offer strong { display: block; font-size: 2.2rem; font-weight: 800; color: var(--red-d); font-variant-numeric: tabular-nums; margin: 4px 0; }
.trade__offer p { font-size: 0.82rem; }
.trade__steps { padding-top: 8px; }
.trade__steps h3 { font-size: 1.2rem; margin-bottom: 18px; }
.steps { display: flex; flex-direction: column; gap: 16px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps__n { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 50%; font-weight: 800; }
.steps b { display: block; }
.steps p { color: var(--muted); font-size: 0.9rem; }
/* ---------- locations ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.loc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform 0.2s, box-shadow 0.2s; }
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.loc-card__map { aspect-ratio: 16 / 7; display: grid; place-items: center; font-size: 2rem; }
.loc-card__map[data-tone="steel"] { background: linear-gradient(135deg, #6b7480, #3b4049); }
.loc-card__map[data-tone="red"] { background: linear-gradient(135deg, #d4262b, #7a1417); }
.loc-card__map[data-tone="dark"] { background: linear-gradient(135deg, #2a2d34, #141518); }
.loc-card__body { padding: 16px 18px 18px; }
.loc-card__body h3 { font-size: 1.08rem; }
.loc-status { display: inline-block; font-size: 0.8rem; font-weight: 700; margin: 8px 0; }
.loc-status--open { color: var(--ok); }
.loc-status--closed { color: var(--muted); }
.loc-card__row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; font-size: 0.9rem; }
.loc-card__row a { color: var(--red); font-weight: 700; }
/* ---------- CTA band ---------- */
.cta-band { background: var(--red); color: #fff; padding: 48px 0; }
.cta-band__row { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin-top: 8px; }
.cta-band__btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* ---------- footer ---------- */
.footer { background: var(--ink); color: #c2c8d0; padding: 56px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.footer__brand p { margin-top: 14px; font-size: 0.92rem; max-width: 38ch; color: var(--steel-l); }
.footer__col h4 { color: #fff; font-size: 0.92rem; margin-bottom: 14px; }
.footer__col a { display: block; padding: 5px 0; font-size: 0.9rem; color: var(--steel-l); transition: color 0.15s; }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 40px; padding-top: 20px; font-size: 0.84rem; color: var(--steel-l); flex-wrap: wrap; }
.footer__legal { display: flex; gap: 18px; }
.footer__legal a:hover { color: #fff; }
/* ---------- toast ---------- */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--ink); color: #fff; padding: 13px 20px; border-radius: var(--r-md);
box-shadow: var(--sh-lg); font-weight: 600; font-size: 0.92rem; z-index: 300;
opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
max-width: 90%; text-align: center;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* ---------- responsive ---------- */
@media (max-width: 960px) {
.hero__grid, .trust__grid, .fin__grid, .trade { grid-template-columns: 1fr; gap: 30px; }
.grid, .loc-grid { grid-template-columns: repeat(2, 1fr); }
.trust-strip { grid-template-columns: repeat(2, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
.nav__links, .nav__cta { display: none; }
.nav__burger { display: flex; }
}
@media (max-width: 520px) {
.topbar__hours { display: none; }
.search { grid-template-columns: 1fr 1fr; }
.search__btn { grid-column: 1 / -1; }
.grid, .loc-grid, .trust-cards { grid-template-columns: 1fr; }
.trust-strip { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; }
.trade__form { grid-template-columns: 1fr; }
.cta-band__row { flex-direction: column; align-items: flex-start; }
.section { padding: 48px 0; }
.hero { padding: 32px 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.reveal { opacity: 1 !important; transform: none !important; transition: none; }
.card:hover, .loc-card:hover, .trust-card:hover { transform: none; }
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2600);
}
var money = function (n) {
return "$" + Math.round(n).toLocaleString("en-US");
};
/* ---------- inventory data ---------- */
var INVENTORY = [
{ year: 2021, make: "Toyota", model: "RAV4 XLE", body: "SUV", price: 24990, old: 26990, miles: 34210, mpg: "27/34", deal: "$2,000 OFF", cert: true, tone: "red" },
{ year: 2019, make: "Honda", model: "Civic EX", body: "Sedan", price: 17490, old: 18990, miles: 41880, mpg: "32/42", deal: "Hot deal", cert: true, tone: "steel" },
{ year: 2020, make: "Ford", model: "F-150 XLT", body: "Truck", price: 32990, old: 34500, miles: 52100, mpg: "20/24", deal: "$1,500 OFF", cert: true, tone: "dark" },
{ year: 2018, make: "Chevrolet", model: "Equinox LT", body: "SUV", price: 14990, old: 16490, miles: 68340, mpg: "26/32", deal: "Under $15k", cert: false, tone: "ember" },
{ year: 2022, make: "Hyundai", model: "Elantra SEL", body: "Sedan", price: 19990, old: null, miles: 21450, mpg: "33/43", deal: "Low miles", cert: true, tone: "slate" },
{ year: 2017, make: "Jeep", model: "Wrangler Sport", body: "SUV", price: 23490, old: 25000, miles: 74900, mpg: "17/23", deal: "$1,510 OFF", cert: false, tone: "dark" },
{ year: 2019, make: "Toyota", model: "Corolla LE", body: "Sedan", price: 16490, old: null, miles: 38020, mpg: "30/38", deal: "Certified", cert: true, tone: "red" },
{ year: 2020, make: "Ford", model: "Escape SE", body: "SUV", price: 21990, old: 23490, miles: 44760, mpg: "28/34", deal: "$1,500 OFF", cert: true, tone: "ember" },
{ year: 2016, make: "Honda", model: "Fit LX", body: "Hatchback", price: 12490, old: 13990, miles: 81200, mpg: "33/40", deal: "Under $15k", cert: false, tone: "steel" }
];
var grid = document.getElementById("grid");
var gridEmpty = document.getElementById("gridEmpty");
function payPerMo(price) {
// rough 60mo @ 7.9% with ~$2k down
var p = Math.max(0, price - 2000);
var r = 0.079 / 12;
var n = 60;
return (p * r) / (1 - Math.pow(1 + r, -n));
}
function carCard(c) {
var el = document.createElement("article");
el.className = "card reveal";
el.dataset.make = c.make;
el.dataset.body = c.body;
el.dataset.price = c.price;
var oldPrice = c.old ? "<small>" + money(c.old) + "</small>" : "";
var certBadge = c.cert
? '<span class="card__cert">✓ Certified</span>'
: '<span class="card__cert" style="color:var(--muted)">As-is</span>';
el.innerHTML =
'<div class="photo" data-tone="' + c.tone + '">' +
'<span class="photo__deal">' + c.deal + '</span>' +
'<span class="photo__icon" aria-hidden="true">🚗</span>' +
'</div>' +
'<div class="card__body">' +
'<div class="card__top">' +
'<div>' +
'<h3 class="card__title">' + c.year + " " + c.make + " " + c.model + '</h3>' +
'<p class="card__meta">' + c.body + " · " + c.miles.toLocaleString("en-US") + ' mi</p>' +
'</div>' +
'<div class="card__price">' + money(c.price) + oldPrice + '</div>' +
'</div>' +
'<div class="card__specs">' +
'<span>' + c.mpg + ' MPG</span>' +
'<span>' + c.miles.toLocaleString("en-US") + ' mi</span>' +
'<span>' + c.body + '</span>' +
'</div>' +
'<div class="card__foot">' +
'<span class="card__mo">Est. <b>' + money(payPerMo(c.price)) + '/mo</b></span>' +
certBadge +
'</div>' +
'<button class="btn btn--dark btn--block view-btn">View details</button>' +
'</div>';
el.querySelector(".view-btn").addEventListener("click", function () {
toast("Reserved a test drive for the " + c.year + " " + c.make + " " + c.model + " 🚘");
});
return el;
}
var currentFilter = { make: "", body: "", budget: "" };
function render() {
if (!grid) return;
grid.innerHTML = "";
var matches = INVENTORY.filter(function (c) {
if (currentFilter.make && c.make !== currentFilter.make) return false;
if (currentFilter.body && c.body !== currentFilter.body) return false;
if (currentFilter.budget && c.price > Number(currentFilter.budget)) return false;
return true;
});
matches.forEach(function (c) { grid.appendChild(carCard(c)); });
if (gridEmpty) gridEmpty.hidden = matches.length !== 0;
// observe the freshly-added reveal cards
grid.querySelectorAll(".reveal").forEach(function (n) {
n.classList.add("is-in");
});
// update hero search count
var countEl = document.getElementById("resultCount");
if (countEl) {
var total = matches.length === INVENTORY.length ? 412 : matches.length;
countEl.textContent = total;
}
return matches.length;
}
/* ---------- search form ---------- */
var searchForm = document.getElementById("searchForm");
if (searchForm) {
searchForm.addEventListener("submit", function (e) {
e.preventDefault();
currentFilter.make = document.getElementById("make").value;
currentFilter.budget = document.getElementById("budget").value;
currentFilter.body = document.getElementById("body").value;
var n = render();
document.getElementById("deals").scrollIntoView({ behavior: "smooth" });
toast(n ? "Showing " + n + " matching vehicle" + (n === 1 ? "" : "s") : "No matches — try widening your search");
});
}
/* ---------- quick chips ---------- */
document.querySelectorAll(".chip").forEach(function (chip) {
chip.addEventListener("click", function () {
currentFilter.make = chip.dataset.make || "";
currentFilter.budget = chip.dataset.budget || "";
currentFilter.body = chip.dataset.body || "";
// sync selects
var m = document.getElementById("make"), b = document.getElementById("budget"), bo = document.getElementById("body");
if (m) m.value = currentFilter.make;
if (b) b.value = currentFilter.budget;
if (bo) bo.value = currentFilter.body;
render();
document.getElementById("deals").scrollIntoView({ behavior: "smooth" });
});
});
/* ---------- clear filters ---------- */
var clearBtn = document.getElementById("clearFilters");
if (clearBtn) {
clearBtn.addEventListener("click", function () {
currentFilter = { make: "", body: "", budget: "" };
["make", "budget", "body"].forEach(function (id) {
var s = document.getElementById(id);
if (s) s.value = "";
});
render();
toast("Filters cleared — showing all inventory");
});
}
render();
/* ---------- payment calculator ---------- */
var vprice = document.getElementById("vprice");
var down = document.getElementById("down");
var term = document.getElementById("term");
function calc() {
if (!vprice || !down || !term) return;
var price = Number(vprice.value);
var dp = Math.min(Number(down.value), price);
var months = Number(term.value);
var principal = Math.max(0, price - dp);
var r = 0.079 / 12;
var pmt = principal === 0 ? 0 : (principal * r) / (1 - Math.pow(1 + r, -months));
document.getElementById("vpriceOut").textContent = money(price);
document.getElementById("downOut").textContent = money(dp);
document.getElementById("termOut").textContent = months + " months";
document.getElementById("payment").innerHTML = money(pmt) + "<small>/mo</small>";
}
[vprice, down, term].forEach(function (el) {
if (el) el.addEventListener("input", calc);
});
calc();
var prequalBtn = document.getElementById("prequalBtn");
if (prequalBtn) {
prequalBtn.addEventListener("click", function () {
toast("Pre-qualification started — no impact to your credit ✓");
});
}
/* ---------- trade-in estimator ---------- */
var tradeForm = document.getElementById("tradeForm");
if (tradeForm) {
tradeForm.addEventListener("submit", function (e) {
e.preventDefault();
var plate = (document.getElementById("tplate").value || "").trim();
var milesRaw = (document.getElementById("tmiles").value || "").replace(/[^0-9]/g, "");
if (!plate) { toast("Enter your plate to get an offer"); return; }
var miles = Number(milesRaw) || 60000;
// deterministic-ish estimate from plate + miles
var seed = 0;
for (var i = 0; i < plate.length; i++) seed += plate.charCodeAt(i);
var base = 9000 + (seed % 11) * 850;
var depreciation = Math.min(base * 0.7, miles * 0.06);
var value = Math.max(900, Math.round((base - depreciation) / 50) * 50);
var offer = document.getElementById("tradeOffer");
document.getElementById("tradeValue").textContent = money(value);
offer.hidden = false;
offer.style.animation = "none";
void offer.offsetWidth;
offer.style.animation = "";
toast("Instant offer ready: " + money(value));
});
}
/* ---------- mobile menu ---------- */
var burger = document.getElementById("burger");
var mobileMenu = document.getElementById("mobileMenu");
function closeMenu() {
if (!mobileMenu) return;
mobileMenu.hidden = true;
burger.setAttribute("aria-expanded", "false");
}
if (burger && mobileMenu) {
burger.addEventListener("click", function () {
var open = burger.getAttribute("aria-expanded") === "true";
burger.setAttribute("aria-expanded", String(!open));
mobileMenu.hidden = open;
});
mobileMenu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", closeMenu);
});
}
/* ---------- sticky nav shadow ---------- */
var nav = document.getElementById("nav");
window.addEventListener("scroll", function () {
if (nav) nav.classList.toggle("is-scrolled", window.scrollY > 12);
}, { passive: true });
/* ---------- scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
en.target.classList.add("is-in");
io.unobserve(en.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
reveals.forEach(function (r) { io.observe(r); });
} else {
reveals.forEach(function (r) { r.classList.add("is-in"); });
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Redline Auto Sales — Quality Used Cars</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>
<a class="skip-link" href="#inventory">Skip to inventory</a>
<!-- ============ TOP BAR ============ -->
<div class="topbar">
<div class="wrap topbar__row">
<span class="topbar__item">📍 4820 Industrial Pkwy, Millbrook</span>
<span class="topbar__item">☎ <a href="tel:+15550199">(555) 019-9CAR</a></span>
<span class="topbar__item topbar__hours">Open today · 9AM – 8PM</span>
</div>
</div>
<!-- ============ NAV ============ -->
<header class="nav" id="nav">
<div class="wrap nav__row">
<a class="brand" href="#top" aria-label="Redline Auto Sales home">
<span class="brand__mark" aria-hidden="true">R</span>
<span class="brand__name">Redline<span class="brand__sub">Auto Sales</span></span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#inventory">Inventory</a>
<a href="#deals">Deals</a>
<a href="#financing">Financing</a>
<a href="#tradein">Trade-In</a>
<a href="#locations">Locations</a>
</nav>
<div class="nav__cta">
<a class="btn btn--ghost" href="tel:+15550199">Call</a>
<a class="btn btn--primary" href="#financing">Get Pre-Qualified</a>
</div>
<button class="nav__burger" id="burger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileMenu">
<span></span><span></span><span></span>
</button>
</div>
<!-- Mobile menu -->
<div class="mobile" id="mobileMenu" hidden>
<a href="#inventory">Inventory</a>
<a href="#deals">Deals</a>
<a href="#financing">Financing</a>
<a href="#tradein">Trade-In</a>
<a href="#locations">Locations</a>
<a class="btn btn--primary mobile__cta" href="#financing">Get Pre-Qualified</a>
</div>
</header>
<main id="top">
<!-- ============ HERO ============ -->
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy reveal">
<span class="badge badge--light">⭐ 4.8 / 5 · 2,300+ happy drivers</span>
<h1 class="hero__title">Quality used cars,<br /><span class="hl">honest prices.</span></h1>
<p class="hero__lead">
Over 400 hand-picked vehicles, every one inspected on a 172-point checklist.
No haggling, no surprises — just a great car at a price that makes sense.
</p>
<form class="search" id="searchForm" aria-label="Search inventory">
<div class="search__field">
<label for="make">Make</label>
<select id="make" name="make">
<option value="">Any make</option>
<option>Toyota</option>
<option>Honda</option>
<option>Ford</option>
<option>Chevrolet</option>
<option>Hyundai</option>
<option>Jeep</option>
</select>
</div>
<div class="search__field">
<label for="budget">Max budget</label>
<select id="budget" name="budget">
<option value="">Any price</option>
<option value="15000">Under $15,000</option>
<option value="20000">Under $20,000</option>
<option value="25000">Under $25,000</option>
<option value="35000">Under $35,000</option>
</select>
</div>
<div class="search__field">
<label for="body">Body type</label>
<select id="body" name="body">
<option value="">Any type</option>
<option>Sedan</option>
<option>SUV</option>
<option>Truck</option>
<option>Hatchback</option>
</select>
</div>
<button class="btn btn--primary search__btn" type="submit">
<span aria-hidden="true">🔍</span> Search <span id="resultCount" class="search__count">412</span>
</button>
</form>
<ul class="hero__chips" aria-label="Quick filters">
<li><button class="chip" data-make="" data-budget="15000" data-body="">💰 Under $15k</button></li>
<li><button class="chip" data-make="" data-budget="" data-body="SUV">🚙 SUVs</button></li>
<li><button class="chip" data-make="" data-budget="" data-body="Truck">🛻 Trucks</button></li>
<li><button class="chip" data-make="Toyota" data-budget="" data-body="">Toyota</button></li>
</ul>
</div>
<aside class="hero__panel reveal" aria-label="Featured vehicle">
<div class="photo photo--hero" data-tone="red">
<span class="photo__deal">$2,000 OFF</span>
<span class="photo__icon" aria-hidden="true">🚗</span>
</div>
<div class="hero__panel-body">
<div class="hero__panel-top">
<div>
<h3>2021 Toyota RAV4 XLE</h3>
<p class="muted">34,210 mi · AWD · Certified</p>
</div>
<div class="price-block">
<span class="price-old">$26,990</span>
<span class="price">$24,990</span>
</div>
</div>
<ul class="spec-row">
<li><b>Est.</b> $389/mo</li>
<li><b>MPG</b> 27/34</li>
<li><b>VIN</b> …8R2941</li>
</ul>
<a class="btn btn--dark btn--block" href="#financing">See payment options</a>
</div>
</aside>
</div>
<!-- trust strip -->
<div class="wrap trust-strip reveal">
<div class="trust-strip__item"><span aria-hidden="true">🛡️</span> 7-Day Money-Back</div>
<div class="trust-strip__item"><span aria-hidden="true">🔧</span> 172-Point Inspection</div>
<div class="trust-strip__item"><span aria-hidden="true">📄</span> Free Vehicle History</div>
<div class="trust-strip__item"><span aria-hidden="true">💳</span> All Credit Approved</div>
</div>
</section>
<!-- ============ FEATURED DEALS ============ -->
<section class="section" id="deals">
<div class="wrap">
<header class="section__head reveal">
<div>
<span class="eyebrow">This week's deals</span>
<h2 class="section__title">Featured inventory</h2>
</div>
<a class="link-arrow" href="#inventory">View all 412 vehicles →</a>
</header>
<div class="grid" id="grid" aria-label="Featured vehicles"></div>
<p class="grid__empty" id="gridEmpty" hidden>No vehicles match those filters. <button class="link-btn" id="clearFilters">Clear filters</button></p>
</div>
</section>
<!-- ============ TRUST / CERTIFIED ============ -->
<section class="section section--dark" id="inventory">
<div class="wrap trust__grid">
<div class="reveal">
<span class="eyebrow eyebrow--light">Certified peace of mind</span>
<h2 class="section__title section__title--light">Every Redline Certified car comes backed.</h2>
<p class="trust__lead">
We don't just sell cars — we stand behind them. Our certified vehicles
pass a rigorous inspection and come with real warranty coverage so you
can drive off with confidence.
</p>
<a class="btn btn--primary" href="#tradein">Start your trade-in</a>
</div>
<ul class="trust-cards reveal">
<li class="trust-card">
<span class="trust-card__ico" aria-hidden="true">✓</span>
<h3>172-Point Inspection</h3>
<p>Brakes, tires, electronics and frame checked by ASE techs.</p>
</li>
<li class="trust-card">
<span class="trust-card__ico" aria-hidden="true">📋</span>
<h3>3-Month / 3,000-mi Warranty</h3>
<p>Powertrain coverage included on every certified vehicle.</p>
</li>
<li class="trust-card">
<span class="trust-card__ico" aria-hidden="true">↩</span>
<h3>7-Day Money-Back</h3>
<p>Not the right fit? Bring it back within a week, no hassle.</p>
</li>
<li class="trust-card">
<span class="trust-card__ico" aria-hidden="true">🔎</span>
<h3>Free History Report</h3>
<p>Full accident & ownership records on every listing.</p>
</li>
</ul>
</div>
</section>
<!-- ============ FINANCING ============ -->
<section class="section section--accent" id="financing">
<div class="wrap fin__grid">
<div class="reveal">
<span class="eyebrow">Financing for all credit</span>
<h2 class="section__title">Good credit. Bad credit. <span class="hl">No problem.</span></h2>
<p class="fin__lead">
We work with 20+ lenders to find a payment that fits your life.
Get pre-qualified in two minutes — it won't affect your credit score.
</p>
<ul class="fin__list">
<li>✓ Pre-qualify with a soft credit check</li>
<li>✓ First-time buyer & rebuilder programs</li>
<li>✓ Down payments starting at $0</li>
</ul>
</div>
<div class="calc reveal" aria-label="Payment estimator">
<h3 class="calc__title">Estimate your payment</h3>
<div class="calc__field">
<label for="vprice">Vehicle price <output id="vpriceOut">$22,000</output></label>
<input type="range" id="vprice" min="6000" max="45000" step="500" value="22000" />
</div>
<div class="calc__field">
<label for="down">Down payment <output id="downOut">$2,000</output></label>
<input type="range" id="down" min="0" max="10000" step="250" value="2000" />
</div>
<div class="calc__field">
<label for="term">Term <output id="termOut">60 months</output></label>
<input type="range" id="term" min="24" max="72" step="12" value="60" />
</div>
<div class="calc__result">
<span>Est. monthly payment</span>
<strong id="payment">$389<small>/mo</small></strong>
</div>
<p class="calc__note">At 7.9% APR. Estimate only — final terms vary by lender.</p>
<button class="btn btn--primary btn--block" id="prequalBtn">Get pre-qualified</button>
</div>
</div>
</section>
<!-- ============ TRADE-IN ============ -->
<section class="section" id="tradein">
<div class="wrap trade">
<div class="trade__card reveal">
<span class="badge badge--accent">Instant offer</span>
<h2 class="section__title">What's your car worth?</h2>
<p class="muted">Get a real cash offer in minutes — apply it toward your next car or just take the check.</p>
<form class="trade__form" id="tradeForm">
<div class="trade__field">
<label for="tplate">License plate</label>
<input id="tplate" name="tplate" placeholder="e.g. 8KZ-4471" autocomplete="off" />
</div>
<div class="trade__field">
<label for="tmiles">Odometer</label>
<input id="tmiles" name="tmiles" inputmode="numeric" placeholder="e.g. 58,000" autocomplete="off" />
</div>
<button class="btn btn--dark trade__btn" type="submit">Get my offer</button>
</form>
<div class="trade__offer" id="tradeOffer" hidden>
<span>Estimated trade-in value</span>
<strong id="tradeValue">$0</strong>
<p class="muted">Final offer confirmed after a quick in-person look.</p>
</div>
</div>
<div class="trade__steps reveal">
<h3>Three easy steps</h3>
<ol class="steps">
<li><span class="steps__n">1</span><div><b>Tell us about your car</b><p>Plate or VIN and current mileage.</p></div></li>
<li><span class="steps__n">2</span><div><b>Get an instant offer</b><p>Backed by live market data.</p></div></li>
<li><span class="steps__n">3</span><div><b>Get paid or trade up</b><p>Cash check or credit toward your purchase.</p></div></li>
</ol>
</div>
</div>
</section>
<!-- ============ LOCATIONS ============ -->
<section class="section section--muted" id="locations">
<div class="wrap">
<header class="section__head reveal">
<div>
<span class="eyebrow">Come kick the tires</span>
<h2 class="section__title">Visit a Redline lot</h2>
</div>
</header>
<div class="loc-grid reveal">
<article class="loc-card">
<div class="loc-card__map" data-tone="steel" aria-hidden="true"><span>🗺️</span></div>
<div class="loc-card__body">
<h3>Millbrook (Main)</h3>
<p class="muted">4820 Industrial Pkwy · Millbrook</p>
<span class="loc-status loc-status--open">● Open now · til 8PM</span>
<div class="loc-card__row"><span>412 cars in stock</span><a href="tel:+15550199">Call →</a></div>
</div>
</article>
<article class="loc-card">
<div class="loc-card__map" data-tone="red" aria-hidden="true"><span>🗺️</span></div>
<div class="loc-card__body">
<h3>Eastgate</h3>
<p class="muted">1190 Commerce Dr · Eastgate</p>
<span class="loc-status loc-status--open">● Open now · til 7PM</span>
<div class="loc-card__row"><span>188 cars in stock</span><a href="tel:+15550288">Call →</a></div>
</div>
</article>
<article class="loc-card">
<div class="loc-card__map" data-tone="dark" aria-hidden="true"><span>🗺️</span></div>
<div class="loc-card__body">
<h3>Riverside</h3>
<p class="muted">77 Foundry Ave · Riverside</p>
<span class="loc-status loc-status--closed">● Closed · opens 9AM</span>
<div class="loc-card__row"><span>251 cars in stock</span><a href="tel:+15550377">Call →</a></div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta-band reveal">
<div class="wrap cta-band__row">
<div>
<h2>Ready to find your next ride?</h2>
<p>Browse 412 inspected vehicles or get pre-qualified in under two minutes.</p>
</div>
<div class="cta-band__btns">
<a class="btn btn--light" href="#deals">Browse inventory</a>
<a class="btn btn--dark" href="#financing">Get pre-qualified</a>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="footer">
<div class="wrap footer__grid">
<div class="footer__brand">
<a class="brand brand--light" href="#top">
<span class="brand__mark" aria-hidden="true">R</span>
<span class="brand__name">Redline<span class="brand__sub">Auto Sales</span></span>
</a>
<p>Family-owned since 1998. Quality used cars and honest financing for the whole community.</p>
</div>
<div class="footer__col">
<h4>Shop</h4>
<a href="#inventory">All inventory</a>
<a href="#deals">This week's deals</a>
<a href="#tradein">Trade-in value</a>
</div>
<div class="footer__col">
<h4>Buy</h4>
<a href="#financing">Financing</a>
<a href="#financing">Get pre-qualified</a>
<a href="#locations">Locations</a>
</div>
<div class="footer__col">
<h4>Contact</h4>
<a href="tel:+15550199">(555) 019-9CAR</a>
<a href="#locations">4820 Industrial Pkwy</a>
<a href="#top">[email protected]</a>
</div>
</div>
<div class="wrap footer__bottom">
<span>© 2026 Redline Auto Sales · Fictional dealership</span>
<div class="footer__legal"><a href="#top">Privacy</a><a href="#top">Terms</a><a href="#top">Accessibility</a></div>
</div>
</footer>
<!-- Toast -->
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Used Car Lot Landing
A complete, single-page marketing site for a fictional used-car dealership, Redline Auto Sales. The chunky red-and-steel design leads with a value hero: a quick inventory search (make, budget, body type) plus one-tap filter chips, a featured-vehicle panel with a struck-through price and a deal sticker, and a trust strip covering money-back, inspection, history reports, and all-credit approval.
Below the fold, a responsive featured-deals grid renders from a small JS dataset — each card shows a gradient photo placeholder, deal badge, certified flag, estimated monthly payment, and a reserve-test-drive action. The search form and chips filter the grid live and update the result count. A dark certified-vehicle section, an all-credit financing block with a live payment estimator (price, down, and term sliders), an instant trade-in offer tool, and a three-location panel round out the page, finishing with a bold CTA band and footer.
Everything runs on vanilla JS: live filtering, a loan-payment calculator, a deterministic trade-in estimator, a sticky-nav shadow, a mobile menu, scroll-reveal animations, and a small toast helper for feedback. The layout collapses cleanly down to about 360px with a mobile-first nav and stacked cards.
Illustrative UI only — fictional shop/dealership, not a real service system.