How to Create a navbar Using [HTML/CSS] Posted by Yahya Benlachheb on June 10, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WebSite</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <header> <div class="menu"> <img src="logo.png" alt="logo" class="logo"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> </body> </html> CSS CODE body{ margin: 0; padding: 0; font-family: calibri; background: #292929; } header{ background: #03A9F4; width: 100%; } header{ content: ''; display: table; clear: both; } .menu{ width: 900px; margin: 0 auto; } .logo{ width: 130px; float: left; padding: 8px; } nav{ float: right; } nav ul{ padding: 0; margin: 0; } nav ul li{ list-style: none; float: left; margin-left: 75px; padding: 12px 0; position: relative; } nav ul li a{ text-decoration: none; color: #444; font-weight: bold; } nav a::before{ content: ''; display: block; height: 5px; width: 0%; background-color: #444; top: 0; position: absolute; transition: all ease-in-out 250ms; } nav a:hover::before{ width: 100%; } Comments userlgJuly 19, 2019 at 3:06 AMGood brother. Nice jobReplyDeleteRepliesReplyMy blogSeptember 11, 2020 at 4:22 AMNice ReplyDeleteRepliesReplyAdd commentLoad more... Post a Comment
Good brother. Nice job
ReplyDeleteNice
ReplyDelete