From 76995f7c56cfe3b6508099f66c2b5a3cf8ac94c4 Mon Sep 17 00:00:00 2001 From: Dev_Nandini Date: Tue, 21 May 2024 18:48:07 +0530 Subject: [PATCH] updated navbar --- css/style.css | 107 ++++++++++++++++++++++++++------------------------ 1 file changed, 55 insertions(+), 52 deletions(-) diff --git a/css/style.css b/css/style.css index e7d97cc8..2b36a411 100644 --- a/css/style.css +++ b/css/style.css @@ -6,107 +6,107 @@ http://www.templatemo.com/tm-490-comila */ - -nav{ +nav { background: rgba(0, 0, 0, 0.7); height: 80px; width: 100%; - - position: relative; - + display: flex; + align-items: center; + justify-content: space-between; } -label.logo{ + +label.logo { color: white; font-size: 35px; line-height: 80px; - padding: 0 80px; + padding: 0 20px; font-weight: bold; + display: flex; + align-items: center; } -label.logo img{ + +label.logo img { height: 68px; width: 68px; - margin-top:-5px; + margin-top: -5px; border-radius: 450px; } -nav ul{ - float: right; + +nav ul { + display: flex; margin-right: 20px; - text-decoration: none; - transition-duration: 0.9s; + list-style: none; } -nav ul li{ + +nav ul li { display: inline-block; font-family: 'Josefin Sans', sans-serif; line-height: 80px; margin: 0 5px; - text-decoration: none; } nav ul li a { color: rgb(252, 250, 250); font-size: 15px; - padding: 10px 10px 10px 28px; + padding: 10px 28px; border-radius: 3px; - padding-right: 50px; text-transform: uppercase; transition: color 1s ease, transform 1s ease; text-decoration: none; } + i { font-size: larger; font-weight: 200; font-style: normal; } -nav ul li a:hover{ - color:#000000; - transform: scale(1.2); - - background: linear-gradient(to top left, #edfc4890 30%, #f4d01e 20%); - margin-left: 30px; - margin-right: 30px; - transform: translateY(20px); - - +nav ul li a:hover { + color: #000000; + transform: scale(1.2); + background: linear-gradient(to top left, #edfc4890 30%, #f4d01e 20%); + margin-left: 30px; + margin-right: 30px; + transform: translateY(20px); } -.navbar nav .checkbut{ +.navbar nav .checkbut { font-size: 30px; color: white; - float: right; - line-height: 80px; - margin-right: 40px; - /* cursor: pointer; */ display: none; } -#check{ + +#check { display: none; -} -.navbar .fas{ +} + +.navbar .fas { color: white; } -@media (max-width: 952px){ - label.logo img{ + +@media (max-width: 952px) { + label.logo img { height: 0px; width: 0px; } - label.logo{ + + label.logo { font-size: 15px; padding-left: 50px; } - nav ul li a{ + + nav ul li a { font-size: 16px; - text-decoration: none; - } } -@media (max-width: 858px){ - .navbar nav .checkbut{ + +@media (max-width: 858px) { + .navbar nav .checkbut { display: block; color: white; } - .navbar ul{ + .navbar ul { position: fixed; width: 100%; height: 100vh; @@ -117,30 +117,33 @@ nav ul li a:hover{ transition: all .5s; z-index: 2; } - .navbar nav ul li{ + + .navbar nav ul li { display: block; margin: 50px 0; line-height: 30px; - text-decoration: none; } - .navbar nav ul li a{ + + .navbar nav ul li a { font-size: 20px; - text-decoration: none; } - a:hover,a.active{ + + a:hover, a.active { background: none; color: #0082e6; } - #check:checked ~ ul{ + + #check:checked ~ ul { left: 0; - } } -.navbar section{ + +.navbar section { background: url(bg1.jpg) no-repeat; background-size: cover; height: 0px; } + /* Styles for small screens */ .containerr { margin: 0 auto;