Stage 6: Resources & Footer | Unit 25

UNIT 6 / 7

STEP 1

Pointing People Toward Real Resources

A language learning tool carries responsibility. The resources section acknowledges that this site is an introduction, not a replacement for community language programs, and points learners toward authoritative sources.

Each resource card is an <a> element styled as a card — the whole card is clickable. This is a common pattern: display: block on an anchor, combined with padding, makes a clickable card rather than a small underlined link.

STEP 2

Add the Resources CSS and HTML

👉 Resources CSS: #resources { background: var(--slate); padding: 72px 0; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.res-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 24px; text-decoration: none; transition: transform 0.2s, background 0.2s; display: block; }
.res-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.09); }
.res-card h3 { font-family: var(--font-display); font-size: 1rem; color: var(--snow); margin-bottom: 6px; }
.res-card p { font-size: 0.85rem; color: rgba(245,241,235,0.55); line-height: 1.6; }
footer { background: #080c12; color: rgba(245,241,235,0.4); padding: 32px 0; text-align: center; font-size: 0.875rem; }

Stage 6 Complete

The site is visually complete: hero, word explorer with filter and flip, about section, resources, and footer.

Next: Stage 7 adds the progress counter — a JavaScript Set that tracks unique cards flipped and displays a live bar in the hero.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lakota Word Explorer</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:wght@300;400;600;700&display=swap">
  <style>
    :root {
      --night: #0f1520;
      --slate: #1a2535;
      --berry: #7a3068;
      --sage:  #4f7c5a;
      --gold:  #c4941a;
      --snow:  #f5f1eb;
      --font-display: 'Lora', serif;
      --font-body: 'Nunito', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--night); color: var(--snow); font-family: var(--font-body); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
    #hero {
      min-height: 60vh;
      background: linear-gradient(160deg, #1a0e22 0%, var(--night) 60%);
      display: flex; align-items: center;
      padding: 80px 0 60px;
      text-align: center;
    }
    #hero .container { display: flex; flex-direction: column; align-items: center; }
    .hero-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
    #hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 16px; }
    #hero h1 em { color: var(--berry); font-style: italic; }
    #hero p.sub { font-size: 1.125rem; color: rgba(245,241,235,0.7); max-width: 560px; margin-bottom: 32px; }
    .progress-bar-hero { background: rgba(255,255,255,0.1); border-radius: 100px; height: 8px; width: 300px; overflow: hidden; margin-bottom: 12px; }
    .progress-bar-hero-fill { height: 100%; background: linear-gradient(90deg, var(--berry), var(--sage)); border-radius: 100px; transition: width 0.4s; }
    .progress-label { font-size: 0.875rem; color: rgba(245,241,235,0.6); }
    #words { background: var(--slate); padding: 72px 0; }
    .section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
    .section-heading { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--snow); margin-bottom: 8px; }
    .section-sub { color: rgba(245,241,235,0.6); font-size: 0.9375rem; margin-bottom: 40px; }
    .filter-bar { display: flex; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
    .filter-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(245,241,235,0.7); padding: 9px 22px; border-radius: 100px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
    .filter-btn.active { background: var(--berry); border-color: var(--berry); color: white; }
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
    .flip-card { perspective: 700px; cursor: pointer; }
    .flip-inner { position: relative; width: 100%; height: 180px; transform-style: preserve-3d; transition: transform 0.5s ease; border-radius: 14px; }
    .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
    .flip-front, .flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
    .flip-front { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
    .flip-back { background: var(--berry); border: 1px solid var(--berry); transform: rotateY(180deg); }
    .flip-front .word { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--snow); margin-bottom: 10px; }
    .flip-front .cat-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
    .flip-front .hint { font-size: 0.75rem; color: rgba(245,241,235,0.4); margin-top: 14px; }
    .flip-back .meaning { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: white; margin-bottom: 8px; }
    .flip-back .pronunciation { font-size: 0.8rem; color: rgba(255,255,255,0.7); }
    #about { background: var(--night); padding: 72px 0; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
    .about-text p { font-size: 1rem; line-height: 1.85; color: rgba(245,241,235,0.75); margin-bottom: 20px; }
    .about-quote { border-left: 3px solid var(--berry); padding: 18px 0 18px 28px; margin: 28px 0; }
    .about-quote p { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--snow); line-height: 1.55; margin: 0 0 10px; }
    .about-quote cite { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-style: normal; }
    .about-links { display: flex; flex-direction: column; gap: 12px; }
    .about-link { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 16px 20px; text-decoration: none; transition: background 0.2s; }
    .about-link:hover { background: rgba(255,255,255,0.1); }
    .about-link-icon { font-size: 1.25rem; flex-shrink: 0; }
    .about-link-text strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--snow); margin-bottom: 2px; }
    .about-link-text span { font-size: 0.8125rem; color: rgba(245,241,235,0.5); }
  </style>
</head>
<body>

<section id="hero">
    <div class="container">
      <p class="hero-tag">Oceti Sakowin • Lakota Language</p>
      <h1>Lakota <em>Word Explorer</em></h1>
      <p class="sub">16 vocabulary words across 4 categories. Click any card to flip it and reveal the meaning.</p>
    </div>
  </section>

<section id="words">
    <div class="container">
      <p class="section-label">Vocabulary</p>
      <h2 class="section-heading">Explore the Words</h2>
      <p class="section-sub">All vocabulary sourced from the New Lakota Dictionary. Pronunciations are approximate guides.</p>
      <div class="filter-bar">
        <button class="filter-btn active" data-filter="all">All Words</button>
        <button class="filter-btn" data-filter="greetings">Greetings</button>
        <button class="filter-btn" data-filter="family">Family</button>
        <button class="filter-btn" data-filter="animals">Animals</button>
        <button class="filter-btn" data-filter="nature">Nature</button>
      </div>
      <div class="cards-grid" id="cardsGrid">
        
        <div class="flip-card" data-category="greetings" data-index="0">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Háu</p>
              <p class="cat-label">Greetings</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Hello</p>
              <p class="pronunciation">men's speech</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="greetings" data-index="1">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Haŋ</p>
              <p class="cat-label">Greetings</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Hello</p>
              <p class="pronunciation">women's speech</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="greetings" data-index="2">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Philámayaye</p>
              <p class="cat-label">Greetings</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Thank you</p>
              <p class="pronunciation">fee-LAH-mah-yah-yeh</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="greetings" data-index="3">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Wit˧hóni</p>
              <p class="cat-label">Greetings</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Have a good day</p>
              <p class="pronunciation">wee-CHO-nee</p>
            </div>
          </div>
        </div>
        
        <div class="flip-card" data-category="family" data-index="4">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Iná</p>
              <p class="cat-label">Family</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Mother</p>
              <p class="pronunciation">ee-NAH</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="family" data-index="5">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Até</p>
              <p class="cat-label">Family</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Father</p>
              <p class="pronunciation">ah-TAY</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="family" data-index="6">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Misúŋkala</p>
              <p class="cat-label">Family</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Younger Brother</p>
              <p class="pronunciation">mee-SOONK-ah-lah</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="family" data-index="7">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Taksí</p>
              <p class="cat-label">Family</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Younger Sister</p>
              <p class="pronunciation">tahk-SEE</p>
            </div>
          </div>
        </div>
        
        <div class="flip-card" data-category="animals" data-index="8">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Mathó</p>
              <p class="cat-label">Animals</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Bear</p>
              <p class="pronunciation">mah-TOH</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="animals" data-index="9">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Šuŋk</p>
              <p class="cat-label">Animals</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Dog</p>
              <p class="pronunciation">shoonk</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="animals" data-index="10">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Ziŋtkála</p>
              <p class="cat-label">Animals</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Bird</p>
              <p class="pronunciation">zeenk-KAH-lah</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="animals" data-index="11">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Šuŋkawakṫáŋ</p>
              <p class="cat-label">Animals</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Horse</p>
              <p class="pronunciation">literally: sacred dog</p>
            </div>
          </div>
        </div>
        
        <div class="flip-card" data-category="nature" data-index="12">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Mní</p>
              <p class="cat-label">Nature</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Water</p>
              <p class="pronunciation">mnee</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="nature" data-index="13">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Mahpíya</p>
              <p class="cat-label">Nature</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Sky / Cloud</p>
              <p class="pronunciation">mah-PEE-yah</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="nature" data-index="14">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Wakpá</p>
              <p class="cat-label">Nature</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">River</p>
              <p class="pronunciation">wahk-PAH</p>
            </div>
          </div>
        </div>
        <div class="flip-card" data-category="nature" data-index="15">
          <div class="flip-inner">
            <div class="flip-front">
              <p class="word">Wi</p>
              <p class="cat-label">Nature</p>
              <p class="hint">click to flip</p>
            </div>
            <div class="flip-back">
              <p class="meaning">Sun / Moon</p>
              <p class="pronunciation">wee</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="about">
    <div class="container">
      <p class="section-label">Why This Matters</p>
      <h2 class="section-heading">Language Is Sovereignty</h2>
      <div class="about-grid">
        <div class="about-text">
          <p>The Lakota language — spoken by the people of the Oceti Sakowin (Seven Council Fires, also called the Great Sioux Nation) — is classified as severely endangered. At the time of this writing, fewer than 2,000 fluent speakers remain, almost all of them elders.</p>
          <p>This is not an accident. Federal boarding school policies from the 1870s through the 1970s explicitly banned Native children from speaking their languages. The Lakota word for this history is <em>wówaŋyake</em> — witnessing. To learn even a few words is to witness and resist that history.</p>
          <blockquote class="about-quote">
            <p>“A language encodes everything a people know about the world — their relationships, their ceremonies, their ways of being. When a language dies, that knowledge dies with it.”</p>
            <cite>Lakota Language Consortium</cite>
          </blockquote>
          <p>The vocabulary in this explorer comes from publicly available language resources. Always consult with Tribal language programs and community language keepers when learning and sharing Indigenous languages.</p>
        </div>
        <div class="about-links">
          <a class="about-link" href="https://www.dictionary.lakhota.org/" target="_blank">
            <span class="about-link-icon">📖</span>
            <span class="about-link-text">
              <strong>New Lakota Dictionary</strong>
              <span>The authoritative Lakota vocabulary reference, published by the Lakota Language Consortium.</span>
            </span>
          </a>
          <a class="about-link" href="https://www.lakhota.org" target="_blank">
            <span class="about-link-icon">🌐</span>
            <span class="about-link-text">
              <strong>Lakota Language Consortium</strong>
              <span>Develops curriculum and resources for Lakota language revitalization in schools and communities.</span>
            </span>
          </a>
          <a class="about-link" href="https://www.endangeredlanguages.com" target="_blank">
            <span class="about-link-icon">⚠</span>
            <span class="about-link-text">
              <strong>Endangered Languages Project</strong>
              <span>Documents Indigenous languages at risk of being lost, and connects revitalization efforts worldwide.</span>
            </span>
          </a>
        </div>
      </div>
    </div>
  </section>
  <script>
    document.querySelectorAll('.flip-card').forEach(function(card) {
      card.addEventListener('click', function() {
        card.classList.toggle('flipped');
      });
    });
  </script>
  <script>
    var filterBtns = document.querySelectorAll('.filter-btn');
    var flipCards = document.querySelectorAll('.flip-card');
    filterBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        var filter = btn.dataset.filter;
        filterBtns.forEach(function(b) { b.classList.remove('active'); });
        btn.classList.add('active');
        flipCards.forEach(function(card) {
          card.style.display = (filter === 'all' || card.dataset.category === filter) ? '' : 'none';
        });
      });
    });
  </script>
</body>
</html>

Live Preview