Stage 4: About Section | Unit 24

UNIT 4 / 7

STEP 1

The Two-Column Grid Layout

CSS Grid's grid-template-columns: 1fr 1fr divides a container into two equal columns. The 1fr unit means "one fraction of the available space", so two 1fr columns each get exactly half.

The about section uses this pattern to put the restaurant story (text + quote) in the left column and a photo placeholder in the right. This layout is one of the most common patterns in web design: content on the left, visual on the right.

STEP 2

Add the About CSS

Add this after the menu CSS, still inside your <style> block:

👉 Add about CSS: #about { background: var(--smoke); padding: 80px 0; }
.about-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.about-heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--cream); margin-bottom: 40px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about-text p { font-size: 1rem; line-height: 1.8; color: rgba(245,240,230,0.75); margin-bottom: 20px; }
.about-quote { border-left: 3px solid var(--ember); padding: 20px 0 20px 28px; margin: 32px 0; }
.about-quote p { font-family: var(--font-display); font-size: 1.375rem; font-style: italic; color: var(--cream); line-height: 1.5; }
.about-quote cite { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-style: normal; }
.about-photo { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: rgba(245,240,230,0.3); }

grid-template-columns: 1fr 1fr, two equal columns. The fr unit distributes remaining space proportionally. This is the most common two-column layout in CSS Grid.
align-items: start, by default, grid items stretch to fill the row's height. start makes each column only as tall as its content, so the text column and photo column sit at the top rather than centering vertically.
border-left: 3px solid var(--ember) on the blockquote, the classic editorial pull quote pattern. A colored left border draws the eye and signals that this is a featured quote rather than regular text.
aspect-ratio: 4/3, locks the photo placeholder to a 4:3 rectangle regardless of its width. When you add a real image later, this ratio will hold.

STEP 3

Add the About HTML

After the closing </section> of the menu, add the about section. Use the <blockquote> element for the quote; it is the correct semantic HTML for quoted material:

👉 About section structure: <section id="about">
  <div class="container">
    <p class="about-label">Our Story</p>
    <h2 class="about-heading">Rooted in the Land</h2>
    <div class="about-grid">
      <div class="about-text">
        <p>Your restaurant story here...</p>
        <blockquote class="about-quote">
          <p>"Quote here..."</p>
          <cite>— Chef Winona Cloud, Founder</cite>
        </blockquote>
      </div>
      <div class="about-photo">Photo Coming Soon</div>
    </div>
  </div>
</section>

The <cite> element is the correct semantic tag for the source of a quote. It defaults to italic, but you can override that with CSS, which is what font-style: normal does in the .about-quote cite rule.

Stage 4 Complete

You have a two-column about section with story text, a styled blockquote, and a photo placeholder.

Next: Stage 5 adds a reservation form and a simple footer.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manoomin Kitchen</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap">
  <style>
    :root {
      --smoke: #16100c;
      --cedar: #3d1f0d;
      --ember: #c4511a;
      --gold:  #d4a02a;
      --cream: #f5f0e6;
      --font-display: 'Cormorant Garamond', serif;
      --font-body: 'Lato', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--smoke); color: var(--cream); font-family: var(--font-body); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
    #hero {
      min-height: 100vh;
      background: linear-gradient(160deg, #2a1208 0%, var(--smoke) 60%);
      display: flex; align-items: center;
      padding: 120px 0 80px;
    }
    .hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
    #hero h1 { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; line-height: 1.05; margin-bottom: 24px; }
    #hero h1 em { color: var(--ember); font-style: italic; }
    .hero-tagline { font-family: var(--font-display); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 300; color: rgba(245,240,230,0.7); margin-bottom: 40px; }
    .hero-cta { display: inline-block; background: var(--ember); color: white; text-decoration: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 40px; border-radius: 4px; }
    #menu { background: var(--cedar); padding: 80px 0; }
    .menu-heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--cream); margin-bottom: 8px; }
    .menu-sub { color: rgba(245,240,230,0.6); font-size: 1rem; margin-bottom: 40px; }
    .tab-bar { display: flex; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
    .tab-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(245,240,230,0.7); padding: 10px 24px; border-radius: 100px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer; letter-spacing: 0.04em; transition: all 0.2s; }
    .tab-btn.active { background: var(--ember); border-color: var(--ember); color: white; }
    .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
    .menu-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 24px; }
    .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
    .card-top h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--cream); }
    .card-price { font-size: 1rem; font-weight: 700; color: var(--gold); white-space: nowrap; padding-left: 12px; }
    .card-desc { font-size: 0.9rem; color: rgba(245,240,230,0.6); line-height: 1.6; margin-bottom: 14px; }
    .card-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); }
  </style>
</head>
<body>

<section id="hero">
    <div class="container">
      <p class="hero-eyebrow">Leech Lake Band of Ojibwe · Mille Lacs, MN</p>
      <h1>Rooted in<br>the <em>wild.</em></h1>
      <p class="hero-tagline">Native-grown ingredients. Traditional techniques. Modern table.</p>
      <a href="#menu" class="hero-cta">View the Menu</a>
    </div>
  </section>

<section id="menu">
    <div class="container">
      <h2 class="menu-heading">The Menu</h2>
      <p class="menu-sub">Sourced from Native-managed lands, lakes, and gardens across the Great Lakes region.</p>
      <div class="tab-bar">
        <button class="tab-btn active" data-tab="starters">Starters</button>
        <button class="tab-btn" data-tab="mains">Mains</button>
        <button class="tab-btn" data-tab="sides">Sides</button>
        <button class="tab-btn" data-tab="desserts">Desserts</button>
      </div>
      <div class="menu-grid" id="menuGrid">
        <div class="menu-card" data-category="starters">
          <div class="card-top"><h3>Fry Bread Bruschetta</h3><span class="card-price">$14</span></div>
          <p class="card-desc">Wild plum jam, smoked Lake Superior whitefish, cedar cream</p>
          <span class="card-badge">Starters</span>
        </div>
        <div class="menu-card" data-category="starters">
          <div class="card-top"><h3>Three Sisters Soup</h3><span class="card-price">$12</span></div>
          <p class="card-desc">Corn, squash, and bean in sage broth with wild onion</p>
          <span class="card-badge">Starters</span>
        </div>
        <div class="menu-card" data-category="starters">
          <div class="card-top"><h3>Walleye Fritters</h3><span class="card-price">$16</span></div>
          <p class="card-desc">Beer-battered Leech Lake walleye with birch aioli and dried cranberry</p>
          <span class="card-badge">Starters</span>
        </div>
        <div class="menu-card" data-category="mains">
          <div class="card-top"><h3>Manoomin Bowl</h3><span class="card-price">$28</span></div>
          <p class="card-desc">Hand-harvested wild rice, roasted game hen, pine mushrooms, sage butter</p>
          <span class="card-badge">Mains</span>
        </div>
        <div class="menu-card" data-category="mains">
          <div class="card-top"><h3>Venison Loin</h3><span class="card-price">$36</span></div>
          <p class="card-desc">Herb-crusted with cranberry reduction, cattail pollen butter, roasted roots</p>
          <span class="card-badge">Mains</span>
        </div>
        <div class="menu-card" data-category="mains">
          <div class="card-top"><h3>Cedar-Plank Salmon</h3><span class="card-price">$32</span></div>
          <p class="card-desc">Blueberry miso glaze, roasted beets, wild rice pilaf</p>
          <span class="card-badge">Mains</span>
        </div>
        <div class="menu-card" data-category="sides">
          <div class="card-top"><h3>Roasted Root Vegetables</h3><span class="card-price">$10</span></div>
          <p class="card-desc">Parsnips, turnips, sumac glaze, fresh herbs</p>
          <span class="card-badge">Sides</span>
        </div>
        <div class="menu-card" data-category="sides">
          <div class="card-top"><h3>Three Sisters Succotash</h3><span class="card-price">$10</span></div>
          <p class="card-desc">Corn, squash, and beans finished with sage brown butter</p>
          <span class="card-badge">Sides</span>
        </div>
        <div class="menu-card" data-category="sides">
          <div class="card-top"><h3>Traditional Frybread</h3><span class="card-price">$8</span></div>
          <p class="card-desc">Served warm with honey butter and wild berry jam</p>
          <span class="card-badge">Sides</span>
        </div>
        <div class="menu-card" data-category="desserts">
          <div class="card-top"><h3>Maple Birch Pudding</h3><span class="card-price">$12</span></div>
          <p class="card-desc">Birch syrup custard, candied sunflower seeds, dried blueberry</p>
          <span class="card-badge">Desserts</span>
        </div>
        <div class="menu-card" data-category="desserts">
          <div class="card-top"><h3>Wild Berry Crisp</h3><span class="card-price">$11</span></div>
          <p class="card-desc">Seasonal berries, oat crumble, vanilla cream</p>
          <span class="card-badge">Desserts</span>
        </div>
        <div class="menu-card" data-category="desserts">
          <div class="card-top"><h3>Wojapi Cup</h3><span class="card-price">$10</span></div>
          <p class="card-desc">Traditional Lakota berry sauce over warm frybread with cream</p>
          <span class="card-badge">Desserts</span>
        </div>
      </div>
    </div>
  </section>
  <script>
    var tabBtns = document.querySelectorAll('.tab-btn');
    var cards = document.querySelectorAll('.menu-card');
    tabBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        var filter = btn.dataset.tab;
        tabBtns.forEach(function(b) { b.classList.remove('active'); });
        btn.classList.add('active');
        cards.forEach(function(card) {
          card.style.display = (card.dataset.category === filter) ? '' : 'none';
        });
      });
    });
  </script>
</body>
</html>

Live Preview