Unit 4 · Stage 2

Four Seasons

Your four-column grid from Stage 1 is your starting code. In this stage you will give each season its own name and its own background color, using Ojibwe and Dakota seasonal words. The calendar is about to start looking like something real. 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. You already have a .calendar-grid with four .season cards. In CSS an element can carry more than one class, and that is the trick you will use next to color each card on its own.

1 Welcome back

Before you code, meet the seasons you are about to name. Tribal nations across this region hold rich seasonal knowledge, and the words below are a starting point you can build on.

Seasonal names across the region

Ojibwe and Anishinaabe: Six seasons are recognized. The four Western seasons map roughly to Ziigwan (Spring), Niibin (Summer), Dagwaagin (Fall), and Biboon (Winter).
Dakota: Wetu (Spring), Bdoketu (Summer), Ptanyetu (Fall), Waniyetu (Winter). The Lakota use similar words.
Your nation: Students from North Dakota or South Dakota can use Dakota or Lakota names. You can also research the seasonal words of your own Tribal nation.

🌿 Why this matters. Naming the seasons in the languages of this land makes the calendar yours, not just a copy of a store-bought one.

2 Give each season a class

Right now all four cards share one class, .season. Add a second class to each card so you can style them one at a time.

What this code means

class="season spring": An element can have more than one class. This card now gets styles from BOTH .season and .spring.
.season: Still handles the shared look: padding, rounded corners, and minimum height.
.spring, .summer, .fall, .winter: Each one handles just a single job for now, that season's color. This idea is called class composition.

✍️ In your four <div class="season"> cards, add a second class: spring, summer, fall, then winter. Use the example below, then press ▶ Run.

<div class="calendar-grid">
  <div class="season spring">Season 1</div>
  <div class="season summer">Season 2</div>
  <div class="season fall">Season 3</div>
  <div class="season winter">Season 4</div>
</div>

3 Add season colors

Now add one CSS rule per season. Each rule sets a background-color that reflects how the land feels in that season.

What each color means

.spring { background-color: #4a7c59 }: A deep forest green. Spring is when the land wakes up, trees bud, and medicines begin to grow.
.summer { background-color: #c49a1b }: A warm golden yellow, the color of prairie grass, ripe berries, and long sun.
.fall { background-color: #b05a2f }: A rust orange, the color of turning leaves, wild rice hulls, and dried corn. This is the harvest color.
.winter { background-color: #3b5068 }: A dark blue gray, the color of the sky before a snowstorm and ice on a frozen lake.

✍️ Add the four color rules inside your <style> tag, then press ▶ Run and watch each card change.

.spring { background-color: #4a7c59; }
.summer { background-color: #c49a1b; }
.fall   { background-color: #b05a2f; }
.winter { background-color: #3b5068; }

🤔 Quick check before you go on

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

4 Add season headings

Replace the placeholder text with real headings. Give each card an <h2> with the English name and a <span> with the Ojibwe and Dakota names, then style them.

What this code means

color: white on the h2: White text stays readable on all four dark card colors, no matter which season it sits on.
rgba(255, 255, 255, 0.8): A slightly see-through white for the language line, softer than the heading above it, so you get visual hierarchy without a new color.
font-style: italic: Italics are a typographic cue that these are words from another language.
display: block: Turns the span into a block so it sits on its own line under the h2 instead of running alongside it.

✍️ Add the two CSS rules, then update each card with an <h2> and a <span class="season-name-native">. Use the examples below, then press ▶ Run.

.season h2 {
  font-size: 22px;
  margin: 0 0 4px;
  color: white;
}

.season-name-native {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  display: block;
  margin-bottom: 16px;
}

<div class="season spring">
  <h2>Spring</h2>
  <span class="season-name-native">Ziigwan (Ojibwe) | Wetu (Dakota)</span>
</div>

<div class="season summer">
  <h2>Summer</h2>
  <span class="season-name-native">Niibin (Ojibwe) | Bdoketu (Dakota)</span>
</div>

<div class="season fall">
  <h2>Fall</h2>
  <span class="season-name-native">Dagwaagin (Ojibwe) | Ptanyetu (Dakota)</span>
</div>

<div class="season winter">
  <h2>Winter</h2>
  <span class="season-name-native">Biboon (Ojibwe) | Waniyetu (Dakota)</span>
</div>

5 Make it your own

Experiment, then set it the way you like it.

Replace the example names with words from your own Tribal nation or region.
Try different colors that reflect how your community experiences each season.

✓ Finish this stage

To complete Stage 2, each season card needs its own class, its own color, and a name inside it. Press Check my work when you are ready. This opens Stage 3 and lets your teacher see that you finished.

YOUR CODE

PREVIEW