Redesign navbar of website to visible it clear

Anjaliavv51 · Oct 2, 2024 · eff3339 · eff3339
1 parent 75dcb3d
commit eff3339
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/style.css b/style.css
@@ -15,25 +15,29 @@ body {
 }
 
 .navbar {
-  padding: 8px 0px;
-  height: 60px;
-  transition: background-color 0.3s, backdrop-filter 0.3s, color 0.3s; /* Added transitions for smooth color change */
-  backdrop-filter: blur(0); /* Initially no blur */
+  padding: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1030;
+  padding: 15px 0;
+  background-color: rgba(245, 190, 190, 0.7);
+  backdrop-filter: blur(8px);
+  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
 }
 
 .navbar a {
   text-decoration: none;
-  color: white;
+  color: #333;
   font-size: 1.3rem;
+  transition: color 0.3s ease,border-bottom 0.3s ease;
 }
 /* Navbar link hover effect */
-.navbar a:hover,
-.navbar.scrolled a:hover {
-  color :#fff;
-  border-bottom: 1px solid #fff; /* Add bottom border on hover */
-  border-top: 1px solid #fff; /* Add top border on hover */
+.navbar a:hover{
+  color: #fff;
+  border-bottom: 1px solid #fff;
 }
-s
+
+
 .navbar.fixed-top {
   position: fixed; 
   top: 0;
@@ -42,7 +46,7 @@ s
 }
 .navbar.scrolled {
   background-color: rgb(176, 63, 63); 
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(15px);
   color: #fff;
 }
 .intro_container {