<div id="home-wrapper">
<header class="hero" id="header">
<div class="navbar" id="navbar">
<h1 class="logo">Logo</h1>
<nav class="nav-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
</div>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
#navbar {
padding: 1rem;
background: #0391dd;
color: #fff;
}
#navbar nav ul li{
margin: 0 1rem;
}
#navbar nav ul li a {
padding: 0.5rem 0.75rem;
}
#navbar nav ul li a:hover {
background: #000;
color: #fff;
border-radius: 5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.