Footer — bottom of the page

Multi-column footer with links, social icons, and copyright. The pattern every website uses.

style.css v3.1

style.css — the CSS rules

.footer {
  background: #1a1a1a;
  color: #999;
  padding: 3rem 1.5rem 1.5rem;
  margin-top: 3rem;
}

.footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.footer .footer-col h4 {
  color: white;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.8rem;
}

.footer .footer-col ul {
  list-style: none;
  padding: 0;
}

.footer .footer-col ul li {
  margin-bottom: 0.4rem;
}

.footer .footer-col ul li a {
  color: #999;
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s;
}

.footer .footer-col ul li a:hover {
  color: #a0c000;
}

.footer .footer-brand p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.footer .footer-bottom {
  border-top: 1px solid #333;
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: #666;
}

index.html — the HTML structure (what the CSS targets)

<footer class="footer">
  <div class="footer-grid">
    <div class="footer-col footer-brand">
      <h4>OpenBenchML</h4>
      <p>Benchmark, compare, and deploy ML models in the browser.
      Open source. Built with FastAPI + Jinja2 + scikit-learn.</p>
    </div>
    <div class="footer-col">
      <h4>Product</h4>
      <ul>
        <li><a href="#">Models</a></li>
        <li><a href="#">Datasets</a></li>
        <li><a href="#">Notebook</a></li>
        <li><a href="#">Leaderboard</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Learn</h4>
      <ul>
        <li><a href="#">Concepts</a></li>
        <li><a href="#">Project Course</a></li>
        <li><a href="#">Labs</a></li>
        <li><a href="#">Docs</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Company</h4>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">GitHub</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    &copy; 2024 OpenBenchML. All rights reserved. Built with &#10084; by the community.
  </div>
</footer>

Live preview updates as you type

🧠 How it works

The footer has 4 columns: brand (wider, 2fr) + 3 link columns (1fr each). grid-template-columns: 2fr 1fr 1fr 1fr — the brand column is twice as wide. max-width: 1000px + margin: 0 auto — centers the footer content on wide screens. Dark background (#1a1a1a) + grey text (#999) — standard footer look. Links are grey, turn green on hover — branded micro-interaction. footer-bottom — separated by a top border, centered, smaller text. Holds the copyright. text-transform: uppercase + letter-spacing on h4 — makes the column headers look like labels.

✏️ Try these changes

Change grid-template-columns from 2fr 1fr 1fr 1fr to 1fr 1fr 1fr 1fr
→ all columns equal width
Change the footer background from #1a1a1a to #2a1a3a
→ footer becomes dark purple
Change the link hover color from #a0c000 to #58a6ff
→ links turn blue on hover
Add a 5th column: <div class="footer-col"><h4>Social</h4>...</div>
→ 5-column footer

← Previous lab

Badges + tags — small status labels

Next lab →

Tabs — switch between panels