Stage 3: Recipe Cards

UNIT

STEP 1

Lists and Recipe Cards

In this stage you will add a recipes section with two traditional dishes. The recipes use <ul> (unordered list) and <li> (list item) to display ingredients, and regular paragraphs for instructions.

Lists are one of the most common HTML structures on the web. Ingredient lists, navigation menus, feature lists, footnotes: any time content is a collection of related items, a list is the right tool.

About these recipes

These recipes are inspired by and attributed to The Sioux Chef's Indigenous Kitchen by Sean Sherman with Beth Dooley (University of Minnesota Press, 2017). The ingredients are Indigenous to this land: bison, corn, squash, wild berries, and sunflower oil.

Here is what you are building:

Featured Recipes

Traditional foods from Indigenous food systems.

Grilled Bison Skewers

Serves 4 • 30 min

1 to 1.5 lbs bison sirloin
2 tbsp sunflower oil
Sweet corn, turnips, squash

Wojape

Makes 4 to 6 cups

6 cups mixed berries
1 to 1¼ cups water
Honey or maple syrup

STEP 2

Add the Recipes CSS

Find </style> in your editor and add this CSS just above it:

👉 Add inside <style>, just above </style>: #recipes {
  background: #fff3e0;
  padding: 60px 40px;
}

#recipes h2 {
  font-size: 1.75rem;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.recipes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 32px;
}

.recipe-card {
  background: white;
  border-top: 4px solid #8B4513;
  padding: 28px;
  flex: 1 1 280px;
  border-radius: 8px;
}

.recipe-card h3 {
  font-size: 1.25rem;
  color: #8B4513;
  margin-bottom: 6px;
}

.recipe-meta {
  font-size: 0.875rem;
  color: #6B7280;
  font-style: italic;
  margin-bottom: 20px;
}

.recipe-card h4 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #374151;
  margin-bottom: 10px;
  margin-top: 20px;
}

.recipe-card ul {
  padding-left: 20px;
  margin: 0;
}

.recipe-card li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 4px;
}

.recipe-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #374151;
  margin-top: 12px;
}

STEP 3

Why These Styles?

background: #fff3e0 on #recipes, a warm cream. Each section of this page has a distinct background color: deep green for the hero, light green for the pillars, warm cream for recipes. This color sequencing helps readers understand where they are in the page without needing labels.
border-top: 4px solid #8B4513 on .recipe-card, a saddle brown accent across the top of each card. Brown grounds the recipe section in the color of earth and bison, and the top border distinguishes these cards visually from the left-border cards in the pillars section.
<ul> for ingredients, an unordered list is the correct semantic element for ingredients because the order does not matter. The browser adds bullet points automatically; the CSS controls their indentation and spacing.
text-transform: uppercase and letter-spacing: 0.06em on .recipe-card h4, a common typographic treatment for small subheadings. Uppercase with slightly wider letter spacing reads as a quiet label rather than a bold heading, which keeps the visual hierarchy clear: recipe name is largest, section label (Ingredients, Instructions) is small and muted.
padding-left: 20px on .recipe-card ul, controls how far the bullet points indent. The browser default is often too wide; 20px keeps the list visually snug with the card's padding.

STEP 4

Add the Recipes HTML

Find the closing </section> of your pillars section and add this HTML right after it:

👉 Add after the closing </section> of #pillars: <section id="recipes">
  <h2>Featured Recipes</h2>
  <p class="section-intro">Traditional foods rooted in Indigenous food systems. Inspired by <em>The Sioux Chef's Indigenous Kitchen</em> by Sean Sherman.</p>
  <div class="recipes-grid">

    
    <div class="recipe-card">
      <h3>Grilled Bison Skewers with Wojape</h3>
      <p class="recipe-meta">Serves 4 • 30 minutes</p>
      <h4>Ingredients</h4>
      <ul>
        <li>1 to 1.5 lbs bison sirloin, cut into cubes</li>
        <li>2 tablespoons sunflower oil</li>
        <li>Pinch of sumac</li>
        <li>Pinch of smoked salt</li>
        <li>2 to 3 ears sweet corn, cut into 2-inch pieces</li>
        <li>2 to 4 young turnips, halved</li>
        <li>3 summer squash, sliced</li>
      </ul>
      <h4>Instructions</h4>
      <p>Toss bison with sunflower oil, sumac, and smoked salt. Thread bison and vegetables onto skewers, alternating as you go. Grill 4 to 6 inches from heat for 15 to 20 minutes, turning once, until the bison is no longer pink in the center. Serve drizzled with Wojape.</p>
    </div>

    
    <div class="recipe-card">
      <h3>Wojape (Wozapi)</h3>
      <p class="recipe-meta">Makes 4 to 6 cups • Sauce or dessert</p>
      <h4>Ingredients</h4>
      <ul>
        <li>6 cups fresh berries: chokecherries, or a mix of blueberries, raspberries, strawberries, elderberries, cranberries, or blackberries</li>
        <li>1 to 1¼ cups water</li>
        <li>Honey or maple syrup to taste</li>
      </ul>
      <h4>Instructions</h4>
      <p>Put the berries and water into a saucepan and set over low heat. Bring to a simmer and cook, stirring occasionally, until the mixture is thick. Taste and season with honey or maple syrup as desired.</p>
    </div>

  </div>
</section>

Stage 3 Complete!

Your page now has three sections: the hero, the four pillars, and the recipe cards. In Stage 4 you will build the community form: a place where visitors can submit their own traditional recipes and food memories. This is where HTML forms come in: <input>, <textarea>, <label>, radio buttons, checkboxes, and the CSS :focus state.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Planting for Seven Generations</title>
  <style>

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: Georgia, serif;
      background: #f8f5f0;
      color: #1a1a1a;
    }

#hero {
      background-color: #2d4a1e;
      color: white;
      padding: 80px 40px;
    }

#hero h1 {
      font-size: 2.5rem;
      margin-bottom: 8px;
    }

#hero .tagline {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.7);
      font-style: italic;
      margin-bottom: 28px;
    }

#hero p {
      font-size: 1.0625rem;
      line-height: 1.8;
      max-width: 700px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 24px;
    }

#hero a {
      color: #a8d08d;
      font-size: 1rem;
    }

.hero-inner {
      display: flex;
      align-items: center;
      gap: 60px;
      max-width: 1100px;
      margin: 0 auto;
    }

.hero-text {
      flex: 1;
    }

.hero-image {
      flex: 0 0 360px;
    }

.hero-image img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 8px;
    }

#pillars {
      background: #e6f4ea;
      padding: 60px 40px;
    }

#pillars h2 {
      font-size: 1.75rem;
      color: #1a1a1a;
      margin-bottom: 8px;
    }

#pillars .section-intro {
      font-size: 1rem;
      color: #374151;
      margin-bottom: 0;
    }

.pillars-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-top: 32px;
    }

.concept-card {
      background: white;
      border-left: 4px solid #2d4a1e;
      padding: 24px;
      flex: 1 1 220px;
      border-radius: 8px;
    }

.concept-card h3 {
      font-size: 1.125rem;
      color: #2d4a1e;
      margin-bottom: 12px;
    }

.concept-card p {
      font-size: 0.9375rem;
      line-height: 1.7;
      color: #374151;
    }

</style>
</head>
<body>

<section id="hero">
    <div class="hero-inner">
      <div class="hero-text">
        <h1>Planting for Seven Generations</h1>
        <p class="tagline">A community resource for Indigenous food sovereignty</p>
        <p>Food sovereignty is the right of peoples to define their own food and agriculture systems. For Native nations across Minnesota, North Dakota, and South Dakota, this means restoring traditional seeds, rebuilding connections to the land, and making decisions that will serve communities seven generations into the future.</p>
        <a href="https://www.natifs.org" target="_blank">Learn more: NATIFS &mdash; North American Traditional Indigenous Food Systems &rarr;</a>
      </div>
      <div class="hero-image">
        <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=760&auto=format&fit=crop&q=80" alt="Hands planting seeds in soil">
      </div>
    </div>
  </section>

<section id="pillars">
    <h2>Food Sovereignty Pillars</h2>
    <p class="section-intro">Four principles that define what food sovereignty means in practice for Indigenous communities.</p>
    <div class="pillars-grid">

<div class="concept-card">
        <h3>Food Security</h3>
        <p>Having reliable, ongoing access to enough nutritious food to live an active, healthy life. Food security means the food exists, is affordable, and is physically reachable.</p>
      </div>

<div class="concept-card">
        <h3>Food Access</h3>
        <p>The ability to reach, afford, and obtain food within your community. Many Tribal communities face food deserts where grocery stores are miles away and fresh produce is scarce.</p>
      </div>

<div class="concept-card">
        <h3>Seed Sovereignty</h3>
        <p>The right to save, use, exchange, and build on traditional seeds. Seeds carry generations of knowledge about how to grow food in a specific place, climate, and culture.</p>
      </div>

<div class="concept-card">
        <h3>Seven Generations</h3>
        <p>A principle found across many Indigenous nations: every decision made today should consider its impact on people living seven generations from now. It places long-term community wellbeing above short-term gain.</p>
      </div>

</div>
  </section>

</body>
</html>

Live Preview