Merge pull request #1799 from AnushkaChouhan25/newbranch

Modify About Us Page Navbar and Add Theme Toggle
PriyaGhosal · Nov 10, 2024 · 59a45da · 59a45da
2 parents c229726 + 8bdd52f
commit 59a45da
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 30 deletions.
diff --git a/about.css b/about.css
@@ -112,7 +112,7 @@ nav {
 
 .btn-primary {
     display: inline-block;
-    background: linear-gradient(90deg, #007BFF, #00BFFF);
+    background: linear-gradient(90deg, #121417, #1b2427);
     color: #fff;
     padding: 10px 20px;
     border: 2px solid transparent;
@@ -135,7 +135,7 @@ nav {
 
 .btn-primary:active {
     transform: scale(1) translateY(0);
-    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
+    box-shadow: 0 4px 8px rgba(11, 12, 12, 0.2);
 }
 
 .btn-primary::after {
@@ -212,6 +212,7 @@ nav {
     position: relative;
 }
 
+
 .content-container::before {
     content: '';
     position: absolute;

diff --git a/about.html b/about.html
@@ -27,15 +27,7 @@
           }
 
         </style>  
-    </head>
-
-
-
-
-    <link rel="stylesheet" href= "style.css" />
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
-</head>
+    </head>   
 
 <body>
     <!-- Preloader -->
@@ -179,7 +171,7 @@
 
     </script>
 
-    <header class="main-head" style="background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000000;  border-radius: 8px;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
+    <header class="main-head" style="background-color: #181818; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000000;  border-radius: 8px;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
   <nav >
     <div class="logo">
       <img src="img/logo.png" id="logo-web">
@@ -188,7 +180,17 @@ <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
 
     <!-- Hamburger button for mobile -->
     <button class="hamburger" id="hamburger">☰</button>
-
+<style>
+    nav ul {
+    display: flex;
+    flex-direction: row;
+    width: 75%;
+    justify-content: space-evenly;
+    align-items: center;
+    list-style-type: none;
+    padding: 0;
+  }
+</style>
     <ul id="nav-list">
       <!-- Close button for dropdown -->
       <span class="dropdown-close-btn" id="closeBtn">×</span>
@@ -254,7 +256,7 @@ <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
             logo.style.transform = "rotateY(0) scale(1)";
         });
     </script>
-    <section class="about">
+    <section class="about" id="About">
         <div class="container">
             <h1>About BuddyTrail</h1>
 
@@ -333,7 +335,7 @@ <h3>PRIYA Ghosal</h3>
             display: flex;
             align-self: flex-end;
             justify-content: center;
-            margin: 56px auto 56px;
+            margin: 35px auto 56px;
 
         }
 
@@ -411,7 +413,7 @@ <h3>PRIYA Ghosal</h3>
         /* About Section */
         .about {
             background-color: #fff;
-            padding: 60px 0;
+            padding: 100px 0;
             text-align: center;
             position: relative;
         }
@@ -610,22 +612,19 @@ <h3>PRIYA Ghosal</h3>
         }
 
         /* Button Styling (If you use any) */
-        button {
-            padding: 12px 24px;
-            background-color: #007BFF;
-            color: #fff;
-            border: 2px solid transparent;
+
+            button {
+            background: #35424a;
+            color: #ffffff;
+            padding: 10px;
+            border: none;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
-        }
+            }
 
-        button:hover {
-            background-color: #0056b3;
-            transform: scale(1.05);
-            border-color: #fff;
-        }
+            button:hover {
+            background: #2c3e50;
+            }
 
         /* Responsive Design */
         @media (max-width: 768px) {
@@ -877,6 +876,8 @@ <h3>Follow Us <div class="underline"><span></span></div>
             });
         });
     </script>
+
+    <script src="script.js"></script>
 
 <script>
     // Show the button when the user scrolls down 100px from the top

diff --git a/style.css b/style.css
@@ -1032,7 +1032,7 @@ body {
   }
 }
 #About {
-  padding: 60px;
+  padding: 100px;
   background-color: #f5f5f500; /* Light grey background */
   color: #333; /* Dark grey text */
   font-family: "Helvetica", "Arial", sans-serif;
@@ -1042,6 +1042,7 @@ body {
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
 }
 
+
 #About h1 {
   font-size: 3.5em;
   color: #007bff; /* Blue color for the main heading */
@@ -1098,6 +1099,14 @@ body {
   color: #e0e0e0; /* Light grey text */
 }
 
+.dark-mode .core-values{
+  background-color: #121212; /* Dark background */
+  color: #e0e0e0; /* Light grey text */
+}
+.dark-mode .team{
+  background-color: #121212; /* Dark background */
+  color: #e0e0e0; /* Light grey text */
+}
 .light-mode #About h1 {
   color: #007bff; /* Blue color for the main heading in light mode */
 }