`html/02-story-wall.html`

115 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Story Wall — SDCC Mockup</title>
<meta name="description" content="Mockup design for studentdebtcrisis.org — Story Wall">
<meta property="og:title" content="Story Wall — Student Debt Crisis Center">
<meta property="og:description" content="A people-powered movement of 2 million borrowers fighting for student debt cancellation.">
<meta property="og:type" content="website">
<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=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#fffaf2;color:#1a0e08}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#1a0e08;color:#fff;padding:8px;z-index:100}.skip:focus{top:0}
.hd{background:#fffaf2;border-bottom:1px solid rgba(26,14,8,.1);position:sticky;top:0;z-index:50}
.hd-inner{max-width:1320px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between}
.lg{font-family:'Fraunces',serif;font-size:28px;font-weight:600;letter-spacing:-.02em}
.nv{display:flex;gap:28px;font-size:14px}
.search{position:relative;width:240px}
.search input{width:100%;background:rgba(26,14,8,.04);border:1px solid rgba(26,14,8,.12);padding:9px 12px 9px 36px;border-radius:24px;font-size:13px;color:#1a0e08}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5}
.donate{background:#c2410c;color:#fff;padding:10px 22px;border-radius:999px;font-weight:600;font-size:14px}
.hero{max-width:1320px;margin:0 auto;padding:48px 32px 32px}
.hero-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px;gap:48px}
.hero-h1{font-family:'Fraunces',serif;font-size:88px;line-height:.95;letter-spacing:-.03em;font-weight:400;max-width:780px}
.hero-h1 em{font-style:italic;color:#c2410c}
.hero-meta{text-align:right;font-size:14px;color:#5b4439;max-width:280px}
.hero-meta strong{font-family:'Fraunces',serif;font-size:32px;display:block;color:#1a0e08;margin-bottom:8px;font-weight:600}
.wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:280px;gap:14px;max-width:1320px;margin:0 auto;padding:0 32px}
.tile{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;background-size:cover;background-position:center;background-color:#3b2419;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.tile::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.7) 100%)}
.tile-badge{position:absolute;top:18px;left:18px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);padding:5px 10px;border-radius:99px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;z-index:2}
.tile-video{position:absolute;top:18px;right:18px;width:32px;height:32px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.tile-content{position:relative;z-index:2}
.tile-name{font-family:'Fraunces',serif;font-size:22px;line-height:1.1;font-weight:600;margin-bottom:6px}
.tile-loc{font-size:12px;opacity:.85;margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.tile-amt{font-family:'Fraunces',serif;font-size:28px;font-weight:600;line-height:1;margin-bottom:4px}
.tile-out{font-size:11px;opacity:.85}
.tile-feat{grid-column:span 2;grid-row:span 2}
.t1{background-image:linear-gradient(135deg,#3b2419,#7c2d12)}
.t2{background-image:linear-gradient(135deg,#451a03,#9a3412)}
.t3{background-image:linear-gradient(135deg,#7c2d12,#c2410c)}
.t4{background-image:linear-gradient(135deg,#1c1917,#44403c)}
.t5{background-image:linear-gradient(135deg,#431407,#9a3412)}
.t6{background-image:linear-gradient(135deg,#451a03,#78350f)}
.t7{background-image:linear-gradient(135deg,#1c1917,#7c2d12)}
.t8{background-image:linear-gradient(135deg,#7c2d12,#451a03)}
.cta-band{max-width:1320px;margin:48px auto;padding:48px 32px;background:#1a0e08;color:#fffaf2;border-radius:18px;display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:center}
.cta-band h2{font-family:'Fraunces',serif;font-size:42px;line-height:1.05;letter-spacing:-.02em;font-weight:400}
.cta-band p{margin-top:14px;color:#d4c5b9;font-size:16px;line-height:1.5}
.cta-form{display:flex;gap:8px}
.cta-form input{flex:1;padding:14px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:8px;font-size:14px}
.cta-form button{background:#c2410c;color:#fff;border:0;padding:14px 24px;border-radius:8px;font-weight:600;cursor:pointer}

.ft{background:#fffaf2;border-top:1px solid rgba(0,0,0,.08);padding:64px 32px 32px;color:#5b4439;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:'Fraunces',serif;font-size:28px;color:#1a0e08;margin-bottom:14px;font-weight:600}
.ft-tag{margin-bottom:8px;line-height:1.5}
.ft-addr{font-size:12px}
.ft h4{color:#1a0e08;font-size:13px;margin-bottom:14px;letter-spacing:.04em}
.ft a{display:block;padding:4px 0;color:#5b4439;font-size:13px}
.ft a:hover{color:#1a0e08}
.ft-bot{max-width:1320px;margin:48px auto 0;padding-top:32px;border-top:1px solid rgba(0,0,0,.08);text-align:center;color:#5b4439;font-size:12px}


</style>
</head><body>
<a class="skip" href="#m">Skip to main content</a>
<header class="hd"><div class="hd-inner">
  <div class="lg">SDCC <span style="font-style:italic;font-weight:400;color:#c2410c">stories</span></div>
  <nav class="nv" aria-label="Primary"><a>Stories</a><a>Issues</a><a>Action</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 stories"></label>
  <a class="donate">Donate</a>
</div></header>
<main id="m">
  <section class="hero">
    <div class="hero-top">
      <h1 class="hero-h1">Two million people. <em>Two million stories.</em> One movement.</h1>
      <div class="hero-meta"><strong>$1.77T</strong>owed by 45M federal borrowers. Behind every dollar is a person we know by name.</div>
    </div>
  </section>
  <section class="wall" aria-label="Borrower stories">
    <article class="tile tile-feat t1"><span class="tile-badge">PSLF VICTORY</span><div class="tile-video">▶</div><div class="tile-content"><div class="tile-name">Marcus Williams</div><div class="tile-loc">Oakland, CA · Public school teacher</div><div class="tile-amt">$87,400 discharged</div><div class="tile-out">After 121 qualifying payments + 9 years of denials</div></div></article>
    <article class="tile t2"><span class="tile-badge">SAVE</span><div class="tile-content"><div class="tile-name">Diana Reyes</div><div class="tile-loc">El Paso, TX</div><div class="tile-amt">$54k owed</div></div></article>
    <article class="tile t3"><span class="tile-badge">DEFAULT</span><div class="tile-content"><div class="tile-name">James Holloway</div><div class="tile-loc">Erie, PA</div><div class="tile-amt">$31k</div><div class="tile-out">Wages garnished since 2018</div></div></article>
    <article class="tile t4"><span class="tile-badge">PARENT PLUS</span><div class="tile-video">▶</div><div class="tile-content"><div class="tile-name">Linda Chen</div><div class="tile-loc">Sacramento, CA</div><div class="tile-amt">$118k</div></div></article>
    <article class="tile t5"><span class="tile-badge">IDR</span><div class="tile-content"><div class="tile-name">Tomás Espinoza</div><div class="tile-loc">Chicago, IL</div><div class="tile-amt">$72k</div></div></article>
    <article class="tile t6"><span class="tile-badge">CLOSED SCHOOL</span><div class="tile-content"><div class="tile-name">Aisha Brown</div><div class="tile-loc">Tampa, FL</div><div class="tile-amt">$24k discharged</div></div></article>
    <article class="tile t7"><span class="tile-badge">FIRST GEN</span><div class="tile-video">▶</div><div class="tile-content"><div class="tile-name">Devontae Smith</div><div class="tile-loc">Memphis, TN</div><div class="tile-amt">$96k</div></div></article>
    <article class="tile t8"><span class="tile-badge">RURAL</span><div class="tile-content"><div class="tile-name">Sarah & Mike Torres</div><div class="tile-loc">Bisbee, AZ</div><div class="tile-amt">$203k combined</div></div></article>
  </section>
  <section class="cta-band">
    <div><h2>Tell us your story.</h2><p>Stories drive every petition we file, every press conference we hold, every meeting on the Hill. Photo and consent walk-through takes 5 minutes.</p></div>
    <form class="cta-form" aria-label="Story signup"><input type="email" placeholder="email@example.com" required><button>Begin →</button></form>
  </section>
</main>

<footer class="ft" role="contentinfo">
  <div class="ft-grid">
    <div>
      <div class="ft-logo">SDCC</div>
      <p class="ft-tag">Student Debt Crisis Center is a 501(c)(3) non-profit. EIN 81-2468531. Founded 2012.</p>
      <p class="ft-addr">1875 K Street NW, Suite 200 · Washington, DC 20006 · (202) 555-0117</p>
    </div>
    <div><h4>Issues</h4><a>SAVE Plan</a><a>PSLF</a><a>Income-Driven Repayment</a><a>Loan Forgiveness</a><a>Default & Collection</a></div>
    <div><h4>Take Action</h4><a>Sign petition</a><a>Email your rep</a><a>Share your story</a><a>Volunteer</a><a>Donate</a></div>
    <div><h4>About</h4><a>Mission & history</a><a>Team</a><a>Press</a><a>Careers</a><a>Privacy</a><a>Accessibility</a></div>
  </div>
  <div class="ft-bot">© 2026 Student Debt Crisis Center · Charity Navigator 4★ · GuideStar Platinum</div>
</footer></body></html>