Stage 7: CSS Transitions

UNIT

STEP 1

What Is a CSS Transition?

A CSS transition tells the browser: when a property changes, do not snap to the new value instantly. Instead, animate the change smoothly over a set amount of time.

Right now your cards appear and disappear abruptly when you hover over them (because there is no hover state yet). After this stage, hovering a card will cause it to gently rise and cast a deeper shadow, then settle back down when you move away. Hover over the cards below:

Food Security Hover over me

Seed Sovereignty Hover over me

Seven Generations Hover over me

That lift effect is built with two CSS properties: transition and transform.

transition, tells the browser to animate changes to specific properties over a duration with a timing curve
transform: translateY(-4px), moves the element 4 pixels upward. Combined with a transition, this creates the lift
box-shadow, a shadow around the card that deepens on hover, reinforcing the sense of the card lifting off the page

STEP 2

Add Transitions to Concept Cards

Find the .concept-card rule in your <style> block. You will modify it to add a transition, then add a new :hover rule below it:

👉 Find .concept-card and add the transition property to it: .concept-card {
  background: white;
  border-left: 4px solid #2d4a1e;
  padding: 24px;
  flex: 1 1 220px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

👉 Add this new rule just below .concept-card: .concept-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

STEP 3

Add Transitions to Recipe Cards

Do the same for the recipe cards. Find .recipe-card and add the transition, then add the :hover rule below it:

👉 Find .recipe-card and add the transition property to it: .recipe-card {
  background: white;
  border-top: 4px solid #8B4513;
  padding: 28px;
  flex: 1 1 280px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

👉 Add this new rule just below .recipe-card: .recipe-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

STEP 4

Why These Values?

transition: transform 0.3s ease, box-shadow 0.3s ease, the three parts are: what to animate (transform and box-shadow), how long (0.3 seconds), and the timing curve (ease, which starts fast and slows near the end). 0.3s is a widely used default: fast enough to feel responsive, slow enough to be visible.
transform: translateY(-4px), moves the card 4 pixels upward along the Y axis. Negative values move up; positive values move down. This is the CSS way to lift a card without affecting its space in the layout: other cards do not reflow when one lifts.
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), a soft shadow that appears below the card when hovered. The four values are: horizontal offset (0), vertical offset (8px below), blur radius (20px wide), and color (10% opacity black). A deeper, wider shadow on hover reinforces the visual metaphor of the card lifting toward the viewer.
The transition must be on the base rule (not the :hover rule) for the animation to play both on mouse-enter and mouse-leave. If you put it only on :hover, the card snaps back instantly when you move away.

STEP 5

Test Your Transitions

In the live preview, scroll to the pillars section and hover slowly over each concept card. You should see each card lift upward and cast a deeper shadow, then settle back when you move away. Do the same for the recipe cards.

If the transition feels too fast or too slow

Try changing 0.3s to 0.5s for a slower, more deliberate lift, or 0.15s for a snappier feel. The timing is a design choice: match it to the personality of the page.

Unit 9 Complete!

You built a full food sovereignty resource page: a hero with research, four concept cards in a Flexbox layout, two recipe cards with ingredient lists, a styled HTML form with CSS focus states, a JavaScript interaction that responds to form submission, polish with spacing and a footer, and CSS transitions that bring the whole page to life. You wrote your first JavaScript. The page responds to the people who use it. That is a meaningful thing to have built.

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

.section-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

#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;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.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;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

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

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

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

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

</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">
    <div class="section-inner">
      <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>
    </div>
  </section>

<section id="recipes">
    <div class="section-inner">
      <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>
    </div>
  </section>

<section id="community-form">
    <div class="section-inner">
      <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>
    </div>
  </section>

<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> &bull; <a href="https://dreamofwildhealth.org" target="_blank">Dream of Wild Health</a></p>
    <p>&copy; 2026 Planting for Seven Generations. Built with RF Code.</p>
  </footer>

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>

</body>
</html>

Live Preview