<!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: red;
}
.navbar li {
float: left;
list-style: none;
}
.navbar ul {
overflow: auto;
}
.navbar li a {
padding: 3px 3px;
margin: 3px 3px;
}
</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 Us</a></li>
</ul>
</nav>
</header>
</body>
</html>
<!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: black;
border-radius: 15px;
}
.navbar li{
float: left;
list-style: none;
margin: 10px;
}
.navbar ul{
overflow: auto;
margin: 5px 10px;
}
.navbar li a{
padding: 20px 5px;
color: white;
text-decoration: none;
}
.navbar li a:active{
color: red;
}
.navbar li a:hover{
background-color: yellow}
.search{
float: right;
color: white;
padding: 10px ;
}
.navbar input{
border-radius: 10px;
padding: 5px;
}
</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 Us</a></li>
<div class="search">
<input type="text" name="search " id="search" placeholder="Type here to search">
</div>
</ul>
</nav>
</header>
</body>
</html>
No comments:
Post a Comment