Stage 6: Polish

UNIT

STEP 1

What Polish Means

Your page is functionally complete. It has a hero, concept cards, recipe cards, a form, a thank-you message, and working JavaScript. Polish is the work that takes a page from "built" to "finished": consistent spacing, thoughtful typography details, and a footer that closes the page with intention.

In this stage you will add three things:

A max-width container to center the content and prevent lines from stretching too wide on large screens
A submit-btn:hover state so the button visually responds when users mouse over it
A <footer> element with an attribution note and the unit's source citation

Why footers matter

A footer grounds a page and signals that the content is complete. It is also where citations, copyright notices, and credits live. On a page about food sovereignty built on the work of Indigenous knowledge keepers and published authors, attribution is not a formality, it is part of respect for that work.

STEP 2

Add the Polish CSS

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

👉 Add inside <style>, just above </style>: .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.submit-btn:hover {
  background: #3d5e2a;
}

footer {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.7);
  padding: 40px;
  text-align: center;
}

footer p {
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 12px;
}

footer a {
  color: #a8d08d;
}

STEP 3

Wrap Three Sections' Content

Inside three of the four sections, wrap the content in a <div class="section-inner">. This centers the content and limits its width on wide screens. Do this for #pillars, #recipes, and #community-form.

Skip the hero, the hero already has a .hero-inner wrapper that handles centering and max-width. Adding .section-inner there would create a conflict.

👉 Example: wrap the pillars content like this: <section id="pillars">
  <div class="section-inner">
    <h2>Food Sovereignty Pillars</h2>
    
  </div>
</section>

Repeat this pattern inside #pillars, #recipes, and #community-form: add <div class="section-inner"> as the first child inside each <section>, and close it with </div> before the closing </section>.

STEP 4

Add the Footer

Find the closing </section> of the community form section. Add the footer right after it, before </body>:

👉 Add after </section> (closing of #community-form), before </body>: <footer>
  <p>Recipe content inspired by <em>The Sioux Chef's Indigenous Kitchen</em> by Sean Sherman with Beth Dooley (University of Minnesota Press, 2017).</p>
  <p>Food sovereignty resources: <a href="https://www.natifs.org" target="_blank">NATIFS</a> • <a href="https://dreamofwildhealth.org" target="_blank">Dream of Wild Health</a></p>
  <p>© 2026 Planting for Seven Generations. Built with RF Code.</p>
</footer>

STEP 5

Why These Details?

max-width: 1100px; margin: 0 auto on .section-inner, caps the content width and centers it. On a monitor wider than 1100px, the sections stay full-width with their background colors, but the text and cards stop stretching beyond a readable width. The 0 auto margin is the standard pattern for centering a block-level element.
background: #3d5e2a on .submit-btn:hover, a slightly lighter forest green. Just enough to signal to the user that the button is clickable and they are hovering over it. This is the kind of small interaction detail that makes a page feel built with care.
footer with background: #1a1a1a, a near-black footer anchors the bottom of the page visually. The dark color echoes the deep green of the hero and signals closure.
color: #a8d08d on footer a, the same sage green used in the hero for links. Reusing a color from earlier in the page creates quiet visual rhymes that make the design feel unified rather than assembled from parts.
The citation paragraph in the footer, attribution to Sean Sherman's book is not optional. When we build pages that draw on someone's published work and cultural knowledge, naming the source is how we honor it.

Stage 6 Complete!

Your page is polished and complete. In Stage 7 you will add the finishing touch: CSS transitions that make the concept cards and recipe cards smoothly lift and respond when a user hovers over them.

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;
    }

#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;
    }

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

#community-form {
      background: #e8f0fe;
      padding: 60px 40px;
    }

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

.form-wrap {
      background: white;
      padding: 36px;
      border-radius: 8px;
      max-width: 560px;
      margin-top: 28px;
    }

.form-group {
      margin-bottom: 20px;
    }

.form-group label {
      display: block;
      font-size: 0.9375rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 6px;
    }

.form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 1rem;
      font-family: Georgia, serif;
      box-sizing: border-box;
    }

.form-group input[type="text"]:focus,
    .form-group input[type="email"]:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #2d4a1e;
      box-shadow: 0 0 0 3px rgba(45, 74, 30, 0.15);
    }

.form-group textarea {
      height: 120px;
      resize: vertical;
    }

.radio-label {
      display: block;
      font-size: 0.9375rem;
      font-weight: 400;
      margin-bottom: 6px;
      cursor: pointer;
    }

.submit-btn {
      background: #2d4a1e;
      color: white;
      border: none;
      padding: 12px 28px;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
      margin-top: 8px;
    }

#thank-you {
      display: none;
      background: #e6f4ea;
      border: 2px solid #2d4a1e;
      border-radius: 8px;
      padding: 24px 28px;
      margin-top: 24px;
      max-width: 560px;
    }

#thank-you h3 {
      font-size: 1.25rem;
      color: #2d4a1e;
      margin-bottom: 8px;
    }

#thank-you p {
      font-size: 0.9375rem;
      color: #374151;
      line-height: 1.7;
    }

</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>

<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 &bull; 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 &bull; 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&frac14; 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>

<section id="community-form">
    <h2>Share Your Recipe</h2>
    <p class="section-intro">Have a traditional recipe or food memory to share? Add it to this community resource.</p>
    <div class="form-wrap">
      <form id="recipe-form">

<div class="form-group">
          <label for="email">Email Address</label>
          <input type="email" id="email" placeholder="email@example.com">
        </div>

<div class="form-group">
          <label>How connected do you feel to traditional foods?</label>
          <label class="radio-label">
            <input type="radio" name="connection" value="very"> Very connected
          </label>
          <label class="radio-label">
            <input type="radio" name="connection" value="learning"> Still learning
          </label>
          <label class="radio-label">
            <input type="radio" name="connection" value="new"> Just getting started
          </label>
        </div>

<div class="form-group">
          <label for="recipe">Share a recipe or food memory</label>
          <textarea id="recipe" placeholder="Describe a traditional dish, where it comes from, or a memory connected to food..."></textarea>
        </div>

<button type="submit" class="submit-btn">Submit Recipe &rarr;</button>

</form>
      <div id="thank-you">
        <h3>Thank you for contributing!</h3>
        <p>Your recipe and food memory are a gift to this community. Sharing what we know about traditional foods keeps this knowledge alive for the next seven generations.</p>
      </div>
    </div>
  </section>

</body>
</html>

var form = document.getElementById('recipe-form');
  var thankYou = document.getElementById('thank-you');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    form.style.display = 'none';
    thankYou.style.display = 'block';
  });

</script>

Live Preview