Building The Navbar- Summary:
As we wrap up this tutorial, you now have the key building blocks to create an impressive navbar for your website. We've provided you with the HTML and CSS code you need for quick reference, making it easier than ever to implement a sleek and functional navigation bar. Feel free to revisit the code snippets as needed and experiment to make your navbar uniquely yours. Thank you for joining us, and happy coding!
Building Header- HTML Code
< header class="header" >
< div class="logo" >
< div class="logo-icon" src="images/dog house.png" > < /div >
< h1 class="logo-text">Dog Shelter < /h1 >
< /div >
< nav class="nav-links" >
< a class="nav-link" href="about.html" > About < / a >
< a class="nav-link" href="get-involved.html" > Get Involved < / a >
< a class="nav-link" href="adopt.html" > Adopt < / a >
< a class="nav-link" href="contact.html" > Contact < / a >
< /nav >
< / header >
Building Header- CSS Code
.header {
background-color: #333;
color: white;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-icon img {
width: 60px;
font-size: 36px;
margin-right: 10px;
line-height: 36px;
vertical-align: middle;
}
.logo-text {
font-size: 24px;
vertical-align: middle;
padding:10px;
}
.nav-links {
display: flex;
gap: 0px;
margin-right: 100px;
}
.nav-link {
text-decoration: none;
color: white;
font-size: 18px;
padding:14px 16px;
display:block;
transition: color 0.3s;
}
.nav-link:hover {
color: #ddd;
background-color:rgb(33, 34, 34);
}
@media (max-width: 768px) {
.header {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.nav-links {
display:flex;
justify-content: space-around;
align-items: center;
width:100%;
height:45px;
background-color: #333;
margin:0 auto;
margin-bottom: -20px;
border:1px solid rgb(146, 145, 145);
}
.nav-link {
display:block;
cursor: pointer;
padding-bottom:20px;
}
.nav-links a:hover {
display:block;
cursor: pointer;
background-color:rgb(250, 180, 49);
color:black;
padding:11px;
margin:0;
width:24%;
}
Now is your turn! Remember: "Practice makes perfect"!
Please Do Not Copy & Paste the above code as it will not display. Please type in the above code to practice.