Navigation Demo

Build a four-page website:

• index.html
• about.html
• projects.html
• contact.html

Use the same navigation on every page. The only thing that changes is which link has the active class.

HTML Nav Snippet

Paste this navigation into each page. Move class="active" to match the current page.

<link rel="stylesheet" href="css/styles.css" />

<nav class="main-nav">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

CSS Starter

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #eef2f7;
  padding-top: 80px;
}

.main-nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.75rem;
  background: #f9fbfd;
  border-bottom: 1px solid #cfd8e3;
}

.main-nav ul {
  display: flex;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: #1f2937;
  font-weight: 700;
  text-decoration: none;
}

.main-nav a.active {
  color: #b42318;
  border-bottom: 2px solid currentColor;
}

Check Your Work

Every page should have the same navigation order, the same file paths, and exactly one active link.