Stage 1: Design System + Hero | Unit 26

UNIT 1 / 7

STEP 1

Advocacy Websites and Persuasive Design

Nonprofits, community organizations, and activists use websites to make a case. A great pitch site does three things fast: it names the problem, shows evidence, and tells people what to do. Every design choice — bold type, a red accent, a large first word — serves that argument.

Unit 26 is the "Pitch Website" in your RF Code sequence. The Wičhóni Digital Center is a fictional initiative based on real data about broadband access gaps on Tribal lands. You will build the full site, then adapt the content to pitch your own real community idea.

NCAI Broadband Research MDN: IntersectionObserver

STEP 2

Design System

👉 Add inside <head>: <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; /* near-black background */
    --panel: #1d2131; /* darker section bg */
    --red: #c1392b; /* bold action red */
    --gold: #e8a81a; /* warm gold for labels */
    --snow: #f7f3ee; /* warm off-white */
    --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; }
</style>

STEP 3

Build the Hero

The headline uses a two-line structure: a claim on line 1, a bold payoff on line 2. The <em> tag is repurposed via CSS — font-style: normal; color: var(--red) — to make it a red highlight, not italic text.

👉 Hero CSS and HTML: #hero { min-height: 70vh; background: linear-gradient(135deg, #0d0f1a 0%, #1a0e0a 60%, #0d0f1a 100%); display: flex; align-items: center; padding: 80px 0; }
#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 HTML: <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">Your pitch paragraph here.</p>
</div></section>

Stage 1 Complete

You have a bold, dark advocacy hero with a two-part headline using <em> as a red highlight.

Next: Stage 2 adds the Impact Stats section with big numbers — static display first, animation in Stage 3.

Code Editor

Live Preview