Stage 2: Hero Image + Food Sovereignty Pillars

UNIT

STEP 1

What Is Flexbox?

Flexbox is a CSS layout tool that arranges items in a row or a column and lets them share space intelligently. You set display: flex on a container, and its children arrange themselves inside it.

In this stage you will use Flexbox twice: first to split the hero section into two columns (text on the left, an image on the right), then to lay out four concept cards in a row that wraps on smaller screens.

Here is what you are building:

Planting for Seven Generations

Your research paragraph text sits here on the left, with space to breathe.

Food Sovereignty Pillars

Four concept cards in a Flexbox row below the hero.

Food Security

Reliable access to nutritious food.

Food Access

The ability to reach and afford food nearby.

Seed Sovereignty

The right to save and share traditional seeds.

Seven Generations

Decisions that serve people seven generations out.

Your starting code

Your editor already has the Stage 1 code loaded: the hero section with its styles. You will add new CSS and update the hero HTML first, then add the pillars section below it.

STEP 2

Add the Hero Image CSS

Find </style> in your editor. Add this CSS just above it. It creates the two-column layout inside the hero:

👉 Add inside <style>, just above </style>: .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;
}

display: flex on .hero-inner, turns the container into a Flexbox row. Its two children (text and image) sit side by side.
align-items: center, vertically centers the text column and image column relative to each other. Without this, the text would align to the top.
gap: 60px, space between the text and the image. More generous than the card gaps because the hero deserves breathing room.
max-width: 1100px; margin: 0 auto, centers the layout and prevents it from stretching across very wide screens.
flex: 1 on .hero-text, the text column grows to fill all available space that the image column does not take.
flex: 0 0 360px on .hero-image, the image column is fixed at exactly 360px. It does not grow and it does not shrink. The three values mean: do not grow (0), do not shrink (0), start at 360px.
object-fit: cover on the img, fills the image box without distorting the photo. The image crops to fit rather than squishing.
height: 300px, a consistent image height. Without this, the image would use its natural height which varies by photo.
border-radius: 8px, rounds the image corners slightly so it feels at home on the page rather than like a clipped rectangle.

STEP 3

Update the Hero HTML

Your current hero HTML has the content directly inside <section id="hero">. You need to wrap it in a new structure: a .hero-inner flex container holding a .hero-text div and a .hero-image div.

Replace the contents of your <section id="hero"> with this:

👉 Replace the inside of <section id="hero"> with this: <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>Write your research here.</p>
    <a href="https://www.natifs.org" target="_blank">Learn more: NATIFS — North American Traditional Indigenous Food Systems →</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>

Make it yours, swap the image

The src points to a photo from Unsplash. You already know how src works, replace that URL with any image you want. Paste a different Unsplash URL, link to a photo you have saved, or use a path to a file on your computer. The layout will adjust automatically.

STEP 4

Add the Pillars CSS

Now add the concept card styles. Find </style> again and add this CSS just above it (after the hero image CSS you just added):

👉 Add inside <style>, just above </style>: #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;
}

background: #e6f4ea on #pillars, a very light green that transitions from the deep hero green. The section colors move page-wide: dark forest green (hero), light sage green (pillars), and so on.
flex-wrap: wrap on .pillars-grid, allows cards to drop to a new row on narrow screens. Without this the cards would shrink until they overflow.
gap: 24px, equal spacing between every card both horizontally and vertically without separate margin values.
flex: 1 1 220px on .concept-card, the card can grow (1), can shrink (1), and starts at 220px. On wide screens all four cards share the row equally; on narrow screens they wrap and stack.
border-left: 4px solid #2d4a1e, a dark green accent bar that ties each card back to the hero's color, creating a visual thread from the top to the pillars section.

STEP 5

Add the Pillars HTML

Find the closing </section> tag after your hero content. Add this HTML right after it:

👉 Add after </section> (the closing of the hero): <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>

Stage 2 Complete!

Your hero now has a two-column layout with an image, and the page has a second section with four food sovereignty concept cards in a Flexbox row. In Stage 3 you will add the recipes section with two traditional dishes using <ul> and <li> for ingredient lists.

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

</style>
</head>
<body>

<section id="hero">
    <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>
  </section>

</body>
</html>

Live Preview