Stage 5: How It Works + Team | Unit 26

UNIT 5 / 7

STEP 1

CSS Counters: Auto-Numbering Without JS

The phase cards display large step numbers (1, 2, 3) in the top-right corner of each card. These are generated automatically by CSS — no HTML attribute, no JavaScript. This is the counter CSS feature: counter-reset initializes a counter on a parent element, counter-increment increments it on each child, and content: counter(name) displays the current value in a ::before pseudo-element.

STEP 2

Add How It Works

👉 CSS counter pattern: .steps-grid { counter-reset: steps; }
.step-card { position: relative; }
.step-card::before {
  counter-increment: steps;
  content: counter(steps);
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-display); font-size: 3rem; font-weight: 800;
  color: rgba(193,57,43,0.15);
}

Build 3 step cards: Phase 1 (site, fiber, listening sessions), Phase 2 (opening, 60 devices, youth coding), Phase 3 (expansion, 200 homes, open-source curriculum).

STEP 3

Add the Team Section

Three team cards, each with an avatar (initials in a gradient circle), name, role, and a short bio. The avatar uses background: linear-gradient(135deg, var(--red), var(--gold)) — a simple way to make text avatars look intentional.

Stage 5 Complete

The site now answers the three pitch questions: why (stats), what (problem/solution), and how (phases + team).

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wičhóni Digital Center</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap">
  <style>
    :root {
      --dark: #111318;
      --panel: #1d2131;
      --red: #c1392b;
      --gold: #e8a81a;
      --snow: #f7f3ee;
      --font-display: 'Raleway', sans-serif;
      --font-body: 'Open Sans', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--dark); color: var(--snow); font-family: var(--font-body); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
    #hero {
      min-height: 70vh;
      background: linear-gradient(135deg, #0d0f1a 0%, #1a0e0a 60%, #0d0f1a 100%);
      display: flex; align-items: center; padding: 80px 0;
    }
    .eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
    #hero h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; margin-bottom: 24px; }
    #hero h1 em { color: var(--red); font-style: normal; display: block; }
    #hero p.lead { font-size: 1.125rem; line-height: 1.75; color: rgba(247,243,238,0.7); max-width: 520px; margin-bottom: 36px; }
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .btn-primary { display: inline-block; background: var(--red); color: white; padding: 14px 32px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: background 0.2s; }
    .btn-primary:hover { background: #a32e1f; }
    .btn-outline { display: inline-block; background: transparent; color: var(--snow); border: 2px solid rgba(247,243,238,0.3); padding: 12px 30px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: border-color 0.2s; }
    .btn-outline:hover { border-color: var(--snow); }
    #stats { background: var(--panel); padding: 72px 0; }
    .section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
    .section-heading { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--snow); margin-bottom: 36px; }
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
    .stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 32px 24px; text-align: center; }
    .stat-number { font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; color: var(--red); line-height: 1; margin-bottom: 10px; }
    .stat-suffix { font-size: 2rem; }
    .stat-label { font-size: 0.9rem; color: rgba(247,243,238,0.6); line-height: 1.5; }
    #problem { background: var(--dark); padding: 72px 0; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
    .col-text p { font-size: 1rem; line-height: 1.85; color: rgba(247,243,238,0.72); margin-bottom: 20px; }
    .pull-quote { border-left: 3px solid var(--red); padding: 18px 0 18px 28px; margin: 28px 0; }
    .pull-quote p { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; color: var(--snow); line-height: 1.55; margin: 0 0 10px; }
    .pull-quote cite { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-style: normal; }
    #solution { background: var(--panel); padding: 72px 0; }
    .solution-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
    .sol-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 28px; }
    .sol-icon { font-size: 2rem; margin-bottom: 16px; }
    .sol-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--snow); margin-bottom: 10px; }
    .sol-card p { font-size: 0.875rem; color: rgba(247,243,238,0.6); line-height: 1.65; }
  </style>
</head>
<body>

<section id="hero">
    <div class="container">
      <p class="eyebrow">Standing Rock Sioux Nation • Digital Access Initiative</p>
      <h1>The gap is real.<em>We can close it.</em></h1>
      <p class="lead">73% of Tribal households on Standing Rock lack reliable broadband. The Wičhóni Digital Center will change that — providing technology access, digital skills training, and community ownership of the digital future.</p>
      <div class="hero-btns">
        <a href="#support" class="btn-primary">Get Involved</a>
        <a href="#solution" class="btn-outline">See the Plan</a>
      </div>
    </div>
  </section>

<section id="stats">
    <div class="container">
      <p class="section-label">The Problem, in Numbers</p>
      <h2 class="section-heading">Why This Can't Wait</h2>
      <div class="stats-grid">
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="73">0</span><span class="stat-suffix">%</span></p>
          <p class="stat-label">of Tribal households on Standing Rock lack reliable broadband access</p>
        </div>
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="4200">0</span></p>
          <p class="stat-label">students in the district who need digital access to complete homework</p>
        </div>
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="12">0</span><span class="stat-suffix">x</span></p>
          <p class="stat-label">more likely to earn a living wage with strong digital skills</p>
        </div>
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="0">0</span></p>
          <p class="stat-label">public computer labs within 40 miles of the community center</p>
        </div>
      </div>
    </div>
  </section>

<section id="problem">
    <div class="container">
      <p class="section-label">The Challenge</p>
      <h2 class="section-heading">Digital Exclusion Is Not an Accident</h2>
      <div class="two-col">
        <div class="col-text">
          <p>The digital divide on Tribal lands is not a technology problem. It is a policy problem rooted in decades of federal underinvestment. Internet service providers have no incentive to build infrastructure in low-density rural areas — and Tribal communities have been the last to receive federal broadband funding.</p>
          <p>The result: students on Standing Rock complete homework by parking outside fast-food restaurants for free wifi. Job seekers drive two hours to submit digital applications. Elders cannot access telehealth services during harsh South Dakota winters.</p>
          <blockquote class="pull-quote">
            <p>“Internet access is not a luxury. It is infrastructure. And every child on this reservation deserves the same infrastructure as a child in Minneapolis.”</p>
            <cite>Community stakeholder interview, 2024</cite>
          </blockquote>
        </div>
        <div class="col-text">
          <p>The Wičhóni Digital Center is a community-owned solution. Rather than waiting for outside providers, we will build a Tribally-governed digital hub — with devices, training, and connectivity that serves the community's priorities, not a corporation's.</p>
          <p>Our model follows the Native Nations Institute's framework for digital sovereignty: communities should own and govern their own data infrastructure, not lease access from external entities.</p>
          <p>The Center will be operated by community members, trained and paid by the program, creating sustainable local employment alongside lasting digital access.</p>
        </div>
      </div>
    </div>
  </section>

<section id="solution">
    <div class="container">
      <p class="section-label">The Solution</p>
      <h2 class="section-heading">What the Center Will Provide</h2>
      <div class="solution-cards">
        <div class="sol-card">
          <p class="sol-icon">💻</p>
          <h3>Device Access</h3>
          <p>60 public computers and a device lending library for checkout. No ID or fee required. Prioritizes youth and job seekers.</p>
        </div>
        <div class="sol-card">
          <p class="sol-icon">📡</p>
          <h3>Community Broadband</h3>
          <p>Partnering with a Tribally-owned ISP to build local broadband infrastructure — owned by the Nation, not a private company.</p>
        </div>
        <div class="sol-card">
          <p class="sol-icon">🏫</p>
          <h3>Digital Skills Training</h3>
          <p>After-school coding, adult digital literacy, and job readiness courses. Taught by community members in both English and Lakota.</p>
        </div>
      </div>
    </div>
  </section>
  <script>
    document.querySelectorAll('.counter').forEach(function(el) {
      var target = parseInt(el.dataset.target);
      var current = 0;
      var duration = 1800;
      var steps = 60;
      var increment = target / steps;
      var interval = setInterval(function() {
        current += increment;
        if (current >= target) {
          el.textContent = target.toLocaleString();
          clearInterval(interval);
        } else {
          el.textContent = Math.ceil(current).toLocaleString();
        }
      }, duration / steps);
    });
  </script>
</body>
</html>

Live Preview