CSS Navigation Bar

<!DOCTYPE html>
<html>
<head>
	<title>CSS Navigation Bar</title>
	<script src="https://kit.fontawesome.com/6089a9a26e.js"></script>
</head>
<body>

<div class="wrapper">
	<h1>Navigation</h1>
	<div class="top_bar">
		<div class="top_bar_links">
		<ul>
			<li><a href="#">Home</li></a>
			<li><a href="#">Video</li></a>
			<li><a href="#">Images</li></a>
			<li><a href="#">News</li></a>
			<li><a href="#">About Us</li></a>
		</ul>	
		</div>
		<div class="icon">
			<a href="#"><i class="fab fa-facebook-square"></i></a>
			<a href="#"><i class="fab fa-instagram-square"></i></a>
			<a href="#"><i class="fab fa-twitter-square"></i></a>
			<a href="#"><i class="fas fa-rss-square"></i></a>
			<a href="#"><i class="fab fa-linkedin"></i></a>
		</div>	
	</div>
</div>

<style>
*{margin: 0; padding: 0;}

.wrapper h1
{
	font-family: sans-serif;
	font-size: 40px;
	font-variant: small-caps;
}

.top_bar
{ 
	width: 100%;
	height: 45px;
	background: maroon;
}

.top_bar_links ul
{
	float: left;
	overflow: hidden;
}

.top_bar_links ul li
{
	list-style: none;
	float: left;
	margin: 0px 10px;
}

.top_bar_links li a
{
	font-size: 20px;
	color: #fff;
	padding: 11px 12px;
	display: block;
	text-decoration: none;
}

.top_bar_links a:hover
{
	background: gray;

}

.icon a
{
	font-size: 30px;
	color: #fff;
	text-decoration: none;
	float: right;
	margin: 7px 8px;
}

.icon a:hover
{
	color: lime;
}
</style>

</body>
</html>
ICT With Shantha Bandara

CSS Navigation Bar

CSS Navigation Bar

No comments:

Post a Comment
