Pages Medium
Banking — Lending / BNPL Landing
A warm, optimistic marketing landing for a fictional buy-now-pay-later product called Splitly. It pairs a friendly coral-and-mint hero with a live split-in-4 calculator where a slider and editable amount field rebuild four equal instalments and a running total in real time. Below it sit how-it-works steps, an eligibility panel with no-score-impact cues, a filterable grid of partner merchants, three transparent rate plans, an accordion FAQ, an email capture, and a footer — all responsive vanilla HTML, CSS and JavaScript with toasts and a mobile nav.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Lending / BNPL palette — warm white + coral + mint */
--coral: #ff6b5e;
--coral-d: #f0473a;
--coral-50: #fff0ee;
--mint: #2bcc9a;
--mint-d: #1ba87d;
--mint-50: #e8faf3;
--violet: #7c5cff;
--ink: #211a18;
--ink-2: #5a4f4b;
--muted: #938881;
--bg: #fdf8f4; /* warm white */
--surface: #ffffff;
--surface-2: #fbf4ef;
--line: rgba(33, 26, 24, 0.10);
--line-2: rgba(33, 26, 24, 0.16);
--ok: #1ba87d;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 34px;
--sh-sm: 0 1px 2px rgba(33,26,24,.06), 0 1px 1px rgba(33,26,24,.04);
--sh-md: 0 10px 28px -12px rgba(33,26,24,.20), 0 2px 6px rgba(33,26,24,.06);
--sh-lg: 0 28px 60px -22px rgba(240,71,58,.28), 0 8px 24px -12px rgba(33,26,24,.18);
--maxw: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.tabnum, .calc-total strong, .plan-rate, .amount-wrap input, .schedule, #totalPay { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
/* ───────── Buttons ───────── */
.btn {
--bg-btn: var(--surface);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: inherit; font-weight: 600; font-size: .94rem;
padding: 11px 18px; border-radius: 999px;
border: 1px solid transparent; cursor: pointer;
background: var(--bg-btn); color: var(--ink);
transition: transform .12s ease, box-shadow .2s ease, background .15s ease, filter .15s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--coral) 45%, transparent); outline-offset: 2px; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 8px 20px -8px rgba(240,71,58,.6); }
.btn-primary:hover { background: var(--coral-d); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(240,71,58,.7); }
.btn-soft { background: var(--coral-50); color: var(--coral-d); }
.btn-soft:hover { background: #ffe3df; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { padding: 14px 24px; font-size: 1rem; }
.btn-block { width: 100%; }
/* ───────── Header ───────── */
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav { 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.18rem; }
.brand-mark {
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
background: linear-gradient(135deg, var(--coral), var(--coral-d)); color: #fff;
box-shadow: var(--sh-sm); transform: rotate(-8deg);
}
.brand-name { letter-spacing: -.03em; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > a:not(.btn) { padding: 8px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 500; font-size: .94rem; transition: background .15s, color .15s; }
.nav-links > a:not(.btn):hover { background: var(--surface-2); color: var(--ink); }
.nav-cta { margin-left: 4px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ───────── Hero ───────── */
.hero { position: relative; padding: 56px 0 0; overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: -120px -10% auto auto; width: 620px; height: 620px;
background: radial-gradient(closest-side, rgba(255,107,94,.20), transparent 70%); z-index: 0;
}
.hero::after {
content: ""; position: absolute; left: -140px; top: 180px; width: 480px; height: 480px;
background: radial-gradient(closest-side, rgba(43,204,154,.18), transparent 70%); z-index: 0;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--mint-50); color: var(--mint-d); font-weight: 600; font-size: .82rem; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(43,204,154,.2); }
.hero-copy h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); font-weight: 800; margin: 20px 0 16px; }
.hero-copy h1 .hl { color: var(--coral); }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 30em; }
.hero-actions { display: flex; gap: 12px; margin: 26px 0 22px; flex-wrap: wrap; }
.trust-row { list-style: none; display: flex; gap: 26px; padding: 0; margin: 0; flex-wrap: wrap; }
.trust-row li { color: var(--muted); font-size: .9rem; }
.trust-row strong { display: block; color: var(--ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
/* Calculator card */
.calc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--sh-lg); }
.calc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.calc-head h2 { font-size: 1.2rem; }
.field { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.amount-wrap { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 6px 16px; background: var(--surface-2); transition: border-color .15s, box-shadow .15s; }
.amount-wrap:focus-within { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-50); background: var(--surface); }
.amount-wrap .cur { font-size: 1.5rem; font-weight: 700; color: var(--ink-2); }
.amount-wrap input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; padding: 8px 0; color: var(--ink); width: 100%; }
.amount-wrap input:focus { outline: none; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; margin: 16px 0 6px; background: linear-gradient(90deg, var(--coral) 0%, var(--coral) 0%, var(--line) 0%); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--coral); box-shadow: var(--sh-md); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--coral); box-shadow: var(--sh-md); cursor: grab; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.schedule { margin: 18px 0 4px; display: grid; gap: 8px; }
.pay-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); animation: pop .28s ease backwards; }
.pay-row:first-child { background: var(--mint-50); border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.pay-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .82rem; background: var(--coral); color: #fff; }
.pay-row:first-child .pay-badge { background: var(--mint-d); }
.pay-when { font-size: .9rem; font-weight: 600; }
.pay-when small { display: block; color: var(--muted); font-weight: 500; font-size: .75rem; }
.pay-amt { font-weight: 800; font-size: 1.02rem; text-align: right; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.calc-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 8px; border-top: 1px dashed var(--line-2); margin-top: 12px; }
.calc-total span { color: var(--ink-2); font-weight: 600; }
.calc-total strong { font-size: 1.4rem; font-weight: 800; }
.calc-foot { font-size: .8rem; color: var(--muted); margin: 6px 0 16px; display: flex; align-items: center; gap: 6px; }
/* Marquee */
.marquee { margin-top: 56px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 52px; width: max-content; animation: scroll 26s linear infinite; }
.marquee-track span { font-weight: 700; font-size: 1.25rem; color: var(--muted); letter-spacing: -.02em; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
/* ───────── Sections ───────── */
.section { padding: 84px 0; }
.section-tint { background: var(--surface-2); }
.section-head { text-align: center; max-width: 36em; margin: 0 auto 48px; }
.section-head-left { text-align: left; margin-left: 0; }
.kicker { display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; }
.section-head p { color: var(--ink-2); margin-top: 12px; font-size: 1.05rem; }
/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0; margin: 0; counter-reset: s; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; position: relative; transition: transform .18s, box-shadow .2s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.step-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--coral-50); color: var(--coral-d); font-weight: 800; font-size: 1.1rem; margin-bottom: 16px; }
.step:nth-child(2) .step-num { background: var(--mint-50); color: var(--mint-d); }
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: .94rem; }
/* Eligibility */
.elig-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.elig-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 14px; }
.elig-copy > p { color: var(--ink-2); margin-bottom: 18px; }
.check-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 34px; color: var(--ink); font-weight: 500; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--mint-50); color: var(--mint-d); display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.elig-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 12px 24px 22px; box-shadow: var(--sh-md); }
.elig-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.elig-row:last-of-type { border-bottom: 0; }
.elig-row > span:first-child { color: var(--ink-2); }
.elig-row .val { font-weight: 700; }
.pill { font-size: .76rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.pill-ok { background: var(--mint-50); color: var(--mint-d); }
.pill-mint { background: var(--mint-50); color: var(--mint-d); }
.elig-note { margin-top: 16px; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.verified { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: #fff; font-size: .68rem; font-weight: 800; }
/* Partners */
.cat-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.cat-tab { font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.cat-tab:hover { border-color: var(--coral); color: var(--coral-d); }
.cat-tab.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }
.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.partner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; transition: transform .18s, box-shadow .2s, border-color .2s; animation: pop .3s ease backwards; }
.partner:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.partner-logo { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff; margin-bottom: 14px; }
.partner h3 { font-size: 1.04rem; }
.partner .cat { display: inline-block; margin-top: 6px; font-size: .76rem; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.partner .offer { margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--mint-d); background: var(--mint-50); padding: 5px 10px; border-radius: 999px; display: inline-block; }
/* Plans */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; transition: transform .18s, box-shadow .2s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.plan-featured { border: 2px solid var(--coral); box-shadow: var(--sh-lg); position: relative; }
.plan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.plan-top h3 { font-size: 1.3rem; }
.badge { font-size: .72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.badge-mint { background: var(--mint-50); color: var(--mint-d); }
.badge-coral { background: var(--coral-50); color: var(--coral-d); }
.badge-soft { background: #efeaff; color: var(--violet); }
.plan-rate { font-size: 1.05rem; color: var(--ink-2); margin-bottom: 2px; }
.plan-rate strong { font-size: 2.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.plan-rate .rep { font-size: .74rem; color: var(--muted); font-weight: 500; }
.plan-sub { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.plan-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; flex: 1; }
.plan-list li { position: relative; padding-left: 26px; font-size: .92rem; color: var(--ink-2); }
.plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--mint-d); font-weight: 800; }
.terms-fine { max-width: 48em; margin: 30px auto 0; text-align: center; font-size: .82rem; color: var(--muted); }
/* FAQ */
.faq-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.accordion { display: grid; gap: 12px; }
.acc-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.acc-item.is-open { box-shadow: var(--sh-md); border-color: var(--line-2); }
.acc-q { width: 100%; text-align: left; font: inherit; font-weight: 600; font-size: 1.02rem; padding: 20px 22px; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); }
.acc-q:hover { color: var(--coral-d); }
.acc-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--coral-50); color: var(--coral-d); display: grid; place-items: center; font-size: 1.2rem; font-weight: 600; transition: transform .25s, background .2s; }
.acc-item.is-open .acc-ic { transform: rotate(45deg); background: var(--coral); color: #fff; }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-a p { padding: 0 22px 20px; color: var(--ink-2); font-size: .95rem; }
/* CTA */
.cta { padding: 78px 0; }
.cta-inner { background: linear-gradient(135deg, var(--coral), var(--coral-d)); color: #fff; border-radius: var(--r-xl); padding: 56px 32px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-lg); }
.cta-inner::before { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.12); }
.cta-inner::after { content: ""; position: absolute; left: -60px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(43,204,154,.28); }
.cta-inner h2 { position: relative; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.cta-inner > p { position: relative; margin: 14px auto 26px; max-width: 32em; opacity: .95; font-size: 1.08rem; }
.cta-form { position: relative; display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.cta-form input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 14px 20px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); }
.cta-form input:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }
.cta-form .btn-primary { background: var(--ink); }
.cta-form .btn-primary:hover { background: #000; }
.cta-fine { position: relative; margin-top: 16px; font-size: .85rem; opacity: .9; }
.cta-fine.is-err { color: #fff3; }
/* ───────── Footer ───────── */
.site-footer { background: var(--ink); color: #d7cfca; padding: 56px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot-brand .brand { color: #fff; margin-bottom: 14px; }
.foot-brand .brand-mark { transform: rotate(-8deg); }
.foot-brand p { font-size: .92rem; color: #b8aea8; max-width: 24em; }
.reg { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: .8rem; color: #9c918b; }
.foot-col h4 { color: #fff; font-size: .92rem; margin-bottom: 14px; }
.foot-col a { display: block; padding: 5px 0; font-size: .9rem; color: #b8aea8; transition: color .15s; }
.foot-col a:hover { color: var(--coral); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: #8e837d; }
/* ───────── Toast ───────── */
.toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100; display: grid; gap: 10px; width: min(92vw, 400px); }
.toast { background: var(--ink); color: #fff; padding: 13px 18px; border-radius: var(--r-md); box-shadow: var(--sh-lg); font-size: .92rem; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: toastIn .3s ease; }
.toast .t-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: #fff; font-size: .72rem; font-weight: 800; flex: none; }
.toast.is-out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px); } }
/* ───────── Responsive ───────── */
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: 36px; }
.elig-grid, .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
.steps { grid-template-columns: repeat(2, 1fr); }
.partner-grid { grid-template-columns: repeat(2, 1fr); }
.plan-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.section-head-left { text-align: center; }
}
@media (max-width: 760px) {
.nav-links {
position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 22px 22px;
box-shadow: var(--sh-md); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s;
}
.nav-links.is-open { transform: none; opacity: 1; pointer-events: auto; }
.nav-links > a:not(.btn) { padding: 12px; }
.nav-links .btn { width: 100%; margin: 4px 0 0; }
.nav-toggle { display: flex; }
}
@media (max-width: 520px) {
.wrap { padding: 0 16px; }
.hero { padding-top: 32px; }
.section { padding: 56px 0; }
.calc-card { padding: 20px; border-radius: var(--r-lg); }
.amount-wrap input { font-size: 1.6rem; }
.steps, .partner-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 26px; }
.trust-row { gap: 18px; }
.cta-inner { padding: 40px 22px; }
.cta-form { flex-direction: column; }
.cta-form .btn { width: 100%; }
.marquee-track span { font-size: 1.05rem; }
}(function () {
"use strict";
/* ───────── Toast helper ───────── */
var toastHost = document.getElementById("toastHost");
function toast(msg, opts) {
opts = opts || {};
var el = document.createElement("div");
el.className = "toast";
el.innerHTML =
'<span class="t-ic" aria-hidden="true">' + (opts.icon || "✓") + "</span><span>" + msg + "</span>";
toastHost.appendChild(el);
setTimeout(function () {
el.classList.add("is-out");
el.addEventListener("animationend", function () { el.remove(); });
}, opts.duration || 2600);
}
/* ───────── Money formatting ───────── */
var fmt = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
function money(n) { return fmt.format(n); }
/* ───────── Calculator ───────── */
var amount = document.getElementById("amount");
var range = document.getElementById("amountRange");
var schedule = document.getElementById("schedule");
var totalPay = document.getElementById("totalPay");
var MIN = 20, MAX = 2000;
var WHEN = ["Due today", "In 2 weeks", "In 4 weeks", "In 6 weeks"];
function clamp(v) { return Math.min(MAX, Math.max(MIN, v)); }
function parseAmount() {
var v = parseFloat(String(amount.value).replace(/[^0-9.]/g, ""));
if (isNaN(v)) v = MIN;
return v;
}
function paintRange(v) {
var pct = ((v - MIN) / (MAX - MIN)) * 100;
range.style.background =
"linear-gradient(90deg, var(--coral) 0%, var(--coral) " + pct + "%, var(--line) " + pct + "%)";
}
function render(v, animate) {
var each = v / 4;
var rows = "";
for (var i = 0; i < 4; i++) {
// last instalment absorbs rounding remainder
var amt = i < 3 ? Math.floor(each * 100) / 100 : v - Math.floor(each * 100) / 100 * 3;
rows +=
'<div class="pay-row"' + (animate ? ' style="animation-delay:' + i * 60 + 'ms"' : "") + ">" +
'<span class="pay-badge">' + (i + 1) + "</span>" +
'<span class="pay-when">' + (i === 0 ? "Pay today" : "Payment " + (i + 1)) +
"<small>" + WHEN[i] + "</small></span>" +
'<span class="pay-amt">' + money(amt) + "</span>" +
"</div>";
}
schedule.innerHTML = rows;
totalPay.textContent = money(v);
}
function syncFromAmount(animate) {
var v = clamp(parseAmount());
range.value = v;
paintRange(v);
render(v, animate);
}
amount.addEventListener("input", function () { syncFromAmount(false); });
amount.addEventListener("blur", function () {
var v = clamp(parseAmount());
amount.value = v.toFixed(2);
syncFromAmount(true);
});
range.addEventListener("input", function () {
var v = clamp(parseFloat(range.value));
amount.value = v.toFixed(2);
paintRange(v);
render(v, false);
});
// initial paint
syncFromAmount(true);
/* Pre-qualify button */
document.getElementById("prequalBtn").addEventListener("click", function () {
var v = clamp(parseAmount());
toast("Pre-qualified! " + money(v / 4) + " due today — no score impact.", { duration: 3200 });
});
/* ───────── Mobile nav ───────── */
var navToggle = document.getElementById("navToggle");
var navLinks = document.getElementById("navLinks");
function closeNav() { navLinks.classList.remove("is-open"); navToggle.setAttribute("aria-expanded", "false"); }
navToggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("is-open");
navToggle.setAttribute("aria-expanded", String(open));
navToggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
navLinks.addEventListener("click", function (e) {
if (e.target.closest("a")) closeNav();
});
window.addEventListener("keydown", function (e) {
if (e.key === "Escape") closeNav();
});
/* ───────── Partner stores ───────── */
var PARTNERS = [
{ name: "Lumen Living", cat: "home", offer: "Pay in 4", color: "#ff6b5e" },
{ name: "NorthPeak", cat: "fashion", offer: "0% interest", color: "#2bcc9a" },
{ name: "Petalwood", cat: "home", offer: "Pay in 4", color: "#7c5cff" },
{ name: "Coraline Beauty", cat: "beauty", offer: "Free returns", color: "#f0473a" },
{ name: "Volt Cycles", cat: "tech", offer: "Pay Monthly", color: "#1ba87d" },
{ name: "Saltwater Co.", cat: "fashion", offer: "Pay in 30", color: "#ff8a5e" },
{ name: "Mira Home", cat: "home", offer: "Pay in 4", color: "#5c7cff" },
{ name: "Brightline", cat: "tech", offer: "0% interest", color: "#ff6b5e" },
{ name: "Velvet & Oak", cat: "beauty", offer: "Pay in 4", color: "#cc5cff" },
{ name: "Trailhead", cat: "fashion", offer: "Pay Monthly", color: "#2bcc9a" },
{ name: "Pixelworks", cat: "tech", offer: "Pay in 30", color: "#f0473a" },
{ name: "Glow Atelier", cat: "beauty", offer: "Free returns", color: "#7c5cff" }
];
var grid = document.getElementById("partnerGrid");
function initials(name) {
return name.split(/\s+/).map(function (w) { return w[0]; }).join("").slice(0, 2).toUpperCase();
}
function renderPartners(cat) {
var list = cat === "all" ? PARTNERS : PARTNERS.filter(function (p) { return p.cat === cat; });
grid.innerHTML = list.map(function (p, i) {
return (
'<article class="partner" style="animation-delay:' + i * 40 + 'ms">' +
'<div class="partner-logo" style="background:' + p.color + '">' + initials(p.name) + "</div>" +
"<h3>" + p.name + "</h3>" +
'<span class="cat">' + p.cat + "</span><br />" +
'<span class="offer">' + p.offer + "</span>" +
"</article>"
);
}).join("");
}
renderPartners("all");
var catTabs = document.getElementById("catTabs");
catTabs.addEventListener("click", function (e) {
var btn = e.target.closest(".cat-tab");
if (!btn) return;
catTabs.querySelectorAll(".cat-tab").forEach(function (t) {
t.classList.remove("is-active");
t.setAttribute("aria-selected", "false");
});
btn.classList.add("is-active");
btn.setAttribute("aria-selected", "true");
renderPartners(btn.dataset.cat);
});
/* ───────── FAQ accordion ───────── */
var accordion = document.getElementById("accordion");
accordion.addEventListener("click", function (e) {
var q = e.target.closest(".acc-q");
if (!q) return;
var item = q.parentElement;
var open = item.classList.contains("is-open");
accordion.querySelectorAll(".acc-item").forEach(function (it) {
it.classList.remove("is-open");
var ans = it.querySelector(".acc-a");
ans.style.maxHeight = null;
it.querySelector(".acc-q").setAttribute("aria-expanded", "false");
});
if (!open) {
item.classList.add("is-open");
q.setAttribute("aria-expanded", "true");
var ans = item.querySelector(".acc-a");
ans.style.maxHeight = ans.scrollHeight + "px";
}
});
/* ───────── CTA email ───────── */
var ctaForm = document.getElementById("ctaForm");
var ctaEmail = document.getElementById("ctaEmail");
var ctaMsg = document.getElementById("ctaMsg");
ctaForm.addEventListener("submit", function (e) {
e.preventDefault();
var val = ctaEmail.value.trim();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
if (!ok) {
ctaMsg.textContent = "Please enter a valid email so we can send your link.";
ctaMsg.classList.add("is-err");
ctaEmail.focus();
return;
}
ctaMsg.textContent = "Free forever on Pay in 4 · No spam, ever.";
ctaMsg.classList.remove("is-err");
ctaForm.reset();
toast("Download link sent to your inbox.", { duration: 3000 });
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Splitly — Buy now, split in 4. No surprises.</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ───────────────────────── Header / Nav ───────────────────────── -->
<header class="site-header" id="top">
<div class="wrap nav">
<a class="brand" href="#top" aria-label="Splitly home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none"><path d="M5 12h14M12 5v14" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>
</span>
<span class="brand-name">Splitly</span>
</a>
<nav class="nav-links" id="navLinks" aria-label="Primary">
<a href="#how">How it works</a>
<a href="#partners">Where to use</a>
<a href="#terms">Rates & terms</a>
<a href="#faq">FAQ</a>
<a class="btn btn-ghost" href="#calc">Log in</a>
<a class="btn btn-primary nav-cta" href="#calc">Get Splitly</a>
</nav>
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main>
<!-- ───────────────────────── Hero + Calculator ───────────────────────── -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="eyebrow"><span class="dot"></span> 0% interest · no late fees · no hard credit check</span>
<h1>Buy now, <span class="hl">split in 4.</span><br />No surprises, ever.</h1>
<p class="lede">
Spread any purchase across four easy payments over six weeks — friendly, transparent
and approved in seconds. Shop the brands you love and pay at your own pace.
</p>
<div class="hero-actions">
<a class="btn btn-primary btn-lg" href="#how">See how it works</a>
<a class="btn btn-soft btn-lg" href="#partners">Browse stores</a>
</div>
<ul class="trust-row">
<li><strong>4.9★</strong> 38k reviews</li>
<li><strong>0%</strong> APR on Pay in 4</li>
<li><strong>2 min</strong> sign-up</li>
</ul>
</div>
<!-- Calculator card -->
<aside class="calc-card" id="calc" aria-label="Split in 4 calculator">
<div class="calc-head">
<h2>Split in 4 calculator</h2>
<span class="badge badge-mint">No interest</span>
</div>
<label class="field" for="amount">Cart total</label>
<div class="amount-wrap">
<span class="cur">$</span>
<input id="amount" inputmode="decimal" type="text" value="240.00"
aria-describedby="amountHint" autocomplete="off" />
</div>
<input id="amountRange" type="range" min="20" max="2000" step="10" value="240"
aria-label="Cart total slider" />
<p class="hint" id="amountHint">Pay in 4 works on carts from $20 to $2,000.</p>
<div class="schedule" id="schedule" aria-live="polite"><!-- JS fills payment rows --></div>
<div class="calc-total">
<span>Total you pay</span>
<strong id="totalPay">$240.00</strong>
</div>
<p class="calc-foot"><span class="lock" aria-hidden="true">🔒</span> No fees, no interest. Just 4 equal payments.</p>
<button class="btn btn-primary btn-block" id="prequalBtn">Pre-qualify — won't affect your score</button>
</aside>
</div>
<!-- merchant marquee -->
<div class="marquee" aria-hidden="true">
<div class="marquee-track" id="marqueeTrack">
<span>Lumen Living</span><span>NorthPeak</span><span>Petalwood</span><span>Coraline Beauty</span>
<span>Volt Cycles</span><span>Saltwater Co.</span><span>Mira Home</span><span>Brightline</span>
<span>Lumen Living</span><span>NorthPeak</span><span>Petalwood</span><span>Coraline Beauty</span>
<span>Volt Cycles</span><span>Saltwater Co.</span><span>Mira Home</span><span>Brightline</span>
</div>
</div>
</section>
<!-- ───────────────────────── How it works ───────────────────────── -->
<section class="section" id="how">
<div class="wrap">
<header class="section-head">
<span class="kicker">How it works</span>
<h2>Four payments. Six weeks. Zero stress.</h2>
<p>Splitting your purchase is effortless — here's the whole journey.</p>
</header>
<ol class="steps">
<li class="step">
<span class="step-num">1</span>
<h3>Add Splitly at checkout</h3>
<p>Choose Splitly as your payment option at any partner store, online or in-app.</p>
</li>
<li class="step">
<span class="step-num">2</span>
<h3>Get an instant decision</h3>
<p>A soft check approves you in seconds — no paperwork, no waiting, no hard pull.</p>
</li>
<li class="step">
<span class="step-num">3</span>
<h3>Pay 25% today</h3>
<p>The first quarter comes off now. We auto-schedule the next three for you.</p>
</li>
<li class="step">
<span class="step-num">4</span>
<h3>Relax — we'll remind you</h3>
<p>Three more payments, two weeks apart. Friendly nudges keep you on track.</p>
</li>
</ol>
</div>
</section>
<!-- ───────────────────────── Eligibility ───────────────────────── -->
<section class="section section-tint" id="eligibility">
<div class="wrap elig-grid">
<div class="elig-copy">
<span class="kicker">Eligibility</span>
<h2>Most people qualify in seconds.</h2>
<p>Splitly is built to be inclusive and fair. Here's what we look for:</p>
<ul class="check-list">
<li>You're 18 or older and a resident of the country</li>
<li>A debit or credit card to set up payments</li>
<li>A verifiable mobile number for secure 2FA</li>
<li>A short soft check — it never affects your credit score</li>
</ul>
<a class="btn btn-primary" href="#calc">Check my eligibility</a>
</div>
<div class="elig-card">
<div class="elig-row"><span>Soft credit check</span><span class="pill pill-ok">No score impact</span></div>
<div class="elig-row"><span>Decision time</span><span class="val">≈ 3 seconds</span></div>
<div class="elig-row"><span>Typical limit</span><span class="val">$50–$1,500</span></div>
<div class="elig-row"><span>Hidden fees</span><span class="pill pill-mint">$0.00</span></div>
<div class="elig-row"><span>Account fee</span><span class="pill pill-mint">$0.00</span></div>
<p class="elig-note"><span class="verified" aria-hidden="true">✓</span> Bank-grade encryption on every transaction.</p>
</div>
</div>
</section>
<!-- ───────────────────────── Partners ───────────────────────── -->
<section class="section" id="partners">
<div class="wrap">
<header class="section-head">
<span class="kicker">Where to use Splitly</span>
<h2>5,000+ brands. One easy way to pay.</h2>
<p>From everyday essentials to those well-earned treats.</p>
</header>
<div class="cat-tabs" id="catTabs" role="tablist" aria-label="Store categories">
<button class="cat-tab is-active" role="tab" aria-selected="true" data-cat="all">All</button>
<button class="cat-tab" role="tab" aria-selected="false" data-cat="fashion">Fashion</button>
<button class="cat-tab" role="tab" aria-selected="false" data-cat="home">Home</button>
<button class="cat-tab" role="tab" aria-selected="false" data-cat="beauty">Beauty</button>
<button class="cat-tab" role="tab" aria-selected="false" data-cat="tech">Tech</button>
</div>
<div class="partner-grid" id="partnerGrid"><!-- JS renders cards --></div>
</div>
</section>
<!-- ───────────────────────── Rates & terms ───────────────────────── -->
<section class="section section-tint" id="terms">
<div class="wrap">
<header class="section-head">
<span class="kicker">Rates & terms</span>
<h2>Clear plans. No fine-print traps.</h2>
<p>Pick the rhythm that suits your budget. Everything's spelled out up front.</p>
</header>
<div class="plan-grid">
<article class="plan">
<div class="plan-top">
<h3>Pay in 4</h3>
<span class="badge badge-mint">Most popular</span>
</div>
<p class="plan-rate"><strong>0%</strong> interest</p>
<p class="plan-sub">4 payments over 6 weeks</p>
<ul class="plan-list">
<li>25% due today</li>
<li>3 payments, every 2 weeks</li>
<li>No fees, no late charges</li>
</ul>
<a class="btn btn-primary btn-block" href="#calc">Use Pay in 4</a>
</article>
<article class="plan plan-featured">
<div class="plan-top">
<h3>Pay Monthly</h3>
<span class="badge badge-coral">Bigger buys</span>
</div>
<p class="plan-rate"><strong>9.9%</strong> APR <span class="rep">representative</span></p>
<p class="plan-sub">6 or 12 months</p>
<ul class="plan-list">
<li>For carts $250–$2,000</li>
<li>Fixed monthly amount</li>
<li>Settle early, fee-free</li>
</ul>
<a class="btn btn-primary btn-block" href="#calc">Explore monthly</a>
</article>
<article class="plan">
<div class="plan-top">
<h3>Pay in 30</h3>
<span class="badge badge-soft">Try first</span>
</div>
<p class="plan-rate"><strong>0%</strong> interest</p>
<p class="plan-sub">One payment in 30 days</p>
<ul class="plan-list">
<li>Buy now, decide later</li>
<li>Return before you pay</li>
<li>Perfect for trying sizes</li>
</ul>
<a class="btn btn-primary btn-block" href="#calc">Use Pay in 30</a>
</article>
</div>
<p class="terms-fine">
Representative example: $600 over 12 months at 9.9% APR (variable) = $52.61/mo,
total payable $631.32. Subject to status and affordability. 18+ only.
</p>
</div>
</section>
<!-- ───────────────────────── FAQ ───────────────────────── -->
<section class="section" id="faq">
<div class="wrap faq-wrap">
<header class="section-head section-head-left">
<span class="kicker">FAQ</span>
<h2>Good questions, honest answers.</h2>
<p>Still curious? Our team replies in under five minutes, 7 days a week.</p>
</header>
<div class="accordion" id="accordion">
<div class="acc-item">
<button class="acc-q" aria-expanded="false">Will using Splitly affect my credit score?<span class="acc-ic" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Signing up and pre-qualifying use a soft check that never affects your score. Missed Pay Monthly payments may be reported, so we always keep you informed before anything is due.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">Are there any hidden fees or interest?<span class="acc-ic" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Pay in 4 and Pay in 30 are always 0% interest with zero fees — including no late fees. Pay Monthly carries a clearly-shown representative APR with no setup or early-settlement charges.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">How fast do I get approved?<span class="acc-ic" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Most decisions land in about three seconds. We look at a few simple signals and confirm your number with a quick 2FA code for security.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">What happens if I return my purchase?<span class="acc-ic" aria-hidden="true">+</span></button>
<div class="acc-a"><p>Once the store confirms your return, we cancel the remaining payments and refund anything already paid back to your original card — usually within 3–5 business days.</p></div>
</div>
<div class="acc-item">
<button class="acc-q" aria-expanded="false">Where can I shop with Splitly?<span class="acc-ic" aria-hidden="true">+</span></button>
<div class="acc-a"><p>At 5,000+ partner brands across fashion, home, beauty and tech — plus anywhere online using the Splitly virtual card in your app.</p></div>
</div>
</div>
</div>
</section>
<!-- ───────────────────────── CTA ───────────────────────── -->
<section class="cta">
<div class="wrap cta-inner">
<h2>Ready to split your next purchase?</h2>
<p>Join 2 million shoppers paying their way — flexible, fee-free and fully in control.</p>
<form class="cta-form" id="ctaForm" novalidate>
<label class="sr-only" for="ctaEmail">Email address</label>
<input id="ctaEmail" type="email" placeholder="[email protected]" autocomplete="email" required />
<button class="btn btn-primary btn-lg" type="submit">Get the app</button>
</form>
<p class="cta-fine" id="ctaMsg">Free forever on Pay in 4 · No spam, ever.</p>
</div>
</section>
</main>
<!-- ───────────────────────── Footer ───────────────────────── -->
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="foot-brand">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M5 12h14M12 5v14" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>
</span>
<span class="brand-name">Splitly</span>
</a>
<p>Friendly, flexible payments for the way you really shop.</p>
<span class="reg"><span class="lock" aria-hidden="true">🔒</span> 256-bit encrypted · Fictional demo</span>
</div>
<nav class="foot-col" aria-label="Product">
<h4>Product</h4>
<a href="#how">Pay in 4</a><a href="#terms">Pay Monthly</a><a href="#partners">Partner stores</a><a href="#calc">Splitly app</a>
</nav>
<nav class="foot-col" aria-label="Company">
<h4>Company</h4>
<a href="#faq">About</a><a href="#faq">Careers</a><a href="#faq">Press</a><a href="#faq">Blog</a>
</nav>
<nav class="foot-col" aria-label="Legal">
<h4>Legal</h4>
<a href="#terms">Terms</a><a href="#terms">Privacy</a><a href="#terms">Complaints</a><a href="#terms">Responsible lending</a>
</nav>
</div>
<div class="wrap footer-bottom">
<span>© 2026 Splitly Financial (demo). All amounts illustrative.</span>
<span>Made for design demos only — not real financial advice.</span>
</div>
</footer>
<div class="toast-host" id="toastHost" aria-live="polite" aria-atomic="true"></div>
<script src="script.js"></script>
</body>
</html>Lending / BNPL Landing
A full marketing landing page for Splitly, a fictional buy-now-pay-later brand built around a warm-white, coral and mint palette with a friendly rounded feel. The hero leads with a genuinely interactive “split in 4” calculator: type a cart total or drag the slider and the four instalment rows — the first due today, the rest two weeks apart — recalculate instantly, with the final payment absorbing any rounding so the total always matches. A pre-qualify button fires a toast confirming the amount due today with no credit-score impact, and tabular figures keep every money value aligned.
The page then walks through a four-step how-it-works strip, an eligibility section that surfaces trust cues (soft check, $0 fees, bank-grade encryption, 2FA), and a category-filterable grid of partner merchants rendered from data. Three rate plans — Pay in 4, Pay Monthly and Pay in 30 — lay out interest, terms and a representative APR example with no fine-print traps. An accordion FAQ expands one answer at a time with smooth height transitions, and a closing CTA validates an email before confirming a download link by toast.
Everything is self-contained vanilla JavaScript: a small toast() helper, a sticky header with a slide-down mobile menu, ARIA-driven tabs and accordion, keyboard and Escape support, and a layout that reflows from a four-column desktop grid down to a single comfortable column at 360px-wide screens.
Illustrative UI only — not real banking software or financial advice.