From 8e4bca7ebbe420377da09735ed631a4bfb2922b9 Mon Sep 17 00:00:00 2001
From: Anushka Chouhan <anushkachouhan064@gmail.com>
Date: Wed, 30 Oct 2024 21:36:27 +0530
Subject: [PATCH] Update About Page

---
 about.css  |  5 +++--
 about.html | 47 ++++++++++++++++++++++++++++-------------------
 style.css  | 13 +++++++++++--
 3 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/about.css b/about.css
index 5c3fd873..3f662d3d 100644
--- 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
index e1f9d58b..25ad9824 100644
--- a/about.html
+++ b/about.html
@@ -10,7 +10,7 @@
     
     <link rel="icon" href="/icons/airplane.svg" />
     <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
-    <link rel="stylesheet" href= "style.css" />
+    <!-- <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>
 
@@ -134,7 +134,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">
@@ -143,7 +143,17 @@ <h1 id="logo"><a href="#home">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>
@@ -209,7 +219,7 @@ <h1 id="logo"><a href="#home">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>
 
@@ -288,7 +298,7 @@ <h3>PRIYA Ghosal</h3>
             display: flex;
             align-self: flex-end;
             justify-content: center;
-            margin: 56px auto 56px;
+            margin: 35px auto 56px;
 
         }
 
@@ -366,7 +376,7 @@ <h3>PRIYA Ghosal</h3>
         /* About Section */
         .about {
             background-color: #fff;
-            padding: 60px 0;
+            padding: 100px 0;
             text-align: center;
             position: relative;
         }
@@ -565,22 +575,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) {
@@ -760,6 +767,8 @@ <h3>Follow Us <div class="underline"><span></span></div>
             });
         });
     </script>
+    
+    <script src="script.js"></script>
 
 </body>
 
diff --git a/style.css b/style.css
index a6327258..73624efa 100644
--- a/style.css
+++ b/style.css
@@ -324,7 +324,7 @@ a {
   left: 0;
   right: 0;
   z-index: 5;
-  padding: 17px;s
+  padding: 17px;
   background-color: #00000087; /* Initially black */
   color: white;
   display: flex;
@@ -1031,7 +1031,7 @@ body {
   }
 }
 #About {
-  padding: 60px;
+  padding: 100px;
   background-color: #f5f5f500; /* Light grey background */
   color: #333; /* Dark grey text */
   font-family: "Helvetica", "Arial", sans-serif;
@@ -1041,6 +1041,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 */
@@ -1097,6 +1098,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 */
 }