← back to Sdcc Mockups
html/08-coalition.html
168 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Coalition — SDCC Mockup</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;900&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',system-ui,sans-serif;background:#fff;color:#0d0d0d}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#0d0d0d;color:#fff;padding:8px;z-index:100}.skip:focus{top:0}
.hd{background:#fff;border-bottom:1px solid #f0eee8;position:sticky;top:0;z-index:50}
.hd-inner{max-width:1320px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.lg{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;letter-spacing:-.02em}
.nv{display:flex;gap:32px;font-size:14px;font-weight:500}
.search{position:relative;width:240px}
.search input{width:100%;background:#f7f5ed;border:1px solid #e8e3d4;padding:9px 12px 9px 36px;border-radius:99px;font-size:13px;font-family:inherit}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5}
.donate{background:#7c1d6f;color:#fff;padding:11px 24px;border-radius:99px;font-weight:700;font-size:14px}
.hero{background:#fff;padding:80px 32px 48px;text-align:center;border-bottom:1px solid #f0eee8}
.hero-inner{max-width:1100px;margin:0 auto}
.hero-eyebrow{font-size:13px;color:#7c1d6f;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:24px}
.hero-num{font-family:'Playfair Display',serif;font-size:240px;line-height:.85;letter-spacing:-.04em;font-weight:700;background:linear-gradient(135deg,#7c1d6f 0%,#c026d3 50%,#facc15 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.hero-num-l{font-family:'Playfair Display',serif;font-size:36px;font-style:italic;color:#0d0d0d;font-weight:400;margin-bottom:32px}
.hero-h1{font-family:'Playfair Display',serif;font-size:48px;line-height:1.1;letter-spacing:-.015em;font-weight:400;max-width:820px;margin:0 auto 18px}
.hero-h1 strong{font-weight:700;color:#7c1d6f}
.hero-lede{font-size:17px;color:#5a5550;max-width:580px;margin:0 auto 32px;line-height:1.55}
.cta-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta{padding:14px 30px;border-radius:99px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.cta-p{background:#0d0d0d;color:#fff}
.cta-s{background:#fff;color:#0d0d0d;border:1px solid #d4d0c4}
.partners{background:#faf8f1;padding:64px 32px}
.p-h{max-width:1320px;margin:0 auto 36px;text-align:center}
.p-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7c1d6f;font-weight:700;margin-bottom:8px}
.p-h h2{font-family:'Playfair Display',serif;font-size:36px;font-weight:400;letter-spacing:-.01em}
.p-h h2 em{font-style:italic;font-weight:700}
.p-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.p-logo{height:88px;background:#fff;border:1px solid #e8e3d4;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;color:#5a5550;text-align:center;padding:14px;font-size:14px;line-height:1.15;letter-spacing:-.005em;transition:border-color .2s}
.p-logo:hover{border-color:#7c1d6f;color:#7c1d6f}
.p-logo small{display:block;font-weight:400;font-size:9px;letter-spacing:.06em;color:#a8a094;text-transform:uppercase;margin-top:4px}
.p-cta{text-align:center;margin-top:36px;font-size:13px;color:#5a5550}
.p-cta a{color:#7c1d6f;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.numbers{max-width:1320px;margin:80px auto;padding:0 32px}
.numbers-h{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:36px}
.numbers-h h2{font-family:'Playfair Display',serif;font-size:48px;line-height:1.1;letter-spacing:-.015em;font-weight:400}
.numbers-h h2 em{font-style:italic;color:#7c1d6f}
.numbers-h p{color:#5a5550;font-size:15px;line-height:1.55}
.n-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.n-card{background:linear-gradient(180deg,#faf8f1,#fff);border:1px solid #e8e3d4;border-radius:18px;padding:32px;position:relative;overflow:hidden}
.n-card::after{content:'';position:absolute;bottom:-30px;right:-30px;width:140px;height:140px;background:radial-gradient(circle,rgba(124,29,111,.06),transparent 70%);border-radius:50%}
.n-num{font-family:'Playfair Display',serif;font-size:64px;line-height:1;color:#7c1d6f;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.n-l{font-size:14px;color:#0d0d0d;font-weight:600;margin-bottom:6px}
.n-d{font-size:13px;color:#5a5550;line-height:1.45}
.testimonial{background:#0d0d0d;color:#fff;padding:80px 32px}
.t-inner{max-width:920px;margin:0 auto;text-align:center}
.t-mark{font-family:'Playfair Display',serif;font-size:120px;line-height:1;color:#7c1d6f;letter-spacing:-.02em;margin-bottom:-30px}
.t-q{font-family:'Playfair Display',serif;font-size:36px;line-height:1.3;font-style:italic;font-weight:400;letter-spacing:-.01em;margin-bottom:32px}
.t-by{display:flex;align-items:center;justify-content:center;gap:16px}
.t-pic{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#7c1d6f,#c026d3)}
.t-meta{text-align:left}
.t-name{font-weight:600;font-size:15px}
.t-org{font-size:13px;color:#a8a094}
.join{max-width:1320px;margin:80px auto;padding:64px 32px;background:linear-gradient(135deg,#fef3c7 0%,#fae8ff 100%);border-radius:24px;text-align:center}
.join h2{font-family:'Playfair Display',serif;font-size:48px;letter-spacing:-.02em;margin-bottom:14px;font-weight:400}
.join h2 em{font-style:italic;color:#7c1d6f;font-weight:700}
.join p{color:#5a5550;font-size:16px;max-width:540px;margin:0 auto 28px;line-height:1.55}
.join-form{display:flex;gap:8px;max-width:480px;margin:0 auto}
.join-form input{flex:1;padding:14px 18px;border:1px solid #d4d0c4;background:#fff;border-radius:99px;font-size:14px;font-family:inherit}
.join-form button{background:#0d0d0d;color:#fff;padding:14px 28px;border:0;border-radius:99px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.ft{background:#0d0d0d;color:#a8a094;padding:64px 32px 32px;font-size:13px}
.ft-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.ft-logo{font-family:'Playfair Display',serif;font-size:32px;color:#fff;margin-bottom:14px;font-weight:700}
.ft h4{color:#fff;font-size:13px;margin-bottom:14px}
.ft a{display:block;padding:4px 0;color:#a8a094}
.ft-bot{max-width:1320px;margin:48px auto 0;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:12px;color:#5a5550}
</style></head><body>
<a class="skip" href="#m">Skip to main content</a>
<header class="hd"><div class="hd-inner">
<div class="lg">SDCC</div>
<nav class="nv" aria-label="Primary"><a>Coalition</a><a>Issues</a><a>Stories</a><a>Press</a><a>About</a></nav>
<label class="search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg><input type="search" placeholder="Search"></label>
<a class="donate">Donate</a>
</div></header>
<main id="m">
<section class="hero">
<div class="hero-inner">
<div class="hero-eyebrow">★ ★ ★ A people-powered movement ★ ★ ★</div>
<div class="hero-num">2.04M</div>
<div class="hero-num-l">supporters and counting</div>
<h1 class="hero-h1">When two million borrowers <strong>act together</strong>, Congress listens.</h1>
<p class="hero-lede">Since 2012 we've built the largest borrower advocacy coalition in the country — alongside 47 partner organizations, 230 state-level affiliates, and 800,000 monthly newsletter readers.</p>
<div class="cta-row">
<a class="cta cta-p">Add your name <span>→</span></a>
<a class="cta cta-s">View partner directory</a>
</div>
</div>
</section>
<section class="partners">
<div class="p-h">
<div class="p-eyebrow">// In coalition with</div>
<h2>The orgs <em>fighting next to us.</em></h2>
</div>
<div class="p-grid">
<div class="p-logo">National<br>Consumer<br>Law Center<small>NCLC</small></div>
<div class="p-logo">Protect<br>Borrowers<small>SBPC</small></div>
<div class="p-logo">AFT<br>Higher Ed<small>UNION</small></div>
<div class="p-logo">Demos<small>POLICY</small></div>
<div class="p-logo">Roosevelt<br>Institute<small>POLICY</small></div>
<div class="p-logo">Young<br>Invincibles<small>YOUTH</small></div>
<div class="p-logo">American<br>Progress<small>POLICY</small></div>
<div class="p-logo">Public<br>Citizen<small>WATCHDOG</small></div>
<div class="p-logo">Education<br>Trust<small>EQUITY</small></div>
<div class="p-logo">AFL-CIO<small>LABOR</small></div>
<div class="p-logo">One Fair<br>Wage<small>WORKERS</small></div>
<div class="p-logo">NAACP<br>LDF<small>CIVIL RIGHTS</small></div>
<div class="p-logo">UnidosUS<small>LATINO</small></div>
<div class="p-logo">Generation<br>Progress<small>YOUTH</small></div>
<div class="p-logo">Center for<br>Responsible<br>Lending<small>CONSUMER</small></div>
<div class="p-logo">Color of<br>Change<small>RACIAL JUSTICE</small></div>
<div class="p-logo">MoveOn<small>ACTION</small></div>
<div class="p-logo">+ 30 more<small>view all</small></div>
</div>
<div class="p-cta">47 organizations · 230 state affiliates · <a>See full coalition directory →</a></div>
</section>
<section class="numbers">
<div class="numbers-h">
<h2>Together we've moved <em>real numbers.</em></h2>
<p>Every win attributed below was the result of coalition pressure, not a single org. We share credit because the work is shared.</p>
</div>
<div class="n-grid">
<div class="n-card"><div class="n-num">$76.2B</div><div class="n-l">PSLF discharged</div><div class="n-d">Since 2021. Coalition pressure produced the 2022 PSLF Limited Waiver and the 2023 Buy-Back program.</div></div>
<div class="n-card"><div class="n-num">8M</div><div class="n-l">SAVE plan enrolled</div><div class="n-d">Joint petition with NCLC, AFT, and Demos drove enrollment 4× the original DOE projection in year one.</div></div>
<div class="n-card"><div class="n-num">38</div><div class="n-l">Press victories</div><div class="n-d">Major investigative pieces (NYT, WaPo, ProPublica) sourced by the coalition's research desks.</div></div>
<div class="n-card"><div class="n-num">12</div><div class="n-l">State laws passed</div><div class="n-d">Borrower Bills of Rights in CA, NY, IL, MA, MD, NJ, MN, WA, OR, NC, ME, RI.</div></div>
</div>
</section>
<section class="testimonial">
<div class="t-inner">
<div class="t-mark">"</div>
<p class="t-q">SDCC and the borrower coalition are the reason PSLF survived the 2024 attempts to repeal it. They organize the call campaigns. They draft the language. They make sure every senator hears the same story from a constituent in their home state.</p>
<div class="t-by">
<div class="t-pic"></div>
<div class="t-meta"><div class="t-name">Sen. Elizabeth Warren</div><div class="t-org">Senate Banking Committee</div></div>
</div>
</div>
</section>
<section class="join">
<h2>Join the <em>movement.</em></h2>
<p>Monthly briefings. Action alerts when a vote is coming. No fundraising spam. 2.04M supporters and counting.</p>
<form class="join-form" aria-label="Newsletter">
<input type="email" placeholder="email@example.com" required>
<button>Add my name →</button>
</form>
</section>
</main>
<footer class="ft">
<div class="ft-grid">
<div><div class="ft-logo">SDCC</div><p style="margin-bottom:8px;line-height:1.5">501(c)(3) non-profit · EIN 81-2468531 · Founded 2012</p><p style="font-size:12px">1875 K Street NW, Suite 200 · Washington, DC 20006</p></div>
<div><h4>Coalition</h4><a>Partners (47)</a><a>State affiliates</a><a>Become a partner</a><a>Coalition letters</a></div>
<div><h4>Issues</h4><a>SAVE plan</a><a>PSLF</a><a>IDR</a><a>Forgiveness</a></div>
<div><h4>About</h4><a>Mission</a><a>Team</a><a>Privacy</a><a>Accessibility</a></div>
</div>
<div class="ft-bot">© 2026 SDCC · Charity Navigator 4★ · GuideStar Platinum</div>
</footer>
</body></html>