========================================
Exercise 3: HTML + CSS Responsive Navbar
========================================

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar">
    <div class="logo">NpmLab</div>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <button class="cta">Get Started</button>
  </nav>
  <div class="hero">
    <h1>Welcome to NpmLab</h1>
    <p>Your coding exercise library</p>
  </div>
</body>
</html>

/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background: #1a1a2e;
  color: white;
}
.logo { font-size: 22px; font-weight: bold; color: #e94560; }
.nav-links { list-style: none; display: flex; gap: 24px; }
.nav-links a { color: #ccc; text-decoration: none; font-size: 15px; }
.nav-links a:hover { color: white; }
.cta {
  background: #e94560;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}
.hero {
  text-align: center;
  padding: 100px 20px;
  background: #16213e;
  color: white;
}
.hero h1 { font-size: 48px; margin-bottom: 16px; }
.hero p { color: #aaa; font-size: 18px; }
