Stage 7: Responsive Design & Footer

UNIT

STEP 1

What Are Media Queries?

A media query is a CSS rule that only applies when the browser viewport meets a condition. The most common condition is maximum width: the styles inside only take effect when the screen is at or below a certain pixel size.

The pattern: @media (max-width: 900px) {
  /* These rules only apply on screens 900px wide or less */
  .dancers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Media queries go at the bottom of your stylesheet, after all other rules. When the browser viewport is wider than 900px, the three-column grid applies. When it narrows to 900px or below, the two-column rule kicks in and overrides it.

This is your first look at media queries. The concept is the same across all projects: write your default styles first, then use @media to adjust them for smaller screens.

Grid changes at each breakpoint:

Wide screen , 3 columns

Tablet , 2 columns

Phone , 1 column

STEP 2

Add Responsive Grid CSS

Add these two media query blocks just above </style>. Media queries always go at the end of your CSS so they can override earlier rules:

👉 Add just above </style>: @media (max-width: 900px) {
  .dancers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .dancers-grid {
    grid-template-columns: 1fr;
  }
  #hero {
    padding: 60px 24px;
  }
  #hero h1 {
    font-size: 2rem;
  }
  #dancers {
    padding: 60px 24px;
  }
}

To test the breakpoints, narrow the Live Preview panel by dragging the divider to the left. Watch the grid reflow from three columns to two, then from two to one.

STEP 3

Add Footer CSS

Add these two footer rules after the media queries, still inside <style>:

👉 Add after the @media blocks: #site-footer {
  background: #0a0a0f;
  color: rgba(255, 255, 255, 0.45);
  padding: 48px 40px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 2;
}

#site-footer a {
  color: #d4a853;
}

STEP 4

Add Footer HTML

Add the footer element just before </body>, after the modal overlay HTML:

👉 Add just before </body>, after the modal HTML: <footer id="site-footer">
  <p>Relentless Feather · Unit 10 · Dancing in Step</p>
  <p>Sources:
    <a href="https://americanindian.si.edu" target="_blank">Smithsonian NMAI</a> ·
    <a href="https://whiteearth.com" target="_blank">White Earth Nation</a> ·
    <a href="https://mnhs.org" target="_blank">Minnesota Historical Society</a>
  </p>
</footer>

Note on ·

· is an HTML entity that renders as a centered dot ( · ), a common separator in footers and metadata lines. You have seen this pattern throughout this unit in the modal nation labels.

STEP 5

Why These Styles?

@media (max-width: 900px), the styles inside this block only apply when the viewport is 900 pixels wide or less. On wider screens the rule is completely ignored. Media queries go at the end of the stylesheet so they can override earlier declarations without needing to increase specificity.
repeat(2, 1fr) at 900px, switching from three equal columns to two gives each card more width on a tablet. The cards were getting narrow enough to crowd the dancer images at three columns.
1fr at 600px, a single column that fills the full available width is the most readable layout on a phone. Six cards stack vertically, each taking the full row.
Reduced padding at 600px, 80px 40px side padding eats significantly into the content area on a narrow phone screen. Reducing to 60px 24px recovers that space without losing the visual breathing room.
font-size: 2rem for #hero h1 at 600px, 3rem at that size would push the heading onto multiple lines more than necessary and feel oversized for the viewport.
background: #0a0a0f on the footer, slightly darker than the #0f0f1a dancers section, creating a gentle visual step down that signals the end of the page.
color: rgba(255, 255, 255, 0.45), muted footer text that stays readable without competing with the main content. Attribution and source links should be present but quiet.

Unit 10 Complete!

You have built a complete, interactive powwow website from a blank page. Hover effects with CSS transitions, illustrated PNG images grounded with object-position, a data-driven modal opened with JavaScript, responsive layout using media queries, and a sourced footer. Every piece connects to a real technique used in production web work.

The content in this unit represents living Tribal traditions. The Jingle Dress dance, the Grass Dance, Men's Traditional, and all of the styles you built cards for are still practiced and celebrated at powwows today across Lakota, Dakota, and Ojibwe communities.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Dancing in Step</title>
  <style>

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

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

#hero {
      background: #1a1237;
      color: white;
      padding: 80px 40px;
    }

#hero h1 {
      font-size: 3rem;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

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

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

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

#dancers {
      background: #0f0f1a;
      padding: 80px 40px;
    }

#dancers h2 {
      font-size: 2rem;
      color: white;
      text-align: center;
      margin-bottom: 12px;
    }

#dancers .section-intro {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      margin-bottom: 48px;
    }

.dancers-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1100px;
      margin: 0 auto;
    }

.dancer-card {
      background: #1a1237;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      height: 420px;
      position: relative;
      display: flex;
      align-items: flex-end;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.card-label {
      width: 100%;
      padding: 20px;
      color: white;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      position: relative;
      z-index: 2;
      background: linear-gradient(to top, rgba(26, 18, 55, 0.92), transparent);
    }

.dancer-card img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
      transition: transform 0.4s ease;
    }

.dancer-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 48px rgba(212, 168, 83, 0.25);
    }

.dancer-card:hover img {
      transform: scale(1.06);
    }

.dancer-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(212, 168, 83, 0.12);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

.dancer-card:hover::before {
      opacity: 1;
    }

#modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

.modal {
      background: #1a1237;
      color: white;
      max-width: 580px;
      width: 100%;
      border-radius: 16px;
      padding: 48px 40px;
      position: relative;
      max-height: 85vh;
      overflow-y: auto;
    }

#modal-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      font-size: 2rem;
      cursor: pointer;
      transition: color 0.2s;
    }

#modal-title {
      font-size: 2.25rem;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

#modal-nation {
      font-size: 0.8125rem;
      color: #d4a853;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-weight: 700;
      margin-bottom: 24px;
    }

#modal-description {
      font-size: 1rem;
      line-height: 1.9;
      color: rgba(255, 255, 255, 0.85);
    }

</style>
</head>
<body>

<section id="hero">
    <h1>Dancing in Step</h1>
    <p class="tagline">Powwow regalia and dance traditions of the Lakota, Dakota, and Ojibwe peoples</p>
    <p>Powwow is a gathering. The drum sits at the center of the arena and everything &mdash; the dancers, the families, the songs &mdash; moves around it. For the Lakota, Dakota, and Ojibwe peoples, powwow is a living tradition: a space where culture is practiced, passed forward, and celebrated together.</p>
    <a href="https://americanindian.si.edu" target="_blank">Learn more: Smithsonian National Museum of the American Indian &rarr;</a>
  </section>

<section id="dancers">
    <h2>The Dances</h2>
    <p class="section-intro">Six dance traditions of the Lakota, Dakota, and Ojibwe peoples. Click any dancer to learn more.</p>
    <div class="dancers-grid">

<div class="dancer-card" data-dance="jingle-dress">
        <img src="../../assets/images/womensJingle.png" alt="Jingle Dress dancer">
        <span class="card-label">Jingle Dress</span>
      </div>

<div class="dancer-card" data-dance="fancy-shawl">
        <img src="../../assets/images/womensFancy.png" alt="Fancy Shawl dancer">
        <span class="card-label">Fancy Shawl</span>
      </div>

<div class="dancer-card" data-dance="womens-traditional">
        <img src="../../assets/images/womensTraditional.png" alt="Women's Traditional dancer">
        <span class="card-label">Women's Traditional</span>
      </div>

<div class="dancer-card" data-dance="grass-dance">
        <img src="../../assets/images/mensGrass.png" alt="Grass Dance dancer">
        <span class="card-label">Grass Dance</span>
      </div>

<div class="dancer-card" data-dance="mens-traditional">
        <img src="../../assets/images/mensTraditional.png" alt="Men's Traditional dancer">
        <span class="card-label">Men's Traditional</span>
      </div>

<div class="dancer-card" data-dance="mens-fancy">
        <img src="../../assets/images/mensFancy.png" alt="Men's Fancy dancer">
        <span class="card-label">Men's Fancy</span>
      </div>

</div>
  </section>

<div id="modal-overlay">
    <div class="modal">
      <button id="modal-close">&times;</button>
      <h2 id="modal-title"></h2>
      <p id="modal-nation"></p>
      <p id="modal-description"></p>
    </div>
  </div>

var cards = document.querySelectorAll('.dancer-card');
    cards.forEach(function(card) {
      card.addEventListener('click', function() {
        var key = card.getAttribute('data-dance');
        var dance = dances[key];
        document.getElementById('modal-title').textContent = dance.title;
        document.getElementById('modal-nation').textContent = dance.nation;
        document.getElementById('modal-description').textContent = dance.description;
        document.getElementById('modal-overlay').style.display = 'flex';
      });
    });

document.getElementById('modal-close').addEventListener('click', function() {
      document.getElementById('modal-overlay').style.display = 'none';
    });

document.getElementById('modal-overlay').addEventListener('click', function(e) {
      if (e.target === this) {
        this.style.display = 'none';
      }
    });
  </script>

</body>
</html>

Live Preview

Responsive Design & Footer