Stage 6: About & Footer | Unit 23

UNIT 6 / 7

STEP 1

About Section and Footer

Every professional directory has a page that explains what it is, who runs it, and how to get listed. This stage adds an About section with a two-column layout: a mission statement on the left and a quick contact info block on the right. Then you will add a simple footer to close out the page.

The About section uses grid-template-columns: 3fr 1fr — three parts content, one part contact details. This is a common editorial layout for pages that need to lead with prose but also surface contact info.

STEP 2

Add the About and Footer CSS

👉 Add after directory CSS: #about { background: white; padding: 80px 0; border-top: 1px solid #e8e2d8; }
.about-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 60px; align-items: start; }
.about-text p { font-size: 1.0625rem; line-height: 1.75; color: #374151; margin-bottom: 16px; }
.about-text p:last-child { margin-bottom: 0; }
.contact-card { background: var(--cream); border-radius: 16px; padding: 28px; }
.contact-card h3 { font-family: var(--font-display); font-size: 1.125rem; color: var(--pine); margin-bottom: 16px; }
.contact-item { margin-bottom: 12px; }
.contact-item-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sage); margin-bottom: 2px; }
.contact-item-value { font-size: 0.9375rem; color: var(--pine); }
footer { background: var(--pine); color: rgba(255,255,255,0.5); padding: 32px 0; text-align: center; font-size: 0.875rem; }
footer a { color: #a4c9a9; text-decoration: none; }
footer a:hover { text-decoration: underline; }

STEP 3

Add the About and Footer HTML

After the directory section, add:

👉 Add after directory section: <section id="about">
  <div class="container">
    <p class="section-label">About This Directory</p>
    <h2 class="section-heading">Built to Support Native Economies</h2>
    <div class="about-grid">
      <div class="about-text">
        <p>This directory was built as a student project rooted in the belief that Native economic sovereignty is inseparable from cultural sovereignty. When Indigenous entrepreneurs build businesses, they create pathways for community members to stay home, earn well, and contribute to Tribal economies.</p>
        <p>All businesses featured here are Indigenous-owned and operated. We verify Tribal affiliation before listing and update the directory each season. If you know of a Native-owned business that should be included, reach out using the contact information on this page.</p>
      </div>
      <div class="contact-card">
        <h3>Get Listed</h3>
        <div class="contact-item"><p class="contact-item-label">Email</p><p class="contact-item-value">list@nativebiz.directory</p></div>
        <div class="contact-item"><p class="contact-item-label">Region</p><p class="contact-item-value">Minnesota & Great Lakes</p></div>
        <div class="contact-item"><p class="contact-item-label">Updated</p><p class="contact-item-value">Summer 2026</p></div>
      </div>
    </div>
  </div>
</section>
<footer>
  <div class="container">
    <p>Native Business Directory • Minnesota & Great Lakes Region • nativebiz.directory</p>
  </div>
</footer>

Stage 6 Complete

The About section is in with a 3fr 1fr grid — prose on the left, contact card on the right. The footer closes the page with the pine background.

Next: Stage 7 combines the search and filter so they work together, and adds a no-results message when nothing matches.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Native Business Directory</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap">
  <style>
    :root { --pine: #1b2e1b; --sage: #4a7c59; --amber: #c97b2a; --cream: #f8f4ee; --font-display: 'DM Serif Display', serif; --font-body: 'DM Sans', sans-serif; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font-body); background: var(--cream); color: var(--pine); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
    .section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); margin-bottom: 8px; }
    .section-heading { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 40px; color: var(--pine); }
    #hero { background: var(--pine); color: white; padding: 80px 0 60px; }
    .hero-tag { display: inline-block; background: rgba(255,255,255,0.12); border-radius: 100px; padding: 6px 16px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 20px; }
    #hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; margin-bottom: 16px; }
    #hero h1 em { color: #a4c9a9; font-style: normal; }
    #hero p { font-size: 1.125rem; line-height: 1.7; color: rgba(255,255,255,0.8); max-width: 620px; margin-bottom: 32px; }
    .hero-stats { display: flex; gap: 32px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 24px; margin-top: 12px; }
    .hero-stat { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
    .hero-stat strong { color: white; display: block; font-size: 1.125rem; }
    #featured { background: #2a3d1a; padding: 80px 0; }
    #featured .section-label { color: rgba(255,255,255,0.5); }
    #featured .section-heading { color: white; }
    .featured-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 48px; display: flex; gap: 48px; align-items: flex-start; }
    .featured-main { flex: 1; }
    .featured-aside { flex-shrink: 0; min-width: 220px; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 40px; }
    .featured-label { display: inline-block; background: var(--amber); color: white; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: 16px; }
    .featured-name { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); color: white; line-height: 1.15; margin-bottom: 8px; }
    .featured-nation { color: #a4c9a9; font-weight: 600; font-size: 0.9375rem; margin-bottom: 20px; }
    .featured-desc { color: rgba(255,255,255,0.8); font-size: 1.0625rem; line-height: 1.7; max-width: 560px; }
    .aside-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
    .aside-value { color: white; font-size: 0.9375rem; margin-bottom: 20px; line-height: 1.5; }
    .search-bar { margin-bottom: 24px; position: relative; }
    .search-bar input { width: 100%; padding: 14px 20px 14px 48px; border: 2px solid #e8e2d8; border-radius: 100px; font-family: var(--font-body); font-size: 1rem; color: var(--pine); outline: none; background: white; transition: border-color 0.2s; }
    .search-bar input:focus { border-color: var(--sage); }
    .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1.125rem; pointer-events: none; }
    .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
    .filter-btn { background: white; border: 2px solid #e8e2d8; color: var(--pine); padding: 8px 20px; border-radius: 100px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .filter-btn:hover { border-color: var(--sage); color: var(--sage); }
    .filter-btn.active { background: var(--pine); border-color: var(--pine); color: white; }
    #directory { padding: 80px 0; }
    .biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
    .biz-card { background: white; border-radius: 16px; padding: 28px; border: 1px solid #e8e2d8; transition: box-shadow 0.2s, transform 0.2s; }
    .biz-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .biz-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
    .biz-icon { font-size: 2rem; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--cream); border-radius: 12px; flex-shrink: 0; }
    .biz-badge { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; }
    .badge-food { background: #fef3c7; color: #92400e; } .badge-art { background: #fce7f3; color: #831843; }
    .badge-health { background: #dcfce7; color: #14532d; } .badge-tech { background: #dbeafe; color: #1e3a8a; }
    .badge-retail { background: #f3e8ff; color: #581c87; } .badge-services { background: #e0f2fe; color: #0c4a6e; }
    .biz-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--pine); margin-bottom: 4px; }
    .biz-nation { font-size: 0.8125rem; color: var(--sage); font-weight: 600; margin-bottom: 12px; }
    .biz-desc { font-size: 0.875rem; line-height: 1.6; color: #4b5563; margin-bottom: 16px; }
    .biz-footer { border-top: 1px solid #f0ebe3; padding-top: 12px; font-size: 0.8125rem; color: #6b7280; }
  </style>
</head>
<body>

<section id="hero">
    <div class="container">
      <div class="hero-tag">Indigenous Business Directory</div>
      <h1>Native-Owned Businesses<br><em>Rooted in Community</em></h1>
      <p>A directory of Indigenous-owned businesses from across Minnesota and the Great Lakes region. Search by name, filter by category, and discover the entrepreneurs building Native economic sovereignty today.</p>
      <div class="hero-stats">
        <div class="hero-stat"><strong>12 Businesses</strong>Featured this season</div>
        <div class="hero-stat"><strong>6 Categories</strong>Food, Art, Health & more</div>
        <div class="hero-stat"><strong>Minnesota Focus</strong>11 Tribal nations</div>
      </div>
    </div>
  </section>

<section id="featured">
    <div class="container">
      <p class="section-label">Spotlight</p>
      <h2 class="section-heading">Featured Business</h2>
      <div class="featured-card">
        <div class="featured-main">
          <span class="featured-label">Featured</span>
          <p class="featured-name">Bizhiw Photography</p>
          <p class="featured-nation">Ojibwe • Leech Lake Band of Ojibwe</p>
          <p class="featured-desc">Editorial and documentary photography rooted in Indigenous storytelling. Bizhiw Photography captures ceremonies, powwows, family portraits, and community life with deep cultural respect and artistic precision. Licensed by Tribal nations across the Great Lakes for official and archival use.</p>
        </div>
        <div class="featured-aside">
          <p class="aside-label">Category</p><p class="aside-value">Art & Photography</p>
          <p class="aside-label">Location</p><p class="aside-value">Cass Lake, MN</p>
          <p class="aside-label">Website</p><p class="aside-value">bizhiwphoto.com</p>
        </div>
      </div>
    </div>
  </section>

<section id="directory">
    <div class="container">
      <p class="section-label">Directory</p>
      <h2 class="section-heading">Indigenous-Owned Businesses</h2>
      <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" id="searchInput" placeholder="Search businesses, nations, categories...">
      </div>
      <div class="filter-bar">
        <button class="filter-btn active" data-filter="all">All</button>
        <button class="filter-btn" data-filter="food">Food</button>
        <button class="filter-btn" data-filter="art">Art</button>
        <button class="filter-btn" data-filter="health">Health</button>
        <button class="filter-btn" data-filter="tech">Tech</button>
        <button class="filter-btn" data-filter="retail">Retail</button>
        <button class="filter-btn" data-filter="services">Services</button>
      </div>
      <div class="biz-grid" id="bizGrid">
        <div class="biz-card" data-category="food"><div class="biz-header"><div class="biz-icon">🌽</div><span class="biz-badge badge-food">Food</span></div><p class="biz-name">Niimi Catering</p><p class="biz-nation">Ojibwe • Mille Lacs Band</p><p class="biz-desc">Traditional and contemporary Native cuisine for events, celebrations, and community gatherings. Specializing in wild rice, fry bread, and seasonal harvest menus.</p><div class="biz-footer">Onamia, MN • niimicatering.com</div></div>
        <div class="biz-card" data-category="art"><div class="biz-header"><div class="biz-icon">🪶</div><span class="biz-badge badge-art">Art</span></div><p class="biz-name">Cedar & Sage Studio</p><p class="biz-nation">Dakota • Lower Sioux Community</p><p class="biz-desc">Beadwork, quillwork, and regalia design rooted in Dakota tradition. Custom commissions and readymade pieces available for purchase and ceremony.</p><div class="biz-footer">Morton, MN • cedarandsage.art</div></div>
        <div class="biz-card" data-category="health"><div class="biz-header"><div class="biz-icon">🌿</div><span class="biz-badge badge-health">Health</span></div><p class="biz-name">Mashkiig Wellness</p><p class="biz-nation">Ojibwe • Red Lake Nation</p><p class="biz-desc">Plant-based wellness products made with foraged Northern Minnesota herbs. Teas, tinctures, salves, and educational workshops on Anishinaabe plant knowledge.</p><div class="biz-footer">Red Lake, MN • mashkiigwellness.com</div></div>
        <div class="biz-card" data-category="tech"><div class="biz-header"><div class="biz-icon">💻</div><span class="biz-badge badge-tech">Tech</span></div><p class="biz-name">Waabizheshi Digital</p><p class="biz-nation">Ojibwe • White Earth Nation</p><p class="biz-desc">Web design and app development studio serving Tribal governments, nonprofits, and Indigenous entrepreneurs. Focused on digital sovereignty and accessible technology.</p><div class="biz-footer">Detroit Lakes, MN • waabizheshi.dev</div></div>
        <div class="biz-card" data-category="retail"><div class="biz-header"><div class="biz-icon">🧺</div><span class="biz-badge badge-retail">Retail</span></div><p class="biz-name">Giizhibaa Goods</p><p class="biz-nation">Dakota • Prairie Island Indian Community</p><p class="biz-desc">Online shop featuring Native-designed apparel, accessories, and home goods. All designs are created by Tribal members and licensed with community consent.</p><div class="biz-footer">Welch, MN • giizhibaagoods.com</div></div>
        <div class="biz-card" data-category="services"><div class="biz-header"><div class="biz-icon">📋</div><span class="biz-badge badge-services">Services</span></div><p class="biz-name">Akiing Consulting</p><p class="biz-nation">Ojibwe • Fond du Lac Band</p><p class="biz-desc">Grant writing, strategic planning, and community development consulting for Tribal governments and Native-led nonprofits. Over 15 years of experience in Indian Country.</p><div class="biz-footer">Cloquet, MN • akiingconsulting.com</div></div>
      </div>
    </div>
  </section>

Live Preview