CSS Challenge #1 | Complete HTML CSS JavaScript Course

Welcome to CSS Challenge #1. Are you ready to put your CSS skills to the test? In this challenge, your task is to create a navigation bar using CSS display properties-specifically, display: inline, display: block, or display: inline-block.
Share your code in the comments below or a screenshot of your navigation bar on Instagram.
If you like this video, don't forget to Subscribe 🙂.
✔ Follow Code Traversal on Instagram :
/ codetraversal
✔ Follow Code Traversal on GitHub :
github.com/Cod...
✨Tags✨
css, css tutorial, css tutorial for beginners, css tutorial for beginners in hindi, css full course in hindi, css full course, css challenges, css challenge 1, css challenge, css display property
✨Hashtags✨
#html #csstutorial #css

[@Yardss]

#challenge1solution


Simple Navigation Bar

*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
}
nav{
width: 100%;
background-color: rgba(196, 131, 35, 0.815);
color: rgb(235, 235, 235);
}
ul{
display: flex;
list-style-type: none;
justify-content: center;
}

li{
font-weight: 600;
font-family: cursive;
padding: 10px 33px;
font-size: 18px;
cursor: pointer;
margin: 10px 0px;
transition: all 0.2s ease;
border-radius: 40px;
}
li:hover{
scale: 1.1;
background-color: rgba(255, 72, 0, 0.685);
}



Home
About
Services
Contact
Login
Register

[@codetraversal]

👍

[@Er.Tabrej]

Your Voice is so sweet
Which year in college mam...

[@FiverrSeller-q5y]

Task Completed
>>>
*{
padding: 0;
margin: 0;
}
nav{
width: 100%;
background-color: #023347;
}
ul{
display: flex;
justify-content: center;
}
li{
margin: 20px;
list-style-type: none;
font-family: Arial;
font-weight: bold;
cursor: pointer;
color: #ffffff;
transition: 0.2s;
}
li:hover{
color: rgb(255, 221, 0);
}
>>>>>>>>>>



Navbar


Home
About
Service
Contact
Register
Login