Stage 6: Call to Action + Footer | Unit 26

UNIT 6 / 7

STEP 1

Every Pitch Needs a Clear Ask

A pitch site with no call to action is a dead end. Visitors who are convinced need somewhere to go. The CTA section gives them three choices: donate, volunteer, or share — ordered by commitment level so there is always a low-barrier option.

The email input has a subtle focus ring: border-color: var(--red) on :focus. This is a small detail but it signals interactivity and brand consistency — the same red used in the hero appears in the form.

STEP 2

Add the CTA Section

👉 CTA form CSS: #support { background: linear-gradient(135deg, #1a0e0a 0%, #0d0f1a 100%); padding: 80px 0; text-align: center; }
.cta-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 40px; }
.cta-form input { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: var(--snow); padding: 13px 18px; border-radius: 6px; outline: none; }
.cta-form input:focus { border-color: var(--red); }
.cta-form button { background: var(--red); color: white; border: none; padding: 13px 24px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; cursor: pointer; }

Stage 6 Complete

The site is visually complete: hero, stats, problem, solution, plan, team, CTA, and footer. All seven sections of a full pitch site.

Next: Stage 7 adds IntersectionObserver — a new JavaScript API that triggers animations when sections scroll into view.

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; }
    #how { background: var(--dark); padding: 72px 0; }
    .steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; counter-reset: steps; }
    .step-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 28px; 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); line-height: 1; }
    .step-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--snow); margin-bottom: 10px; }
    .step-card p { font-size: 0.875rem; color: rgba(247,243,238,0.6); line-height: 1.65; }
    #team { background: var(--panel); padding: 72px 0; }
    .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
    .team-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
    .team-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--gold)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: white; }
    .team-name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--snow); margin-bottom: 2px; }
    .team-role { font-size: 0.8rem; color: var(--gold); margin-bottom: 6px; }
    .team-bio { font-size: 0.8125rem; color: rgba(247,243,238,0.55); line-height: 1.55; }
  </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>

<section id="how">
    <div class="container">
      <p class="section-label">How We Get There</p>
      <h2 class="section-heading">A 3-Phase Launch Plan</h2>
      <div class="steps-grid">
        <div class="step-card">
          <h3>Phase 1: Foundations (Months 1–6)</h3>
          <p>Secure site on Tribal land. Install fiber backbone. Launch community listening sessions to confirm priorities. Hire three community coordinators.</p>
        </div>
        <div class="step-card">
          <h3>Phase 2: Opening (Months 7–12)</h3>
          <p>Open the physical Center with 60 devices. Launch youth after-school coding cohort. Begin adult digital literacy sessions. Partner with local schools for field trips.</p>
        </div>
        <div class="step-card">
          <h3>Phase 3: Expansion (Year 2+)</h3>
          <p>Extend broadband access to 200 homes on the reservation. Train 5 community technicians for maintenance. Publish open-source curriculum for other Tribal Nations to adapt.</p>
        </div>
      </div>
    </div>
  </section>

<section id="team">
    <div class="container">
      <p class="section-label">Who's Behind This</p>
      <h2 class="section-heading">Community Leadership</h2>
      <div class="team-grid">
        <div class="team-card">
          <div class="team-avatar">LB</div>
          <div>
            <p class="team-name">Lena Bowstring</p>
            <p class="team-role">Executive Director</p>
            <p class="team-bio">Standing Rock citizen, former school board member, 12 years in community development and Tribal governance.</p>
          </div>
        </div>
        <div class="team-card">
          <div class="team-avatar">MR</div>
          <div>
            <p class="team-name">Marcus Running Bear</p>
            <p class="team-role">Technology Director</p>
            <p class="team-bio">Network engineer and Lakota language advocate. Previously built Tribal broadband infrastructure in Montana.</p>
          </div>
        </div>
        <div class="team-card">
          <div class="team-avatar">SK</div>
          <div>
            <p class="team-name">Sara Kills Thunder</p>
            <p class="team-role">Youth Programs Lead</p>
            <p class="team-bio">Middle school STEM teacher and robotics coach. Leads summer technology camps for 40+ youth annually.</p>
          </div>
        </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