<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<style>
.navbar {
background-color: rgb(4, 1, 36);
border-radius: 4px;
}
.navbar ul{
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
margin: 10px 20px;
}
.navbar li a{
padding: 1px 4px;
text-decoration: none;
color: white;
}
.navbar li a:hover{
color:yellow ;
}
.search{
float: right;
color: white;
padding: 6px 34px;
}
.navbar input{
border: solid black;
border-radius: 16px;
padding: 3px 20px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">services</a></li>
<li><a href="#">Contact</a></li>
<div class="search">
<input type="text" name="search" id="search" placeholder="search this web">
</div>
</ul>
</nav>
</header>
</body>
</html>
