Welcome to a tutorial on creating a basic navbar using CSS! In this video, we will go over the steps to create a simple navigation bar that you can use on your own website. We will cover the HTML structure of the navbar, as well as the CSS styles that give it its look and feel. By the end of this tutorial, you will have a solid understanding of how to create a navbar using CSS, and you will be able to customize it to fit your own unique style. Whether you're a beginner looking to learn the basics of web development, or a more experienced developer looking to brush up on your skills, this video is for you. So let's get started!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="navbar.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Open+Sans" rel="stylesheet">
</head>
<header>
<h1>CODE<span>INSTINCT</span></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolios</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<body>
<img src="images/BasicNavbar.png">
</body>
</html>
body,html{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 70px;
background-color: #282828;
}
h1{
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: 'Alfa Slab One', cursive;
color: #39ca74;
}
span{
color: #ffffff;
}
ul{
width: auto;
float: right;
margin-top: 8px;
}
li{
display: inline-block;
padding: 15px 30px;
}
a{
text-align: center;
color: #ffffff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 1.2vw;
}
a:hover{
color: #F0c330;
transition: 0.5s;
}
img{
width: 100%;
margin-top: -16px;
}
Watch Full Video Tutorial Here:
Comments
Post a Comment