From 80810d1803107e6256eeda9c1db407d9ee9b77b5 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Wed, 7 Aug 2024 02:58:46 +0530
Subject: [PATCH] fixed

---
 package.css   | 388 ++++++++++++++++++++++++++++++++++++++++++++++++++
 packages.html | 102 +++++++++----
 2 files changed, 465 insertions(+), 25 deletions(-)
 create mode 100644 package.css

diff --git a/package.css b/package.css
new file mode 100644
index 00000000..ac115c94
--- /dev/null
+++ b/package.css
@@ -0,0 +1,388 @@
+/* New NAvbar CSS Starts Here*/
+
+.nav-container {
+    margin-top: 0;
+    height: auto;
+    width: 200%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    z-index: 9999;
+  
+  }
+  
+  .newNav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    height: auto;
+    width: 100%;
+    padding: 0.4rem 0.5rem;
+    z-index: 10000;
+    transition: all 0.6s;
+  }
+  /* navbar sticky css  */
+  .sticky{
+    /* margin: 10px 5px; */
+    border-radius: 10px;
+    margin-top: 0.5rem;
+    background: linear-gradient(#002152, #271050);
+    scale:0.99;
+    
+    /* padding: 0rem 1rem;
+    margin-top: 0.5rem;
+    margin-left:0.5rem;
+    margin-right: 0.5rem;
+    width: 99%; */
+  }
+  
+  .navLinks {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.16rem;
+    list-style: none;
+    gap: 0.97rem;
+    position: relative;
+    top: 0.5rem;
+    z-index: 10;
+    right: 24px;
+  }
+  
+  .link {
+    position: relative;
+  }
+  .link > a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 12px 20px;
+    text-decoration: none;
+    width: 100%;
+    transition: all 0.3s linear;
+  }
+  .link > a:hover {
+    background-color: #f6ddff;
+    border-radius: 10px;
+    box-shadow: rgb(56, 0, 109) 0px 0px 8px 2px inset;
+  }
+  .dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #123456;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  .dropdown-menu > li {
+    float: none;
+  }
+  
+  .dropdown-menu > li > a {
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+  
+  .dropdown-menu > li > a:hover {
+    background-color: #575757;
+  }
+  
+  .dropdown:hover .dropdown-menu {
+    display: block;
+  }
+  /* .link a::before {
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 0%;
+    bottom: -5px;
+    left: 0;
+    background-color: red;
+  } */
+  
+  /* .link a::after {
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 0%;
+    top: -5px;
+    right: 0;
+    background-color: red;
+    transition: all 0.2s ease-in-out;
+  } */
+  
+  /* .link a:hover::before {
+    width: 100%;
+    transition: all 0.2s ease-in-out;
+  } */
+  /* 
+  .link a:hover::after {
+    width: 100%;
+    transition: all 0.2s ease-in-out;
+  } */
+  .contact-btn {
+    position: relative;
+    right: 15px;
+    box-sizing: border-box;
+  }
+  
+  #themeToggle {
+    width: inherit;
+  }
+  
+  .hamburger {
+    height: 2rem;
+    width: 1.7rem;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    display: none;
+    transition: 0.2s;
+  }
+  
+  .line {
+    height: 5px;
+    width: 100%;
+    background-color: white;
+    border-radius: 2px;
+  }
+  
+  @media screen and (max-width: 1220px) {
+    .hamburger {
+      display: flex;
+      cursor: pointer;
+    }
+    .nav__logo {
+      margin-left: 0px;
+    }
+    .navLinks {
+      position: absolute;
+      top: 70px;
+      background-color: #091020;
+      width: 0%;
+      left: 0;
+      height: 100vh;
+      padding: 2rem 0;
+      flex-direction: column;
+      transition: 0.2s;
+      overflow: hidden;
+    }
+  
+    .navLinks li {
+      width: 100%;
+      padding: 0.5rem 0;
+      background-color: #1f2532;
+      z-index: 10;
+    }
+  
+    #toggle {
+      font-size: 0.6rem;
+    }
+  }
+  .footer-head {
+    position: relative;
+    display: inline-block;
+    padding: 10px 0;
+  }
+  
+  /* .footer-head::before,
+  .footer-head::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 2px;
+    background-color: red;
+    transition: width 0.2s ease-in;
+  } */
+  
+  .footer-head::before {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  
+  .footer-head::after {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  
+    /* .footer-head:hover::before {
+      width: 100%;
+    }
+    .footer-head:hover::after {
+      width: 100%;
+    } */
+  .navLinks:active {
+    color: rgb(169, 35, 252);
+  }
+  
+  .navLinks.activeHamburger {
+    width: 100%;
+  }
+  
+  /* Initially the Login Button and View button are not in Hamburger Menu */
+  .navLinks #LogIn-link, .navLinks #View-link {
+    display: none;
+  }
+  /* @media screen and (max-width: 1146px) {
+    .toggle-container {
+      position: relative;
+      right: 148px;
+    }
+    .hamburger {
+      position: relative;
+      right: 150px;
+    }
+  } */
+  /* @media only screen and (max-width:957px){
+    .toggle-container{
+      left: 30px;
+    }
+    .hamburger{
+      left: 30px;
+    }
+  } */
+  /* @media screen and (max-width: 846px) {
+    .toggle-container {
+      position: relative;
+      right: 200px;
+    }
+    .hamburger {
+      position: relative;
+      right: 245px;
+    }
+    .btn {
+      position: relative;
+      right: 57px;
+      top: 1px;
+    }
+  } */
+  
+  /* Move Login from newNav to Hamburger */
+  @media screen and (max-width: 690px) {
+    .navLinks #LogIn-link {
+      display: inline;
+    }
+    .newNav #nav-login-btn {
+      display: none;
+    }
+  }
+  
+  /* Move Login from Hamburger to newNav */
+  @media screen and (min-width: 690px) {
+    .navLinks #LogIn-link {
+      display: none;
+    }
+    .newNav #nav-login-btn {
+      display: inline;
+    }
+  }
+  
+  /* Move View from newNav to Hamburger */
+  @media screen and (max-width: 510px) {
+    .navLinks #View-link {
+      display: inline;
+    }
+    .newNav #nav-view-btn {
+      display: none;
+    }
+    .newNav img{
+      position: relative;
+    }
+    .header__image img:nth-child(1) {
+        transform: translate(0, 0%) !important;
+    }
+    .section__subtitle {
+      max-width: 100vw !important;
+      margin-left: 0 !important;
+    }
+    .testimonials {
+      padding: 0px 10px;
+    }
+  }
+  
+  /* Move View from Hamburger to newNav */
+  @media screen and (min-width: 510px) {
+    .navLinks #View-link {
+      display: none;
+    }
+    .newNav #nav-view-btn {
+      display: inline;
+    }
+  }
+  
+  /* TO prevent unnecessary wrapping */
+  @media screen and (max-width: 400px) {
+    .newNav {
+      gap: 0;
+    }
+  }
+  
+  /* Hide the logo name */
+  @media screen and (max-width: 350px) {
+    .newNav .nav__logo {
+      display: none;
+    }
+  }
+  
+  @media screen and (max-width: 652px) {
+    .toggle {
+      width: 5vw;
+    }
+    .line {
+      width: 5vw;
+    }
+  
+  }
+  @media only screen and (max-width:577px){
+    .but{
+      position: relative;
+      top: -37px;
+      left: 85px;
+    }
+  }
+  @media only screen and (max-width: 465.5px){
+  
+    .but{
+      position: relative;
+      left:17px;
+      top: -4px;
+    }
+    .but2{
+      position: relative;
+      left: 30px;
+      top: -2px;
+    }
+  }
+  /* @media screen and (max-width: 430px) {
+    .toggle-container {
+      right: 374px;
+    }
+    .newNav img {
+      left: 75px;
+    }
+    .nav__logo {
+      left: 36px;
+    }
+  } */
+  /* New NAvbar CSS Ends Here*/
+  /* #canvas {
+    background: #232323;
+    width: 300%;
+    position: absolute;
+    z-index: -9999;
+    left: 0;
+    top: 0;
+    height: 800%;
+  } */
+  
+  /* body, html {
+      background: #090d00;
+  } */
\ No newline at end of file
diff --git a/packages.html b/packages.html
index 5ff30a0e..f004f6e7 100644
--- a/packages.html
+++ b/packages.html
@@ -7,6 +7,7 @@
     <title>Trip & Hotel Packages</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="styles.css" />
     <style>
         :root {
             --primary-color: #d6eaf7;
@@ -27,6 +28,7 @@
             margin: 0;
             padding: 0;
             overflow-x: hidden;
+           
         }
 
         body {
@@ -35,6 +37,7 @@
             padding: 0;
             background-color: none;
             color: var(--text-color);
+            display: block;
         }
 
         #background-video {
@@ -59,7 +62,13 @@
     background-color: rgba(0, 0, 0, 0.5);
     z-index: -999;
 }
-
+/* nav {
+  background-color: #123456;
+  position: fixed;
+  top: 0;
+  width: 100px;
+  z-index: 1001;
+}
 
         .nav-container {
             margin-top: 0;
@@ -72,17 +81,17 @@
             left: 0;
             top: 0;
             z-index: 9999;
-        }
+        } */
 
-        .sticky {
+        /* .sticky {
             border-radius: 10px;
             background: linear-gradient(#002152, #271050);
             scale: 0.99;
-        }
+        } */
 
-        .navLinks {
-            display: flex;
-            justify-content: center;
+        /* .navLinks {
+            display: flex; */
+            /* justify-content: center;
             align-items: center;
             font-size: 1.16rem;
             list-style: none;
@@ -92,21 +101,21 @@
         }
 
         .newNav {
-            margin-top: 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 0.5rem;
-            height: auto;
-            width: 100%;
-            padding: 0.4rem 0.5rem;
-            z-index: 10000;
-            transition: all 0.6s;
-        }
+           display: flex;
+           justify-content: space-between;
+           align-items: center;
+           gap: 0.5rem;
+           height: auto;
+           width: 100%;
+           padding: 0.4rem 0.5rem;
+           z-index: 10000;
+           transition: all 0.6s;
+            } */
 
         .sitelogo {
             height: 40px;
             margin-right: 10px;
+            min-width: fit-content;
         }
 
         .nav__logo {
@@ -128,10 +137,12 @@
             display: block;
             color: white;
             text-align: center;
-            padding: 12px 20px;
+            padding:6px 10px;
             text-decoration: none;
             width: 100%;
             transition: all 0.3s linear;
+            align-items: center;
+            margin-top: -15px;
         }
 
         .link>a:hover {
@@ -140,6 +151,11 @@
             box-shadow: rgb(56, 0, 109) 0px 0px 8px 2px inset;
             color: #002152;
         }
+        .navigationbar_package{
+               align-items: center;
+              display: flex;
+               gap: 5px;
+        }
 
         .dropdown-menu {
             display: none;
@@ -177,13 +193,15 @@
         }
 
         .btn {
-            padding: 0.5rem 1rem;
+            padding: 1rem 1rem;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             transition: background-color 0.3s ease;
             color: white;
             background-color: #0697f1;
+            margin: 0;
+
         }
 
         .btn:hover {
@@ -221,7 +239,7 @@
         }
 
         .package-grid {
-            display: grid;
+            /* display: grid; */
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 30px;
             padding: 0 40px;
@@ -259,6 +277,16 @@
             color: #666;
         }
 
+        .login_packages{
+            color: white !important;
+            background-color: #6a5acd!important;
+        }
+        .login_packages:hover{
+            background-color: #ff0000 !important;
+            border-color: #ff0000 !important;
+           color: #fff !important;
+        }
+
         @media (max-width: 1024px) {
             .navLinks {
                 display: none;
@@ -507,6 +535,7 @@
                 <img src="./img/tour1.png" class="sitelogo">
                 <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
             </div>
+            <div class="navigationbar_package">
             <ul class="navLinks">
                 <li class="link" data-aos=""><a href="./index.html">Home</a></li>
                 <li class="link" data-aos=""><a href="#AboutUs">About</a></li>
@@ -524,11 +553,11 @@
                 <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
                 <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
             </ul>
-            <a href="newLogin.html" class="contact-btn" id="nav-login-btn">
-                <button class="btn login" id="btn-style" data-aos="fade-down">Login/SignUp</button>
+            <a href="newLogin.html" class="contact-btn "  id="nav-login-btn">
+                <button class="btn login login_packages" id="btn-style" data-aos="fade-down">Login/SignUp</button>
             </a>
-            <a href="mapa.html" class="contact-btn" id="nav-view-btn">
-                <button class="btn" id="btn-style" style="margin: 0;" data-aos="fade-down">view</button>
+            <a href="mapa.html"  class="contact-btn " id="nav-view-btn">
+                <button class="btn login_packages" id="btn-style" style="margin: 0;" data-aos="fade-down">view</button>
             </a>
             <a href="loginPage.html" class="contact-btn">
                 <button class="btn" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled>Log
@@ -539,8 +568,31 @@
                 <div class="line"></div>
                 <div class="line"></div>
             </div>
+            </div>
         </nav>
     </div>
+    <div class="nav-wrapperr">
+        <div id="progress-container">
+          <div id="progress-bar"></div>
+        </div>
+    
+        <script>
+        window.addEventListener('scroll', function() {
+    // Get the current scroll position
+    const winScroll = document.documentElement.scrollTop || document.body.scrollTop;
+    
+    // Get the total scrollable height
+    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    
+    // Calculate the percentage scrolled
+    const scrolled = (winScroll / height) * 100;
+    
+    // Set the progress bar width
+    document.getElementById('progress-bar').style.width = scrolled + '%';
+});
+
+        </script>
+      </div>
 
 
     <section class="tourist part" id="tourist">