Navbar-Builder — Navigationsleisten visuell erstellen

<nav class="navbar">
  <div class="nav-container">
    <a href="/" class="nav-logo">MyBrand</a>
    <div class="nav-menu">
      <a href="#" class="nav-link">Home</a>
      <a href="#about" class="nav-link">About</a>
      <a href="#services" class="nav-link">Services</a>
      <a href="#contact" class="nav-link">Contact</a>
    </div>
  </div>
</nav>

<style>
.navbar {
  background-color: #1F2937;
  color: #F9FAFB;
  padding: 1rem 1.5rem;
}
.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-size: 1.25rem;
  font-weight: bold;
  color: #F9FAFB;
  text-decoration: none;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-link {
  color: #F9FAFB;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link:hover {
  color: #3B82F6;
}
</style>