From 45733b3f28832de481320e21e7f472632277743d Mon Sep 17 00:00:00 2001
From: sau-mili <146661411+sau-mili@users.noreply.github.com>
Date: Wed, 24 Jul 2024 05:15:01 +0530
Subject: [PATCH] Update HoneyMoon.html

---
 HoneyMoon.html | 261 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 250 insertions(+), 11 deletions(-)

diff --git a/HoneyMoon.html b/HoneyMoon.html
index a49b7691..c47d3628 100644
--- a/HoneyMoon.html
+++ b/HoneyMoon.html
@@ -160,13 +160,188 @@ <h2 class="section__title">HoneyMoon Travel</h2>
         "Embark on your journey to forever bliss with our curated selection of dreamy honeymoon destinations..."
       </p>
       </b></h2>
-      <div class="trip__grid">
+
+              <!-- filter html -->
+        <div class="filter-search">
+          <select class="price-filter" id="priceFilter" onchange="filterProducts()">
+            <option value="">All Prices</option>
+          <option value="400">Below $400</option>
+          <option value="500">Below $500</option>
+          <!-- Add more options as needed -->
+        </select>
+        
+        <!-- search button html -->
+        <form onsubmit="search(event)" class="search-bar"> 
+          <input type="text" id ="find" placeholder="search places" onkeyup="search()" name="q">
+          <button type="submit" value="search" ><b>GO!</b></button>
+        </form>
+      </div>
+      <h2 id="noResults" style="display: none;" ><b>NO RESULTS FOUND</b> <img src="notFound.jpg" ></h2>
+      <!-- search styling -->
+      <style>
+        .filter-search {
+        display: flex;
+        align-items: center; 
+  }
+        .price-filter {
+      display: flex;
+      align-items: center; /* Align items vertically */
+      justify-content: center; /* Align items horizontally */
+      position: relative; /* Change to relative positioning */
+      
+      margin-left: auto; /* Adjust margin */
+      padding: 0.5rem 1rem; /* Adjust padding */
+      border: 1px solid #ccc;
+      border-radius: 0.25rem; /* Adjust border radius */
+      background-color: #fcfdff;
+      color: #333;
+      font-size: 1rem; /* Adjust font size */
+  }
+  
+  /* Optional: Add hover effects or additional styling */
+  .price-filter:hover {
+      background-color: #f0f0f0;
+      border-color: #999;
+  }
+  .info{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .info .tags i{
+    margin:2px;
+    color:cornflowerblue;
+  }
+        .search-bar{
+          width: 1500px;
+          height: 50%;
+          max-width: 400%;
+          /* background:rgba(0, 13, 79, 0.696); */
+          display: flex;
+          align-items: center;
+          border-radius: 58px;
+          padding: 10px 10px;
+        }
+        .search-bar input{
+          background: rgb(255, 255, 255);
+          flex: 1;
+          border-radius: 60px;
+          outline: none;
+          padding: 10px 20px;
+          font-size: 15px;
+          color: #0c0c0c;
+        }
+        .search-bar button{
+          border: 0;
+          border-radius: 40%;
+          width: 50px;
+          height: 40px;
+          color: #0b0a0a;
+          font-size: small;
+          background:#ffffffb8;
+          cursor: pointer;
+        }
+
+        .info{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.info .tags i{
+  margin:2px;
+  color:cornflowerblue;
+}
+      </style>
+  
+       <!--javascript for functionality of search button-->
+       <script type="text/javascript">
+        function search(event){
+          event.preventDefault();
+          let filter = document.getElementById('find').value.toUpperCase();
+          let item = document.querySelectorAll('.trip__card');
+          let l = document.getElementsByTagName('p');
+          var found = false;
+          for(var i = 0; i < l.length; i++){
+            let a = item[i].getElementsByTagName('p')[0];
+            let value = a.innerHTML || a.innerText || a.textContent;
+            if(value.toUpperCase().indexOf(filter) > -1) {
+              item[i].style.display = "";
+              found = true;
+            }
+      else {
+        item[i].style.display = "none";
+        document.getElementById("noResults").style.display = found ? "none" : "block";
+      }
+      }
+     }
+  </script>
+  <!-- filter's functionality -->
+  <script>
+  function filterProducts() {
+      var priceFilter = document.getElementById('priceFilter').value;
+      var products = document.getElementsByClassName('trip__card');
+  
+      for (var i = 0; i < products.length; i++) {
+          var productPrice = parseFloat(products[i].querySelector('.price').getAttribute('data-price'));
+          if (priceFilter === "" || productPrice <= parseFloat(priceFilter)) {
+              products[i].style.display = "block";
+          } else {
+              products[i].style.display = "none";
+          }
+      }
+  }
+  </script>
+  
+        <!-- end of search button -->
+
+        
+        <div class="categories">
+          <span class="each">
+            <svg viewBox="0 0 24 24" width="20px" height="20px" class="d Vb UmNoP"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.895 5.275h6.176V11.5h-1.643V8.08l-7.879 7.88-3.346-3.347-6.112 6.112-1.162-1.162 7.274-7.274 3.346 3.347 6.718-6.718h-3.372V5.275z"></path></svg>
+            <h5>Trending</h5>
+          </span>
+  
+          <span class="each">
+            <svg viewBox="0 0 24 24" width="20px" height="20px" class="d Vb UmNoP"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.718 5.172H5.982v.384l-.276.225-1.697 1.381c.127.084.275.18.434.28.41.26.873.538 1.172.715l.242.144.088.268c.216.659.74 1.694 1.587 2.566.837.862 1.953 1.533 3.378 1.58l.724.025v4.845l-.57.14c-.565.141-1.415.44-2.104.866-.707.438-1.008.855-1.033 1.188.054.018.15.037.308.037H15.465c.158 0 .254-.02.308-.037-.025-.333-.326-.75-1.034-1.188-.688-.425-1.538-.725-2.104-.865l-.57-.141V12.74l.725-.024c1.425-.048 2.541-.719 3.378-1.581.846-.872 1.37-1.907 1.587-2.566l.088-.268.242-.144c.3-.177.761-.456 1.172-.715.159-.1.307-.196.434-.28l-1.697-1.38-.276-.226v-.384zm-2.196 16.143c.567-.01 1.042-.169 1.369-.5.314-.318.412-.714.383-1.036-.023-1.162-.95-1.972-1.746-2.464a9.152 9.152 0 00-1.963-.882v-2.285c1.56-.237 2.783-1.044 3.68-1.969a8.74 8.74 0 001.838-2.87c.288-.173.646-.39.975-.598.212-.135.418-.268.586-.382.147-.1.326-.227.438-.338.29-.291.371-.654.324-.967a1.244 1.244 0 00-.292-.625l-.041-.047-.048-.039-1.807-1.47v-1.17H4.482v1.17l-1.807 1.47-.048.04-.041.046c-.118.134-.25.35-.292.625-.047.313.033.676.324.967.111.111.291.238.437.338.169.114.375.247.587.382.33.207.687.425.974.598a8.74 8.74 0 001.839 2.87c.897.925 2.12 1.732 3.68 1.97v2.284a9.152 9.152 0 00-1.963.882c-.796.492-1.723 1.302-1.746 2.464-.029.322.069.718.383 1.036.338.342.834.5 1.426.5H15.522zm-7.655-1.562l.002.001-.002-.001zm7.966 0l-.002.001.002-.001z"></path></svg>         
+             <h5>Top</h5>
+          </span>
+
+          <span class="each">
+            <svg viewBox="0 0 24 24" width="20px" height="20px" class="d Vb UmNoP"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.844 14.907c.641-1.435.82-2.898.49-4.272-.348-1.457-1.249-2.744-2.63-3.754C13.965 4.88 9.322 3.946 2.983 4.763l-.769.1.125.764c.53 3.276 3.15 7.269 6.258 9.679 1.562 1.211 3.323 2.083 5.085 2.213 1.499.11 2.948-.321 4.2-1.435 1.164 1.323 2.075 2.565 2.64 3.448l1.263-.807c-.63-.988-1.647-2.367-2.94-3.818zm-1.134-1.214c.32-.96.365-1.876.165-2.71-.254-1.062-.92-2.06-2.056-2.89-2.192-1.603-6.112-2.55-11.834-1.938.714 2.693 2.907 5.93 5.531 7.965 1.431 1.11 2.915 1.803 4.277 1.903 1.08.08 2.126-.208 3.075-1.044-.268-.279-.546-.558-.833-.835-2.057-1.989-4.512-3.806-7.055-4.634l.465-1.426c2.853.928 5.502 2.921 7.633 4.981.215.209.426.418.632.628z"></path></svg>
+            <h5>Soulful</h5>
+          </span>
+  
+          <span class="each">
+            <svg viewBox="0 0 24 24" width="20px" height="20px" class="d Vb UmNoP"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.005 3.893l9.844 16.214H2.15l4.535-7.141 5.319-9.073zM7.94 13.79l-3.06 4.818h14.302l-2.564-4.224-.072.06c-.436.348-1.099.664-2.031.664-.549 0-1.02-.185-1.42-.408a9.386 9.386 0 01-.945-.634l-.139-.102c-.686-.499-1.26-.856-1.996-.856-.868 0-1.408.215-1.713.395a1.65 1.65 0 00-.362.287zm7.875-.728l-3.789-6.24-2.837 4.84c.253-.034.528-.054.826-.054 1.265 0 2.19.642 2.879 1.143l.154.113c.294.215.534.39.778.526.272.152.488.218.689.218.568 0 .905-.184 1.094-.336.1-.08.166-.156.204-.208l.002-.002z"></path></svg>
+            <h5>Nature</h5>
+          </span>
+  
+          <span class="each">
+            <svg viewBox="0 0 24 24" width="20px" height="20px" class="d Vb UmNoP"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.844 14.907c.641-1.435.82-2.898.49-4.272-.348-1.457-1.249-2.744-2.63-3.754C13.965 4.88 9.322 3.946 2.983 4.763l-.769.1.125.764c.53 3.276 3.15 7.269 6.258 9.679 1.562 1.211 3.323 2.083 5.085 2.213 1.499.11 2.948-.321 4.2-1.435 1.164 1.323 2.075 2.565 2.64 3.448l1.263-.807c-.63-.988-1.647-2.367-2.94-3.818zm-1.134-1.214c.32-.96.365-1.876.165-2.71-.254-1.062-.92-2.06-2.056-2.89-2.192-1.603-6.112-2.55-11.834-1.938.714 2.693 2.907 5.93 5.531 7.965 1.431 1.11 2.915 1.803 4.277 1.903 1.08.08 2.126-.208 3.075-1.044-.268-.279-.546-.558-.833-.835-2.057-1.989-4.512-3.806-7.055-4.634l.465-1.426c2.853.928 5.502 2.921 7.633 4.981.215.209.426.418.632.628z"></path></svg>
+            <h5>Sustainable</h5>
+          </span>
+
+  
+  
+        </div>
+
+
+    
+       <div class="trip__grid">
 
         <div class="trip__card">
           <img src="img/narinder-pal-b9xWxpbe9vw-unsplash.jpg" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p>Paris</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.2</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-wine-glass"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fas fa-landmark"></i> 
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+            </div>
+
             <div class="booking__price">
               <div class="price"><span>From</span> $400</div>
               <a href="./dedicated destinations/Paris/start.html"><button class="book__now">Book
@@ -178,7 +353,14 @@ <h2 class="section__title">HoneyMoon Travel</h2>
           <img src="img/yash-kiran-qxp9X5t9hQ4-unsplash.jpg" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p>Shimla</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-snowflake"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fas fa-hiking"></i> 
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+            </div>
             <div class="booking__price">
               <div class="price"><span>From</span> $450</div>
               <a href="./dedicated destinations/Gulmargh/G.html"><button class="book__now">Book
@@ -189,8 +371,16 @@ <h2 class="section__title">HoneyMoon Travel</h2>
         <div class="trip__card">
           <img src="https://t2.gstatic.com/licensed-image?q=tbn:ANd9GcTTFsmx8EYTq7rL77gCALdtP-2Sfs9R4Q67I-AsN1rwg6XCmvOCNW4Bsb9doeJuEy3e" alt="trip" height="250" width="45" />
           <div class="trip__details">
-            <p>Gulmargh</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
+            <p>Gulmarg</p>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-snowflake"></i> 
+                <i class="fas fa-mountain"></i>
+                <i class="fas fa-skiing"></i> 
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
+            </div>
+            
             <div class="booking__price">
               <div class="price"><span>From</span> $400</div>
               <a href="./dedicated destinations/Gulmargh/G.html"><button
@@ -202,7 +392,15 @@ <h2 class="section__title">HoneyMoon Travel</h2>
           <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/The_Coral_Reef_at_the_Andaman_Islands.jpg" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p>Andaman and Nicobar Island </p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.2</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-umbrella-beach"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fa-solid fa-ship"></i>
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.2</div>
+            </div>
+            
             <div class="booking__price">
               <div class="price"><span>From</span> $300</div>
               <a href="./dedicated destinations/Andaman/a.html"><button class="book__now">Book Now</button></a>
@@ -213,7 +411,16 @@ <h2 class="section__title">HoneyMoon Travel</h2>
           <img src="https://t1.gstatic.com/licensed-image?q=tbn:ANd9GcSg50AFbadyWm-pye4CU2ZVFuA2gWOGhg6PKKHGIdRl7zRP6ONh2kqP72trtTF2oTY4" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p>Manali</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-mountain"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fas fa-hiking"></i> 
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+            </div>
+
+            
             <div class="booking__price">
               <div class="price"><span>From</span> $450</div>
               <a href="./dedicated destinations/Australia/Australia.html"><button class="book__now">Book Now</button></a>
@@ -224,7 +431,15 @@ <h2 class="section__title">HoneyMoon Travel</h2>
           <img src="img/colin-watts-M1ObxvsWVhY-unsplash.jpg" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p>Maldives</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-umbrella-beach"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fa-solid fa-ship"></i>
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
+            </div>
+            
             <div class="booking__price">
               <div class="price"><span>From</span> $400</div>
               <a href="./dedicated destinations/Maldives/start.html"><button class="book__now">Book Now</button></a>
@@ -236,7 +451,15 @@ <h2 class="section__title">HoneyMoon Travel</h2>
           <img src="https://static.toiimg.com/img/88863845/Master.jpg" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p>Thailand</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.2</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-umbrella-beach"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fa-solid fa-ship"></i>
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.2</div>
+            </div>
+
             <div class="booking__price">
               <div class="price"><span>From</span> $300</div>
               <a href="./dedicated destinations/thailand/t.html"><button class="book__now">Book Now</button></a>
@@ -247,7 +470,15 @@ <h2 class="section__title">HoneyMoon Travel</h2>
           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Spiti_River_Kaza_Himachal_Jun18_D72_7232.jpg/1200px-Spiti_River_Kaza_Himachal_Jun18_D72_7232.jpg" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p> Spiti</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-mountain"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fas fa-hiking"></i> 
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+            </div>
+
             <div class="booking__price">
               <div class="price"><span>From</span> $450</div>
               <a href="./dedicated destinations/spiti/spiti.html"><button class="book__now">Book Now</button></a>
@@ -258,7 +489,15 @@ <h2 class="section__title">HoneyMoon Travel</h2>
           <img src="https://images.cnbctv18.com/wp-content/uploads/2022/05/Goa-shutterstock-1000x573.jpg" alt="trip" height="250" width="45" />
           <div class="trip__details">
             <p>Goa</p>
-            <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
+            <div class="info">
+              <div class="tags">
+                <i class="fas fa-umbrella-beach"></i> 
+                <i class="fas fa-heart"></i>
+                <i class="fa-solid fa-wine-glass"></i>
+              </div>
+              <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
+            </div>
+           
             <div class="booking__price">
               <div class="price"><span>From</span> $400</div>
               <a href="./dedicated destinations/Goa/start.html"><button class="book__now">Book Now</button></a>