Unit 4 · Stage 3

Seasonal Cards

Your four cards are named and colored. In this stage you fill each card with the real content: the seasonal activities, practices, and foods that Tribal nations in this region live by across the year. You will also add a subtitle under the main heading. Play in the editor, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. Each .season card already has a heading and a language line. Now you add a <ul> list of activities inside each one, and a subtitle line under the <h1>.

1 Welcome back

The cards are named and colored. Now you add the actual cultural content: the seasonal activities, practices, and foods that shape the year across this region.

🌾 Where this content comes from. The seasonal activities in this stage are drawn from the sources listed on the Unit 4 overview page. They represent broadly shared knowledge from Ojibwe and Anishinaabe and Dakota communities across Minnesota, North Dakota, and South Dakota. In Stage 6 you replace these examples with knowledge from your own Tribal nation or community.

2 Add an activity list to Spring

Add an unordered list inside the Spring card. First add the CSS that styles the list, then add the <ul> to the Spring HTML.

What this code means

list-style: none: Removes the default bullet points browsers add to a ul. The clean text rows work better here than standard dots.
color: rgba(255, 255, 255, 0.9): Nearly white text, slightly soft rather than stark pure white. It stays warm and readable against all four season colors.
border-bottom: 1px solid rgba(255, 255, 255, 0.2): A subtle divider line between each activity. The 0.2 opacity makes it very faint, just enough to separate items without distracting.
.season-activities li:last-child { border-bottom: none }: Removes the bottom border from the final item so the list does not end on a dangling line. This is a common pattern called the last-child fix.

✍️ Add the three CSS rules inside your <style> tag, then add a <ul class="season-activities"> with four <li> items inside the Spring card. Use the examples below, then press ▶ Run.

.season-activities {
  list-style: none;
  margin: 0;
  padding: 0;
}

.season-activities li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 1.5;
}

.season-activities li:last-child {
  border-bottom: none;
}

<div class="season spring">
  <h2>Spring</h2>
  <span class="season-name-native">Ziigwan (Ojibwe) | Wetu (Dakota)</span>
  <ul class="season-activities">
    <li>Maple sugaring (ziinzibaakdoke)</li>
    <li>Fish runs return to rivers</li>
    <li>Gathering medicines and plants</li>
    <li>Setting up spring camps</li>
  </ul>
</div>

3 Add Summer, Fall, and Winter content

Apply the same pattern to the other three cards. Each one gets a <ul class="season-activities"> with the activities of that season. The CSS you already wrote styles all four lists.

The other three seasons

Summer (Niibin | Bdoketu): Berry picking and preserving, gathering medicines in full growth, community ceremonies and gatherings, fishing and drying fish.
Fall (Dagwaagin | Ptanyetu): Wild rice harvest (manoomin), deer hunting season begins, drying and storing foods for winter, preparing winter camps.
Winter (Biboon | Waniyetu): Storytelling season (stories are told only in winter), ice fishing on frozen lakes, trapping and preparing hides, indoor community gatherings.

✍️ Add a <ul class="season-activities"> to the Summer, Fall, and Winter cards. Use the examples below, then press ▶ Run.

<div class="season summer">
  <h2>Summer</h2>
  <span class="season-name-native">Niibin (Ojibwe) | Bdoketu (Dakota)</span>
  <ul class="season-activities">
    <li>Berry picking and preserving</li>
    <li>Gathering medicines in full growth</li>
    <li>Community ceremonies and gatherings</li>
    <li>Fishing and drying fish</li>
  </ul>
</div>

<div class="season fall">
  <h2>Fall</h2>
  <span class="season-name-native">Dagwaagin (Ojibwe) | Ptanyetu (Dakota)</span>
  <ul class="season-activities">
    <li>Wild rice harvest (manoomin)</li>
    <li>Deer hunting season begins</li>
    <li>Drying and storing foods for winter</li>
    <li>Preparing winter camps</li>
  </ul>
</div>

<div class="season winter">
  <h2>Winter</h2>
  <span class="season-name-native">Biboon (Ojibwe) | Waniyetu (Dakota)</span>
  <ul class="season-activities">
    <li>Storytelling season (stories are told only in winter)</li>
    <li>Ice fishing on frozen lakes</li>
    <li>Trapping and preparing hides</li>
    <li>Indoor community gatherings</li>
  </ul>
</div>

🤔 Quick check before you go on

What value did you give list-style to remove the default bullet points? Type it, then press Submit to unlock the last step.

4 Add a page subtitle

Add a subtitle line below the <h1> to give the calendar some context. First add the CSS, then add the paragraph.

What this code means

margin-top: -16px: A negative top margin pulls the subtitle upward, closing the gap under the h1 so they read as a visual pair rather than two separate lines.
color: #555: A medium gray, clearly secondary to the dark h1 above it. This builds visual hierarchy: the heading is darkest and most important, the subtitle is lighter and supporting.

✍️ Add the .calendar-subtitle rule inside <style>, then add a <p class="calendar-subtitle"> right below the <h1>. Use the examples below, then press ▶ Run.

.calendar-subtitle {
  text-align: center;
  font-size: 15px;
  color: #555;
  margin-top: -16px;
  margin-bottom: 28px;
}

<p class="calendar-subtitle">
  Traditional seasonal knowledge of Tribal nations in the region
</p>

5 Make it your own

Experiment, then set it the way you like it.

Add or remove activities from any season.
Look up what your own Tribal nation does in each season and use that instead.

✓ Finish this stage

To complete Stage 3, each season card needs an activity list and the page needs a subtitle. Press Check my work when you are ready. This opens Stage 4 and lets your teacher see that you finished.

YOUR CODE

PREVIEW