Merge pull request #302 from pranusri1903/main

Update Navs
07sumit1002 · Oct 15, 2024 · cc83e18 · cc83e18
2 parents 2e89b5f + 0625e13
commit cc83e18
Show file tree

Hide file tree

Showing 12 changed files with 310 additions and 82 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/about.html b/about.html
@@ -3,29 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>About Us - CabRental</title>
     <link
       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" />
+        <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html"><img src="img/cabz.png.png" alt="Logo" class="navbar-logo" /></a>
     </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>
+          <li><a href="ride.html">Ride</a></li>
+          <li><a href="serv.html">Services</a></li>
+          <li><a href="#about.html">About</a></li>
+          <li><a href="review.html">Reviews</a></li>
+          <li><a href="contactus.html">Contact</a></li>
+          <li>
+            <div class="header-btn">
+              <a href="login.html" class="sign-up">Login</a>
+          </div>
+          </li>
+          <li>
+            <div class="theme-switch" id="theme-switch"></div>
+          </li>
       </ul>
   </nav>
 
+
     <style>
+      .logo img {
+            height: 60px;
+            padding-right: 40px;
+            padding-left: 40px;
+        }
       body {
         font-family: "Poppins", sans-serif;
         margin: 0;
         padding: 0;
-        background-color: #f9f9f9;
+        background-color: #eeeff1;
         color: #333;
         line-height: 1.6;
       }
@@ -34,25 +54,37 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        background-color: #fff;
+        background-color: #eeeff1;
         padding: 20px;
         position: sticky;
         top: 0;
         z-index: 1000;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        height: 50px;
       }
 
       .navbar ul li a:hover {
         background-color: #8f6883;
         transform: scale(1.1);
       }
-
+      .header-btn .sign-up:hover {
+            background-color: red;
+            border-color: red;
+        }
+        .header-btn .sign-up {
+            padding: 10px 20px;
+            background-color: #007bff;
+            border-color: #007bff;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 5px;
+        }
       .navbar ul {
         display: flex;
         justify-content: space-around; /* Spacing between links */
         list-style: none;
         padding: 10px; /* Padding for the group of links */
-        background-color: #e6e4e4; /* Background color for the navbar */
+        background-color: #eeeff1; /* Background color for the navbar */
     }
 
     .navbar ul li {

diff --git a/contactus.html b/contactus.html
@@ -3,6 +3,7 @@
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
+      <link rel="icon" href="img/logo1.png" type="image/png">
       <meta name="author" content="CodeHim">
       <title>Contact Us Page</title>
       <link rel="stylesheet" href="contactus.css">

diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/services.png b/img/services.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE-edge">
-    <meta name="viewprot" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Favicon -->
     <link rel="icon" href="img/logo1.png" type="image/png">
     <title>CabRental</title>
@@ -13,7 +13,6 @@
     <link rel="stylesheet" href="https://unpkg.com/swiper@11.1.4/swiper-bundle.min.css" />
     <!-- font awesome cdn link  -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <!-- custom css link -->
     <script src="https://kit.fontawesome.com/2815a7015d.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="style.css">
@@ -31,17 +30,18 @@
             justify-content: space-between;
             align-items: center;
             padding: 10px 20px;
-            background-color: #fff;
+            background-color: #eeeff1;
             box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
         }
 
         .logo img {
-            height: 50px;
+            height: 40px;
         }
 
         .navbar {
             display: flex;
             gap: 20px;
+            padding-top: 20px;
             list-style: none;
         }
 
@@ -59,13 +59,15 @@
         .header-btn .sign-up {
             padding: 10px 20px;
             background-color: #007bff;
+            border-color: #007bff;
             color: #fff;
             text-decoration: none;
             border-radius: 5px;
         }
 
         .header-btn .sign-up:hover {
-            background-color: #0056b3;
+            background-color: red;
+            border-color: red;
         }
 
         /* Hide menu icon initially */
@@ -81,7 +83,6 @@
                 left: -250px;
                 width: 250px;
                 height: 100%;
-                background-color: #fff;
                 flex-direction: column;
                 align-items: start;
                 justify-content: flex-start;
@@ -475,8 +476,8 @@
 <body>
     <!-- Header -->
     <header>
-        <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
-        <a href="#" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
+        <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
         <div class="bx bx-menu" id="menu-icon"></div>
         <ul class="navbar">
             <li><a href="index.html">Home</a></li>

diff --git a/login.html b/login.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>Login</title>
     <link rel="stylesheet" href="login.css"/>
 </head>
@@ -21,7 +22,7 @@ <h1 class="animated-heading">Cab Rental<span class="blinking-cursor">|</span></h
                 <button type="submit" class="submit-button">Login</button>
             </form>
             <p class="already-signed-up">
-                Not signed up? <a href="./signup.html"> Sign In</a>
+                Don't have an account? <a href="./signup.html"> Sign Up</a>
             </p>
             <p class="forgot password">
                 Forgot Password? <a href="./forgot-password.html">Click Here</a>

diff --git a/review.html b/review.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>Cabrental Reviews</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
@@ -28,6 +29,35 @@
             color: #6d28d9;
         }
 
+        .navbar ul li:hover a {
+    background-color: #555;
+    transform: scale(1.2); /* Popup effect */
+}
+
+.navbar ul li:hover::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background-color: #00aced;
+    top: 100%;
+    left: 0;
+    transform: scaleX(1);
+    transition: all 0.3s ease;
+}
+
+.navbar ul li::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background-color: transparent;
+    top: 100%;
+    left: 0;
+    transform: scaleX(0);
+    transition: all 0.3s ease;
+}
+
         .card {
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
@@ -62,10 +92,10 @@
     <nav class="bg-white shadow-md">
         <div class="container mx-auto px-4 nav-container">
             <div class="flex items-center">
-                <img src="img/logo.png" alt="Logo" class="logo">
-                <div class="text-lg font-bold text-purple-800">
+                <a href="index.html"><img src="img/logo.png" alt="Logo" class="logo"></a>
+                <a href="index.html"><div class="text-lg font-bold text-purple-800">
                     Cabrental
-                </div>
+                </div></a>
             </div>
             <div class="nav-items">
                 <a href="index.html" class="text-gray-800 hover:text-purple-800">Home</a>

diff --git a/ride.html b/ride.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/logo1.png" type="image/png">
     <title>Cabshare</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
@@ -188,21 +189,108 @@
               font-size: 18px;
           }
 
-          header {
-              flex-direction: column;
-          }
-
-          .navbar {
-              flex-direction: column;
-              gap: 10px;
-          }
-
           .footer a {
               display: block;
               margin-bottom: 5px;
           }
         }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px;
+            background-color: #eeeff1;
+            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .logo img {
+            height: 40px;
+        }
+
+        .navbar {
+            display: flex;
+            gap: 20px;
+            padding-top: 20px;
+            list-style: none;
+        }
+
+        .navbar li a {
+            text-decoration: none;
+            color: #333;
+            padding: 10px 15px;
+            transition: 0.3s ease;
+        }
+
+        .navbar li a:hover {
+            color: #007bff;
+        }
+
+        .header-btn .sign-up {
+            padding: 10px 20px;
+            background-color: #007bff;
+            border-color: #007bff;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 5px;
+        }
+
+        .header-btn .sign-up:hover {
+            background-color: red;
+            border-color: red;
+        }
+
+        /* Hide menu icon initially */
+        #menu-icon {
+            display: none;
+        }
+
+        /* Responsive styles for mobile sidebar */
+        @media (max-width: 600px) {
+            .navbar {
+                position: fixed;
+                top: 0;
+                left: -250px;
+                width: 250px;
+                height: 100%;
+                flex-direction: column;
+                align-items: start;
+                justify-content: flex-start;
+                padding: 20px;
+                transition: 0.3s;
+                z-index: 1000;
+            }
+
+            .navbar.active {
+                left: 0;
+            }
+
+            .navbar li {
+                width: 100%;
+                margin: 20px 0;
+            }
+
+            .navbar li a {
+                display: block;
+                width: 100%;
+                text-align: left;
+                padding: 10px 15px;
+            }
 
+            #menu-icon {
+                display: block;
+                font-size: 28px;
+                cursor: pointer;
+                position: absolute;
+                right: 20px;
+            }
+
+            .close-btn {
+                font-size: 28px;
+                cursor: pointer;
+                margin-left: auto;
+                margin-bottom: 20px;
+            }
+        }
 
     </style>
 </head>
@@ -217,7 +305,8 @@
     <script src="main.js"></script>
     <!-- Header -->
     <header style="display: flex !important;">
-        <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="index.html" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
         <div class="bx bx-menu" id="menu-icon"></div>
         <ul class="navbar">
             <li><a href="index.html">Home</a></li>