You can create a navbar with multiple colors using HTML and CSS by applying different styles to different sections of the navbar. Here's a simple example:
**HTML:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Multi-color Navbar</title>
</head>
<body>
<div class="navbar">
<div class="brand">
<a href="#">YourLogo</a>
</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>
</div>
</body>
</html>
**CSS (styles.css):**
body {
margin: 0;
padding: 0;
}
.navbar {
background: linear-gradient(to right, #3498db, #e74c3c); /* Gradient background */
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand a {
color: #fff;
text-decoration: none;
font-size: 24px;
font-weight: bold;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-right: 20px;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
/* Change link color on hover */
.nav-links a:hover {
color: #ffd700;
}
In this example, the navbar background is created using a linear gradient, transitioning from one color to another (`#3498db` to `#e74c3c`). The brand section (`brand` class) and the navigation links (`nav-links` class) have different styles, and you can customize these styles as per your design requirements.
Feel free to modify the colors, fonts, sizes, and other styles to match your desired multi-color navbar design.