diff --git a/Responsive Navbar/Responsive_Navbar.css b/Responsive Navbar/Responsive_Navbar.css new file mode 100644 index 0000000..0262fad --- /dev/null +++ b/Responsive Navbar/Responsive_Navbar.css @@ -0,0 +1,98 @@ +body { + background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR_rULCgxJV4_821sMNFp56GPMInvkG3zW_14WQ6z0_BPfY1pkaHrJ4stu6"); + background-size: 100vw 100vh; +} +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Montserrat',sans-serif; +} +nav{ + background: #151515; + padding: 5px 40px; +} +nav ul{ + list-style: none; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} +nav ul li{ + padding: 15px 0; + cursor: pointer; +} +nav ul li.items{ + position: relative; + width: auto; + margin: 0 16px; + text-align: center; + order: 3; +} +nav ul li.items:after{ + position: absolute; + content: ''; + left: 0; + bottom: 5px; + height: 2px; + width: 100%; + background: #33ffff; + opacity: 0; + transition: all 0.2s linear; +} +nav ul li.items:hover:after{ + opacity: 1; + bottom: 8px; +} +nav ul li.logo{ + flex: 1; + color: white; + font-size: 23px; + font-weight: 600; + cursor: default; + user-select: none; +} +nav ul li a{ + color: white; + font-size: 18px; + text-decoration: none; + transition: .4s; +} +nav ul li:hover a{ + color: cyan; +} +nav ul li i{ + font-size: 23px; +} +nav ul li.btn{ + display: none; +} +nav ul li.btn.hide i:before{ + content: '\f00d'; +} +@media all and (max-width: 900px){ + nav{ + padding: 5px 30px; + } + nav ul li.items{ + width: 100%; + display: none; + } + nav ul li.items.show{ + display: block; + } + nav ul li.btn{ + display: block; + } + nav ul li.items:hover{ + border-radius: 5px; + box-shadow: inset 0 0 5px #33ffff, + inset 0 0 10px #66ffff; + } + nav ul li.items:hover:after{ + opacity: 0; + } +} +/* Created by Sahil Verma*/ \ No newline at end of file diff --git a/Responsive Navbar/Responsive_Navbar.html b/Responsive Navbar/Responsive_Navbar.html new file mode 100644 index 0000000..7be3c04 --- /dev/null +++ b/Responsive Navbar/Responsive_Navbar.html @@ -0,0 +1,36 @@ + + + + + + + Responsive Navigation Bar + + + + + + + + + +