From 0025a98ef0dda7ee77e7bf129fab709d4b68e3fc Mon Sep 17 00:00:00 2001
From: sau-mili <146661411+sau-mili@users.noreply.github.com>
Date: Sat, 29 Jun 2024 03:01:08 +0530
Subject: [PATCH 1/2] Counter added

---
 counter.css |  81 ++++++++++++++++++++++++++++++++
 index.html  | 131 ++++++++++++++++++++++++----------------------------
 index.js    |   1 +
 style.css   |   4 +-
 styles.css  |   2 +
 5 files changed, 148 insertions(+), 71 deletions(-)
 create mode 100644 counter.css

diff --git a/counter.css b/counter.css
new file mode 100644
index 00000000..454e5c38
--- /dev/null
+++ b/counter.css
@@ -0,0 +1,81 @@
+ 
+
+  /* counter */
+  .wrapper {
+   
+    width: 80%;
+    
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  
+  }
+  .countitem {
+    width: 28vmin;
+    height: 28vmin;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 1em 0;
+    font-size: 16px;
+    border-width: 0.5px ;
+    border-color: solid purple;
+    border-radius: 0.5em;
+    background: linear-gradient(white,rgb(153, 139, 251));
+    border-bottom: 10px solid #40349c;
+  }
+  i {
+    color: #06006e;
+    font-size: 2.5em;
+    text-align: center;
+  }
+  span.num {
+    color: #32316a;
+    display: grid;
+    place-items: center;
+    font-weight: 600;
+    font-size: 3em;
+  }
+  span.text {
+    color: #6c2121;
+    font-size: 1.2em;
+    text-align: center;
+    padding: 0em 00em;
+    font-weight: 400;
+    margin-bottom: 1em;
+    line-height: 0;
+  }
+  @media screen and (max-width: 1024px) {
+    .wrapper {
+      width: 85vw;
+    }
+    .countitem{
+      height: 26vmin;
+      width: 26vmin;
+      font-size: 12px;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .wrapper {
+      width: 90vw;
+      flex-wrap: wrap;
+      gap: 30px;
+    }
+    .countitem {
+      width: calc(50% - 40px);
+      height: 30vmin;
+      font-size: 14px;
+    }
+  }
+  @media screen and (max-width: 480px) {
+    .wrapper {
+      gap: 15px;
+    }
+    .countitem {
+      width: 100%;
+      height: 25vmin;
+      font-size: 8px;
+    }
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index a4193583..743186fe 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,9 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+<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">
@@ -316,80 +318,69 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
 
     </div>
     <!-- Right statistics container -->
-    <div data-aos="fade-left" class="col-6">
-
-      <div class="space-y-4 sm:grid sm:grid-cols-2 lg:grid-cols-1 sm:gap-4 xl:gap-8 sm:space-y-0 md:mt-12">
-        <!-- Box 1 - Number of Guides -->
-        <div class="box1">
-          <div class="iconss">
-
-            <svg class="w-12 h-12 mx-auto dark:text-gray-100 group-hover:text-pink-500 group-hover:dark:text-pink-500"
-              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-              <!-- SVG Path for the icon -->
-              <circle cx="8.5" cy="7" r="4" />
-              <polyline points="17 11 19 13 23 9" />
-            </svg>
-            <h3
-              class="font-semibold text-4xl md:text-3xl group-hover:text-thq_green-500 text-gray-900 dark:text-white mt-3.5"
-              data-aos="fade-in">25000</h3>
-            <p
-              class="text-base font-semibold text-gray-600 dark:text-gray-300 group-hover:text-gray-900 group-hover:dark:text-gray-300">
-              Guides</p>
-          </div>
+    <!-- <div class="container-fluid text-center">
+      <h1>Some cool facts</h1>
+      <div class="row">
+        <div class="col-sm-3">
+          <i class="fa fa-user"></i>
+          <h2 data-max="50">+ Happy Customers</h2>
         </div>
-        <!-- Box 2 - Number of Tours -->
-        <div class="box1">
-          <div class="iconss">
-            <svg class="w-12 h-12 mx-auto dark:text-gray-100 group-hover:text-pink-500 group-hover:dark:text-pink-500"
-              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path stroke="none" d="M0 0h24v24H0z" />
-              <circle cx="12" cy="10" r="4" />
-              <!-- SVG Path for the icon -->
-              <path d="M6.75 16a8.015 8.015 0 1 0 9.25 -13" />
-              <line x1="12" y1="18" x2="12" y2="22" />
-              <line x1="8" y1="22" x2="16" y2="22" />
-            </svg>
-            <h3
-              class="font-semibold text-4xl md:text-3xl  group-hover:text-thq_green-500 text-gray-900 dark:text-white mt-3.5"
-              data-aos="fade-in">20000</h3>
-            <p class="text-base font-semibold text-gray-600 dark:text-gray-300 group-hover:text-gray-900 group-hover:dark:text-gray-300"
-              data-aos="fade-in">Tours</p>
-          </div>
+        <div class="col-sm-3">
+          <i class="fa fa-code"></i>
+          <h2 data-max="25000">+ Lines of code</h2>
         </div>
-        <!-- Box 3 - Number of Destinations -->
-        <div class="box1">
-          <a href="affordable-destinations.html" class="iconss">
-            <svg class="w-12 h-12 mx-auto group-hover:text-pink-500 dark:text-gray-100 group-hover:dark:text-pink-500"
-              viewBox="0 0 24 24" stroke-width="2" stroke="black" fill="none" stroke-linecap="round"
-              stroke-linejoin="round">
-              <!-- SVG Path for the icon -->
-              <path stroke="none" d="M0 0h24v24H0z" />
-              <line x1="18" y1="6" x2="18" y2="6.01" />
-              <path d="M18 13l-3.5 -5a4 4 0 1 1 7 0l-3.5 5" />
-              <polyline points="10.5 4.75 9 4 3 7 3 20 9 17 15 20 21 17 21 15" />
-              <line x1="9" y1="4" x2="9" y2="17" />
-              <line x1="15" y1="15" x2="15" y2="20" />
-            </svg>
-            <h3
-              class="font-semibold text-4xl md:text-3xl  group-hover:text-thq_green-500 text-black-900 dark:text-black mt-3.5"
-              data-aos="fade-in">10994</h3>
-            <p class="text-base font-semibold text-gray-600 dark:text-gray-300 group-hover:text-gray-900 group-hover:dark:text-gray-300"
-              data-aos="fade-in">Destinations</p>
-          </a>
+        <div class="col-sm-3">
+          <i class="fa fa-lock"></i>
+          <h2 data-max="10">+ Projects</h2>
         </div>
-      </div>
-    </div>
+        <div class="col-sm-3">
+          <i class="fa fa-briefcase"></i>
+          <h2 data-max="30" id="test">+ Developers</h2>
+        </div>
+      </div> -->
 
-    </div>
-    </div>
-    </div>
-    </div>
 
-    </section>
-    </header>
+      <section>
+        <div class="wrapper">
+            <div class="countitem">
+              <i class="fa-solid fa-handshake-angle"></i>
+              <span class="num" data-val="25000">000</span>
+              <span class="text">Guides</span>
+            </div>
+            <div class="countitem">
+              <i class="fa-solid fa-suitcase-rolling"></i>
+              <span class="num" data-val="20000">000</span>
+              <span class="text">Tours</span>
+            </div>
+            <div class="countitem">
+              <i class="fa-solid fa-location-dot"></i>
+              <span class="num" data-val="20000">000</span>
+              <span class="text">Destinations</span>
+            </div>
+            
+          </div>
+        </section>
+    
+<script>
+  let valueDisplays = document.querySelectorAll(".num");
+let interval = 4000;
+valueDisplays.forEach((valueDisplay) => {
+  let startValue = 0;
+  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
+  let duration = Math.floor(interval / endValue);
+  let counter = setInterval(function () {
+    startValue += 10;
+    valueDisplay.textContent = startValue;
+    if (startValue == endValue) {
+      clearInterval(counter);
+    }
+  }, duration);
+});
+</script>
+    
+
+  
+  
     <br><br>
     <!-- ending the section of About Us -->
 
@@ -1627,7 +1618,7 @@ <h4>Follow Us</h4>
         top.document.getElementsByTagName("head")[0].appendChild(link);
     }
 </script>
-  =======
+<script src="index.js"></script>
 
   <!--  Adding copyright javascript code to make it dynamic and display current year -->
   <script>
diff --git a/index.js b/index.js
index d9dbca74..5e5a68b9 100644
--- a/index.js
+++ b/index.js
@@ -137,3 +137,4 @@ document.getElementById('emailInput').addEventListener('blur', function() {
 
 
 
+
diff --git a/style.css b/style.css
index 86a2f9cd..ba5ab5ec 100644
--- a/style.css
+++ b/style.css
@@ -317,4 +317,6 @@ input[type="submit"]{
     width: 100%;
   }
   
-  /* New NAvbar CSS Ends Here*/
\ No newline at end of file
+  /* New NAvbar CSS Ends Here*/
+
+ 
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 9b7ac4e1..58413544 100644
--- a/styles.css
+++ b/styles.css
@@ -2450,3 +2450,5 @@ body {
     margin: 0 auto; /* Center the subtitle */
   }
 }
+
+

From f3e896e52057c226824af5ff29f4124279fc214f Mon Sep 17 00:00:00 2001
From: sau-mili <146661411+sau-mili@users.noreply.github.com>
Date: Thu, 4 Jul 2024 16:53:26 +0530
Subject: [PATCH 2/2] Update index.html

---
 index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 48889eaa..0c99c488 100644
--- a/index.html
+++ b/index.html
@@ -345,16 +345,16 @@ <h2 data-max="10">+ Projects</h2>
     <div data-aos="fade-left" class="col-6">
 
       <div class="space-y-4 sm:grid sm:grid-cols-2 lg:grid-cols-1 sm:gap-4 xl:gap-8 sm:space-y-0 md:mt-12">
-        <!-- Box 1 - Number of Guides -->
-        <div class="box1">
+         Box 1 - Number of Guides -->
+        <!-- <div class="box1">
           <div class="iconss">
 
             <svg class="w-12 h-12 mx-auto dark:text-gray-100 group-hover:text-pink-500 group-hover:dark:text-pink-500"
               viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
               <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-              <!-- SVG Path for the icon -->
-              <circle cx="8.5" cy="7" r="4" />
+              SVG Path for the icon -->
+              <!-- <circle cx="8.5" cy="7" r="4" />
               <polyline points="17 11 19 13 23 9" />
             </svg>
             <h3 id="guidesCount"
@@ -364,17 +364,17 @@ <h2 data-max="10">+ Projects</h2>
               class="text-base font-semibold text-gray-600 dark:text-gray-300 group-hover:text-gray-900 group-hover:dark:text-gray-300">
               Guides</p>
           </div>
-        </div>
+        </div>  -->
         <!-- Box 2 - Number of Tours -->
-        <div class="box1">
+        <!-- <div class="box1">
           <div class="iconss">
             <svg class="w-12 h-12 mx-auto dark:text-gray-100 group-hover:text-pink-500 group-hover:dark:text-pink-500"
               viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
               stroke-linejoin="round">
               <path stroke="none" d="M0 0h24v24H0z" />
-              <circle cx="12" cy="10" r="4" />
+              <circle cx="12" cy="10" r="4" /> -->
               <!-- SVG Path for the icon -->
-              <path d="M6.75 16a8.015 8.015 0 1 0 9.25 -13" />
+              <!-- <path d="M6.75 16a8.015 8.015 0 1 0 9.25 -13" />
               <line x1="12" y1="18" x2="12" y2="22" />
               <line x1="8" y1="22" x2="16" y2="22" />
             </svg>
@@ -384,15 +384,15 @@ <h2 data-max="10">+ Projects</h2>
             <p class="text-base font-semibold text-gray-600 dark:text-gray-300 group-hover:text-gray-900 group-hover:dark:text-gray-300"
               data-aos="fade-in">Tours</p>
           </div>
-        </div>
+        </div> -->
         <!-- Box 3 - Number of Destinations -->
-        <div class="box1">
+        <!-- <div class="box1">
           <a href="affordable-destinations.html" class="iconss">
             <svg class="w-12 h-12 mx-auto group-hover:text-pink-500 dark:text-gray-100 group-hover:dark:text-pink-500"
               viewBox="0 0 24 24" stroke-width="2" stroke="black" fill="none" stroke-linecap="round"
-              stroke-linejoin="round">
+              stroke-linejoin="round"> -->
               <!-- SVG Path for the icon -->
-              <path stroke="none" d="M0 0h24v24H0z" />
+              <!-- <path stroke="none" d="M0 0h24v24H0z" />
               <line x1="18" y1="6" x2="18" y2="6.01" />
               <path d="M18 13l-3.5 -5a4 4 0 1 1 7 0l-3.5 5" />
               <polyline points="10.5 4.75 9 4 3 7 3 20 9 17 15 20 21 17 21 15" />
@@ -411,7 +411,7 @@ <h2 data-max="10">+ Projects</h2>
           <i class="fa fa-briefcase"></i>
           <h2 data-max="30" id="test">+ Developers</h2>
         </div>
-      </div> -->
+      </div>  -->
 
 
       <section>