Enhanced the about page

updated the about.html
07sumit1002 · Oct 6, 2024 · 6d925ea · 6d925ea
1 parent 1e76d2e
commit 6d925ea
Showing 1 changed file with 94 additions and 31 deletions.
diff --git a/about.html b/about.html
@@ -8,6 +8,18 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
     />
+    <nav class="navbar">
+      <div class="logo">
+        <img src="img/cabz.png.png" alt="Logo" class="navbar-logo" />
+    </div>
+      <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="#company-overview">Company Overview</a></li>
+          <li><a href="#mission-vision">Mission & Vision</a></li>
+          <li><a href="#values-principles">Values & Principles</a></li>
+      </ul>
+  </nav>
+
     <style>
       body {
         font-family: "Poppins", sans-serif;
@@ -30,40 +42,48 @@
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       }
 
-      .navbar .logo {
-        font-size: 1.8em;
-        font-weight: bold;
-        color: #000000;
+      .navbar ul li a:hover {
+        background-color: #8f6883;
+        transform: scale(1.1);
       }
 
       .navbar ul {
         display: flex;
+        justify-content: space-around; /* Spacing between links */
         list-style: none;
-        margin: 0;
-        padding: 0;
-      }
+        padding: 10px; /* Padding for the group of links */
+        background-color: #e6e4e4; /* Background color for the navbar */
+    }
 
-      .navbar ul li {
-        margin: 0 15px;
-      }
+    .navbar ul li {
+        margin: 0 10px; /* Spacing between individual links */
+    }
 
-      .navbar ul li a {
-        color: #fff;
-        background-color: #db5454;
+    .navbar ul li a {
+        color: #0c0101;
+        background-color: #e6e4e4;
         text-decoration: none;
-        padding: 10px 20px;
         border-radius: 5px;
+        padding: 10px; /* Padding around each link */
         transition: background-color 0.3s, transform 0.3s;
-      }
+    }
+    .navbar ul li a:hover {
+      background-color: #f7f5f4;
+      transform: scale(1.1);
+      border-bottom: 3px solid black; /* Black underline on hover */
+  }
+
+    .navbar ul li a:active {
+      border-bottom: 3px solid black; /* Black underline when clicked */
+  }
 
-      .navbar ul li a:hover {
-        background-color: #ff0000;
-        transform: scale(1.1);
-      }
+    .navbar ul li a:focus {
+      border-bottom: 3px solid black; /* Black underline on focus */
+  }
 
       .hero {
         height: 60vh;
-        background: url("https://imgs.search.brave.com/-7bIPp-CEYjwrZR7VQetEh1seZnEwsW4eGvZMhzZtj4/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by9j/bG9zZS11cC1tZXRh/bGxpYy1jYXJfMjMt/MjE1MTExMzIwNi5q/cGc_c2l6ZT02MjYm/ZXh0PWpwZw")
+        background: url("https://autotrans.com/wp-content/uploads/2021/04/AdobeStock_95320493-2048x1367.jpeg")
           no-repeat center center/cover;
         display: flex;
         justify-content: center;
@@ -90,6 +110,8 @@
         position: relative;
         z-index: 1;
         text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+        color: #e64825;
+        text-align: center;
       }
 
       .container {
@@ -154,20 +176,40 @@
         color: #d32f2f;
         font-weight: bold;
       }
+      .container section {
+        margin-bottom: 50px; /* Space between sections */
+        padding: 20px;
+        border-radius: 5px;
+        border-top: 2px solid #ddd; /* Line between sections */
+      }
+
+      #company-overview {
+        background-color: #557d80;
+      }
+
+      #mission-vision {
+        background-color: #d4c6c6;
+      }
+      #company-overview p,
+      #mission-vision p {
+  font-weight: bold;
+  color: #080101;
+}
+
+.about-us-img {
+  width: 1200px; /* Adjust size as needed */
+  height: 400px;
+  border-radius: 10px; /* Optional: Adds rounded corners */
+  position: absolute; /* Positioning the image inside hero */
+  bottom: 10px; /* Adjusts position within the hero section */
+  box-shadow: 0 4px 10px rgba(12, 10, 10, 0.2); /* Adds a shadow for better visibility */
+  right: 80px;
+  z-index: -1; /* Ensures it stays above the overlay */
+}
     </style>
   </head>
   <body>
-    <!-- Navbar -->
-    <nav class="navbar">
-      <div class="logo">CabRental</div>
-      <ul>
-        <li><a href="index.html">Home</a></li>
-        <li><a href="#company-overview">Company Overview</a></li>
-        <li><a href="#mission-vision">Mission & Vision</a></li>
-        <li><a href="#values-principles">Values & Principles</a></li>
-      </ul>
-    </nav>
-
+
     <!-- Hero Section -->
     <section class="hero">
       <h1>About Us</h1>
@@ -242,5 +284,26 @@ <h2>Values and Principles</h2>
         </ul>
       </section>
     </div>
+    <!-- Footer -->
+<footer style="background-color: #333; color: #fff; padding: 20px 0;">
+  <div class="container">
+    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+      <div>
+        <h3 style="margin: 0;">CabRental</h3>
+        <p>&copy; 2024 CabRental. All rights reserved.</p>
+      </div>
+      <ul style="list-style: none; display: flex; padding: 0; margin: 0;">
+        <li style="margin-right: 15px;"><a href="#" style="color: #fff; text-decoration: none;">Privacy Policy</a></li>
+        <li style="margin-right: 15px;"><a href="#" style="color: #fff; text-decoration: none;">Terms of Service</a></li>
+        <li style="margin-right: 15px;"><a href="#" style="color: #fff; text-decoration: none;">Contact Us</a></li>
+      </ul>
+      <div>
+        <a href="#" style="color: #fff; margin-right: 10px;"><i class="bx bxl-facebook"></i></a>
+        <a href="#" style="color: #fff; margin-right: 10px;"><i class="bx bxl-twitter"></i></a>
+        <a href="#" style="color: #fff; margin-right: 10px;"><i class="bx bxl-instagram"></i></a>
+      </div>
+    </div>
+  </div>
+</footer>
   </body>
 </html>