From f79023968cbc10e0fb5948660f71d624bb6347c1 Mon Sep 17 00:00:00 2001
From: chaanakyaaM <chaanakyaam@gmail.com>
Date: Tue, 9 Jul 2024 16:32:41 +0530
Subject: [PATCH] scroll down progress bar added

---
 index.html | 201 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 119 insertions(+), 82 deletions(-)
diff --git a/index.html b/index.html
index 1ab07989..fbcbc312 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,18 @@
+
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
-  <!-- Meta tags -->
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="title" content="TourGuide">
-  <meta name='target' content='all'>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="author" content="Arpan Chowdhury">
-  <meta name="description"
-    content="Explore breathtaking destinations, find travel tips, and plan your next adventure with our comprehensive travel guides and resources." />
-  <meta name="keywords"
-  content="travel, travel website, travel guides, travel tips, travel destinations, adventure travel, travel planning, travel resources, vacation ideas, travel advice, holiday planning, travel blog, travel inspiration, travel photos, travel itineraries" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />
-  <meta name='URL' content='https://apu52.github.io/Travel_Website/'>
-  <meta name='identifier-URL' content='https://apu52.github.io/Travel_Website/'>
-  <meta name="robots" content="index, follow" />
-  <meta name="googlebot" content="index, follow" />
-  <meta name="bingbot" content="index, follow" />
-
-  <!-- Open Graph -->
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://apu52.github.io/Travel_Website/" />
-  <meta property="og:title" content="TourGuide" />
-  <meta property="og:description"
-    content="Discover a treasure trove of knowledge at CSEdge Learn! Our comprehensive guides and tutorials empower interns with the tools they need to excel in their roles. Simplify your internship journey with our easy-to-follow articles and documentation, unlocking a world of opportunities."/>
-  
+  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+  <style>
+    .center-card {
+      margin: 0 auto;
+      display: block;
+    }
+  </style>
   <link rel="stylesheet" href="./loader.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
   <link rel="stylesheet" href="faq-website.css">
@@ -42,6 +28,7 @@
 <link rel="stylesheet" href="counter.css" class="rel href">
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
   <link rel="stylesheet" href="styles.css" />
   <link rel="stylesheet" href="./Image-Gallery/style.css">
   <link rel="stylesheet" href="./Image-Gallery/stylecaptions.css">
@@ -109,7 +96,7 @@
         width: 130%;
       } 
       .line{
-        width: 130%;
+        width: 150%;
       }
       .hamburger{
         position: relative;
@@ -157,6 +144,25 @@
   gap: 8px; /* Adjust the gap between buttons */
 }
 
+.nav-wrapperr{
+    position: fixed;
+    height: 10px;
+    width: 100%;
+    top: 80px;
+    left: 0%;
+    background-color: white;
+    z-index: 999;
+  }
+
+  .progress-bar{
+    height: 10px;
+    left: 0%;
+    top: 80px;
+    position: fixed;
+    background-color: #6a5acd;
+    z-index: 9999; 
+  }
+
 @media screen and (max-width: 768px) {  
 body{
   align-items: flex-end;
@@ -206,17 +212,18 @@ <h1>TourGuide . . .</h1>
       <nav class="newNav">
         <img src="./img/A T logo with a white background and a square shape, connected to nature for a travel company.png" style="width:30px;height:30px;border-radius:50%;">
         
-        <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
+        <a href="#" class="nav__logo" data-aos="fade-right">Tourguide</span></a>
 
         <ul class="navLinks">
 
           <li class="link" data-aos=""><a href="#Home">Home</a></li>
-          <li class="link" data-aos=""><a href="#AboutUs"> AboutUs</a></li>
-          <li class="link" data-aos=""><a href="#Destinations">Destinations</a></li>
-          <li class="link" data-aos=""><a href="#trip">Pricing</a></li>
+          <li class="link" data-aos=""><a href="#AboutUs">About</a></li>
+          <li class="link" data-aos=""><a href="#Destinations">Destination</a></li>
+          <li class="link" data-aos=""><a href="#trip">Prices</a></li>
           <li class="link" data-aos=""><a href="#ReviewGallery">Trip Gallery</a></li>
-          <li class="link" data-aos=""><a href="#testimonials">Testimonials</a></li>
-          <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
+          <li class="link" data-aos=""><a href="#tourist">Tourist Guide</a></li>
+          <li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
+          <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>
 
@@ -243,6 +250,10 @@ <h1>TourGuide . . .</h1>
       </nav>
     </div>
     <header>
+      <div class="nav-wrapperr">
+        <div class="progress-bar"></div>
+      </div>
+      
       <section class="section__container header__container" id="Home">
         <div class="header__image" data-aos="fade-down-right">
           <img src="https://i.ibb.co/88Qnjxg/pexels-josh-hild-2422259.jpg" alt="header" />
@@ -831,8 +842,24 @@ <h2 class="section__title" data-aos="zoom-in" style="text-align: center;">
     document.getElementById('newDiv').style.display = 'block';
   }
     </script>
-    <br /><br /><br /><br /><br /><br />
-
+    <br /><br />
+
+    <!-- Toursit Guide Section -->
+     <section class="tourist" id ="tourist">
+      <h2 class="tourist-heading section__title" align-items="center" data-aos="fade-in">Tourist Guide</h2>
+       <h4 style="color: rgb(231, 62, 118); font-style: italic;font-family: cursive;">Have an amazing trip and explore the destiny</h4>
+       <br></br>
+       <h3 style="color: rgb(6, 151, 241); font-style: inherit;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">Connect with the Guide</h3>
+       <br></br>
+       <div class="center-card">
+       <img src="./tg1.jpg" alt="guide1"/>
+       <br></br>
+       <img src="./tg2.jpg" alt="guide2"/>
+       <br></br>
+       <img src="./tg3.jpg" alt="guide3"/>
+      </div>
+      </section>
+    <br /><br /><br /><br />
     <!-- Testimonials Section -->
 
     <section class="testimonials" id="testimonials">
@@ -1148,11 +1175,20 @@ <h2 class="section__title" data-aos="fade-up">Subscribe to get special prize</h2
 
     <footer class="footer" data-aos="fade-up">
       <div class="section__container footer__container">
+        <div class="footer__col">
+          <h3 class="footer-head" class="footer__title">Tourguide<span>.</span></h3>
+          <p>
+            Ready for your next adventure? Let's make it unforgettable.<br>
+          </p>
+          <p class="footer__text">
+            Start planning your dream trip with us and explore the world.
+          </p>
+        </div>
         <div class="footer__col">
           <h3 class="footer-head" class="footer__title">Places You May Want to Visit<span>.</span></h3>
           <p class="footer__text"> 
            
-            <a href="Cultural_Exp.html">Cultural Experiences</a>
+            <a href="Cultural_Exp.html" >Cultural Experiences</a>
            
             <a href="HoneyMoon.html">Honeymoon Places</a>
             <a href="Adventure.html">Adventure travel</a>
@@ -1160,32 +1196,15 @@ <h3 class="footer-head" class="footer__title">Places You May Want to Visit<span>
            
           </p>
         </div>
-        <div class="footer__col">
-          <h3 class="footer-head" class="footer__title">Tourguide<span>.</span></h3>
-          <p>
-            Ready for your next adventure? Let's make it unforgettable.<br>
-          </p>
-          <p class="footer__text">
-            Start planning your dream trip with us and explore the world.
-          </p>
-        </div>
         <div class="footer__col">
           <div class="footer__area">
             <h4 class="footer-head" class="footer__subtitle">Support</h4>
           <p><a href="./faq.html" class="footer__link">FAQs</a></p>
           <p><a href="./tnc.html" class="footer__link">Terms & Conditions</a></p>
-          <p><a href="./privacy.html" class="footer__link">Privacy Policy</a></p>
+           <p><a href="./privacy.html" class="footer__link">Privacy Policy</a></p>
           <p><a href="#cnt-form" class="footer__link">Contact Us</a></p>
           </div>
         </div>
-        <div class="footer__col">
-          <p>Social Media</p>
-          <section class="social-icon d-flex ">
-            <a href="#" class="fa-brands fa-facebook fa-2xl"></a>
-            <a href="#" class="fa-brands fa-instagram fa-2xl"></a>
-            <a href="#" class="fa-brands fa-twitter fa-2xl"></a>
-        </section>
-        </div>
         <div class="footer__col">
           <h4 class="footer-head" style="padding-left: 35px;">  Address</h4>
           <div class="mapouter">
@@ -1214,44 +1233,50 @@ <h4 class="footer-head" style="padding-left: 35px;">  Address</h4>
         </div>
         <div class="footer__col">
           <div class="footer__area">
-            <h4>Reach Out To Us</h4>
+            <h4>Contact Us</h4>
             <div class="d-flex align-items-center mb-2">
-              <span class="mr-2">Email :</span>
               <a href="mailto:tour@tourguide.com" class="text-nowrap">tour@tourguide.com</a>
             </div>
             <div class="d-flex align-items-center">
-              <span class="mr-2">Phone :</span>
               <a href="tel:8562145852" class="text-nowrap">+91 8562145852</a>
             </div>
-          </div>
-        
-        </div>
-        <div class="footer__col">
-          <div class="footer__area">
-            <h4 class="footer-head" style="margin-left: -43px;" >Follow Us</h4>
-            <br>
-              <a style="margin-left: -43px;" href="https://www.facebook.com/yourpage" target="_blank" class="footer__link">
-                <i class="fab fa-facebook-f"></i> 
+            <div class="icons">
+              <a href="">
+                <div class="icon">
+                  <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+                </div>
               </a>
-            
-            
-              <a style="margin-left: -10px;" href="https://twitter.com/ArpanCh40193288" target="_blank" class="footer__link">
-                <i class="fab fa-twitter"></i> 
+          
+              <a href="">
+                <div class="icon">
+                  <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
+                </div>
               </a>
-            
-            
-              <a style="margin-left: -10px;" href="https://www.instagram.com/anuragbasu1973/" target="_blank" class="footer__link">
-                <i class="fab fa-instagram"></i> 
+          
+              <a href="">
+                <div class="icon">
+                  <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+                </div>
               </a>
-            
-            
-              <a style="margin-left: -10px;" href="https://www.linkedin.com/in/arpan-chowdhury-775294251" target="_blank" class="footer__link">
-                <i class="fab fa-linkedin-in"></i> 
+              
+          
+              <a href="" title="YouTube">
+                <div class="icon">
+                  <i class="fab fa-youtube" style="cursor: pointer;"></i>
+                </div>
               </a>
-            
+          
+              <a href="">
+                <div class="icon">
+                  <i class="fab fa-github" title="Github"></i>
+                </div>
+              </a>
+             
+            </div>
           </div>
-        </div>
         
+        </div>
+
         <div class="footer__col">
           <div id="google_element"></div>
           <script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
@@ -1272,12 +1297,7 @@ <h4 class="footer-head" style="margin-left: -43px;" >Follow Us</h4>
         </div>
       </div>
 
-      <!--   Previous copyright code
-<!--  <div class="footer__bar">
-        Copyright © 2023 Arpan Chowdhury. All rights reserved.
-      </div> -->
-
-    </footer>
+    </footer> 
 
     <a class="goupbtn" href="#" onclick="goToTop()"><i class="fa-solid fa-arrow-up"></i></a>
 
@@ -1795,6 +1815,7 @@ <h4 class="footer-head" style="margin-left: -43px;" >Follow Us</h4>
   </script>
 
 <script>
+
   document.addEventListener('DOMContentLoaded', function() {
     function animateValue(id, start, end, duration) {
       const obj = document.getElementById(id);
@@ -1818,7 +1839,23 @@ <h4 class="footer-head" style="margin-left: -43px;" >Follow Us</h4>
     animateValue("toursCount", 0, 20000, 20000);
     animateValue("destinationsCount", 0, 10994, 20000);
   });
+
 </script>
+<script>
+    const scrollline = document.querySelector('.progress-bar');
+
+  function fillscrollline(){
+    const windowHeight = window.innerHeight;
+    const fullHeight = document.body.clientHeight;
+    const scrolled = window.scrollY;
+    const percentScrolled = (scrolled / (fullHeight - windowHeight)) * 100;
+
+    scrollline.style.width = percentScrolled + '%';
+  };
+
+    window.addEventListener('scroll', fillscrollline);
+
+  </script>
 
 
 
