🧭 Navigation Bars

<nav style="display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #eee;">
  <div style="font-weight:700;font-size:1.1rem;">Brand</div>
  <div style="display:flex;gap:24px;font-size:.88rem;">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

<nav style="display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;">
  <div style="font-weight:700;font-size:1.1rem;">Logo</div>
  <div style="display:flex;gap:20px;align-items:center;">
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Blog</a>
    <button style="padding:8px 20px;background:#2a1f1a;color:#faf6f0;border:none;border-radius:50px;font-size:.82rem;font-weight:600;">Sign Up</button>
  </div>
</nav>

<nav style="display:flex;justify-content:center;align-items:center;padding:16px 24px;background:#fff;position:relative;">
  <div style="position:absolute;left:24px;font-weight:700;font-size:1.1rem;">Brand</div>
  <div style="display:flex;gap:28px;font-size:.88rem;">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </div>
  <div style="position:absolute;right:24px;">
    <a href="#">Login</a>
  </div>
</nav>

<nav style="display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#fff;gap:16px;">
  <div style="font-weight:700;font-size:1.1rem;">Brand</div>
  <div style="display:flex;gap:20px;font-size:.88rem;">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
  <input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:7px 14px;border:1.5px solid #ddd;border-radius:50px;font-size:.82rem;">
  <div style="width:32px;height:32px;border-radius:50%;background:#e8ddd5;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;">JD</div>
</nav>

<nav style="display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:transparent;position:absolute;top:0;left:0;right:0;z-index:10;">
  <div style="font-weight:700;font-size:1.1rem;color:#fff;">Brand</div>
  <div style="display:flex;gap:24px;font-size:.88rem;color:rgba(255,255,255,.7);">
    <a href="#" style="color:rgba(255,255,255,.7);">Home</a>
    <a href="#" style="color:rgba(255,255,255,.7);">About</a>
    <a href="#" style="color:rgba(255,255,255,.7);">Services</a>
    <a href="#" style="color:#fff;font-weight:600;">Contact</a>
  </div>
</nav>

<nav style="display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#1a1a1a;">
  <div style="font-weight:700;font-size:1.1rem;color:#fff;">⚡ App</div>
  <div style="display:flex;gap:24px;font-size:.88rem;color:#999;">
    <a href="#">Dashboard</a>
    <a href="#">Projects</a>
    <a href="#">Team</a>
  </div>
  <div style="display:flex;gap:12px;align-items:center;">
    <span style="font-size:.82rem;color:#ccc;">John</span>
    <div style="width:30px;height:30px;border-radius:50%;background:#c0785a;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;">J</div>
  </div>
</nav>

<nav style="display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#fff;">
  <div style="font-weight:700;font-size:1.1rem;">Brand</div>
  <div style="display:flex;gap:6px;font-size:.82rem;">
    <a href="#" style="padding:6px 16px;background:#2a1f1a;color:#faf6f0;border-radius:50px;">Home</a>
    <a href="#" style="padding:6px 16px;border-radius:50px;">About</a>
    <a href="#" style="padding:6px 16px;border-radius:50px;">Work</a>
    <a href="#" style="padding:6px 16px;border-radius:50px;">Blog</a>
  </div>
  <a href="#" style="font-size:.82rem;color:#c0785a;font-weight:600;">Login →</a>
</nav>

<nav style="display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border:2px solid #2a1f1a;">
  <div style="font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:1px;">Studio</div>
  <div style="display:flex;gap:24px;font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;">
    <a href="#">Work</a>
    <a href="#">About</a>
    <a href="#">Journal</a>
  </div>
  <div style="display:flex;gap:8px;">
    <span style="width:8px;height:8px;border-radius:50%;background:#c0785a;display:inline-block;"></span>
    <span style="width:8px;height:8px;border-radius:50%;background:#2a1f1a;display:inline-block;"></span>
    <span style="width:8px;height:8px;border-radius:50%;background:#d4a574;display:inline-block;"></span>
  </div>
</nav>