Unit 5 · Stage 5

Buffalo Lifeways

In Stage 4 you built the Food Gathering section with three article cards. In this stage you add a second content section, Buffalo Lifeways, and give it an alternating background color so the two sections separate cleanly as the reader scrolls. Your Stage 4 page is already in the editor. Play with it, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. You already have a header, a sticky nav, and the Food Gathering section with a .content-section wrapper and an .articles-grid of three cards. This stage reuses all of that and adds one new CSS class plus one new section.

1 Why alternate the background?

Your Food Gathering section sits on the warm off-white page background. If every section shares that same background, a long page blurs into one column and the reader loses track of where one topic ends and the next begins. Alternating the background of every other section fixes that.

The pattern you are about to build

Section 1 (Food Gathering): Keeps the page background, a warm off-white (#f5f0eb).
Section 2 (Buffalo Lifeways): Gets a soft earthy tan (#ede8df), close enough to feel like the same palette but different enough to read as a new area.
Full width vs. readable width: The color band is set on the outer <section>, so it stretches edge to edge, while the .content-section inside keeps the text at a comfortable reading width. This is a layout pattern used on nearly every professional site.

🦬 Why the buffalo? For Dakota, Lakota, and Nakota people of the northern plains, the buffalo was a relative, not a resource. The section you build next honors that relationship while you practice a real design technique.

2 Add an alternating section style

You only need one new CSS rule. It sets a background color on any section that carries the class section-alt.

What this code means

background-color: #ede8df: A warm tan that separates this section from the off-white one above it without a hard line or border.
.section-alt: Goes on the outer <section>, which spans the full width of the page, so the color reaches both edges.

✍️ Add the .section-alt rule inside your <style> tag. Use the example below, then press ▶ Run.

/* add this inside <style> */
.section-alt {
  background-color: #ede8df;
}

🤔 Quick check before you go on

What CSS property did you set to give the alternating section its color? Type it, then press Submit to unlock the last step.

3 Build the Buffalo Lifeways section

Add this section right after the closing </section> for Food Gathering, still inside <main>. It reuses the same structure you already know, and it carries the new section-alt class.

What this code means

class="section-alt" on the section: Pulls in the tan background rule you just wrote, so this whole band is a different color.
id="buffalo-lifeways": Matches the #buffalo-lifeways nav link at the top, so clicking it scrolls here.
.content-section and .articles-grid: The same wrappers from Food Gathering. Reusing classes keeps every section consistent.

✍️ Add the Buffalo Lifeways section after the Food Gathering </section>. Use the example below, then press ▶ Run.

<!-- add after the Food Gathering </section>, inside <main> -->
<section id="buffalo-lifeways" class="section-alt">
  <div class="content-section">
    <h2 class="section-heading">Buffalo Lifeways</h2>
    <p class="section-intro">For Dakota, Lakota, and Nakota people of the northern plains, the buffalo was not a resource. It was a relative. Every part of the animal was used, and the hunt itself was an act of prayer and communal responsibility, guided by knowledge held by hunters, women, and spiritual leaders together.</p>
    <div class="articles-grid">
      <article>
        <h3>Using Every Part</h3>
        <p>Nothing from the buffalo was wasted. Hides became tipi covers, robes, and moccasins. Sinew was used for bowstrings and thread. Bones became tools, needles, and sleds. The stomach and bladder served as water containers and cooking vessels. Pemmican, made from dried meat and fat, fed people through long winters and extended travel.</p>
      </article>
      <article>
        <h3>The Hunt as Community</h3>
        <p>Buffalo hunts were organized collective efforts, not individual pursuits. Hunters, scouts, and camp leaders each had specific roles. Driving buffalo into surrounds or over cliffs required coordination among dozens of people. The meat and hides were distributed according to community need, with elders and families without hunters receiving portions first.</p>
      </article>
      <article>
        <h3>Bison Today</h3>
        <p>After near-extinction in the 19th century, bison are returning to Tribal lands through active restoration efforts. The Oceti Sakowin Oyate has worked to reestablish bison herds as part of cultural, spiritual, and food sovereignty revitalization. Several Tribal Nations in the region now manage their own bison herds and host ceremonies marking the buffalo's return.</p>
      </article>
    </div>
  </div>
</section>

4 Make it your own

Experiment, then set it the way you like it.

Try a different tan for .section-alt, like #e8e2d6, and press Run.
Swap the three article headings for buffalo knowledge from your own Tribal nation or community.
Temporarily remove class="section-alt" from the section to see how much the alternating color helps.

✓ Finish this stage

To complete Stage 5, your page needs the .section-alt rule and the Buffalo Lifeways section using it. Press Check my work when you are ready. This opens Stage 6 and lets your teacher see that you finished.

YOUR CODE

PREVIEW