Complete-Web-Development/20_Creating_Navigation_Menu.html at main · mistryvraj1793/Complete-Web-Development · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
	<title> Navigation Menu in HTML</title>
	<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&display=swap" rel="stylesheet">
</head>
<style>
	.navbar{
		background-color: black;
		border-radius: 24px;
	}
	.navbar ul{
		overflow: auto;
	}
	.navbar li{
		float:left;
		list-style: none;
		margin: 13px 21px;

	}
	.navbar li a{
		padding: 3px 3px;
		text-decoration: none;
		color: white;
	}
	.navbar li a:hover {
		color: black;
		background-color: white;
		border-radius: 7px;
		font-family: 'Baloo Bhai 2', cursive;
	}
	.search{
		float: right;
		color: white;
		padding: 11px 35px;

	}
	.navbar input{
		border: 2px solid black;
		border-radius: 14px;
		padding: 3px 17px;
		width:129px;
	}

</style>
<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="name" name="search" placeholder=" Search"> </div>
			</ul>

		</nav>
	</header>
</body>
</html>