Merge pull request #761 from sharmi4590/IG

fix: BUG UI Enhancement of Image Gallery

imstyle.css

@@ -0,0 +1,25 @@
+.hero{
+    width:100%;
+    height:90vh;
+    background: white;
+    overflow: hidden;
+}
+.hero .carousel{
+    width:300px;
+    margin:100px auto 0;
+    overflow:visible;
+}
+.carousel img{
+    -webkit-box-reflect: below 20px linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.3));
+    width:600px;
+    height:400px;
+}
+.dark-theme .hero{
+    background:#0e1525;
+}
+@media screen and (max-width:500px) {
+    .carousel img{
+        width:250px;
+        height: 200px;
+    }
+}

index.html

@@ -96,8 +96,41 @@
         width: 190%;
       }
     }
+    .gallery-rotate-image .image-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px; /* Adjust the gap between images */
+}
+
+.gallery-rotate-image .image-container span {
+  display: inline-block;
+}
+
+.trip-gallery-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px; /* Adjust the gap between images */
+}
+
+.trip-gallery-container .image-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.trip-gallery-container .image-container img {
+  max-width: 100%;
+  height: auto;
+}
+
+.btn-container {
+  display: flex;
+  justify-content: center;
+  gap: 8px; /* Adjust the gap between buttons */
+}
   </style>
-
+<link rel="stylesheet" href="imstyle.css">
+<link rel="stylesheet" href="jquery.flipster.min.css">
 
 </head>
 
@@ -537,35 +570,56 @@ <h2 class="section__title">Best trip packages</h2>
         </div>
       </div>
     </section>
+    <div class="hero">
+      <div class="carousel">
+        <ul>
+            <li><img src="https://i.ibb.co/ZYDJ6vv/pexels-spencer-davis-4356144.jpg"></li>
+            <li><img src="https://i.ibb.co/W3HTbYG/pexels-zakaria-boumliha-2827374.jpg"></li>
+            <li><img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg"></li>
+            <li><img src="https://www.shutterstock.com/image-photo/attractive-young-female-tourist-exploring-260nw-2206967581.jpg"></li>
+            <li><img src="https://thumbs.dreamstime.com/b/young-man-tourist-sail-long-tail-thailand-boat-ocean-sea-vacation-travel-trip-beautiful-nature-87331931.jpg"></li>
+            <li><img src="https://www.tourmyindia.com/blog//wp-content/uploads/2020/11/Feature-Akshardham-Temple.jpg"></li>
+            <li><img src="https://etimg.etb2bimg.com/photo/106124800.cms"></li>
+            <li><img src="https://i.insider.com/5dcc2f02e94e860aff271137?width=700"></li>
+            <li><img src="https://static01.nyt.com/images/2022/03/23/multimedia/23-virus-briefing-capitol/23-virus-briefing-capitol-articleLarge.jpg?quality=75&auto=webp&disable=upscale"></li>
+            <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWh9aGHycWhRya4V6ZiJFL26LyIHheiu-EoQ&s"></li>
+
+        </ul>
+      </div>
+
+
 
+</div>
 
-    <section class="gallary" id="ReviewGallery">
-      <div class="section__container gallary__container">
-        <div class="section__container gallary__container" id="originalDiv">
-          <div class="image__gallary">
-            <div class="gallary__col" data-aos="zoom-in">
-              <img src="https://i.ibb.co/ZYDJ6vv/pexels-spencer-davis-4356144.jpg" alt="gallary" />
-            </div>
-            <div class="gallary__col" data-aos="zoom-in">
-              <img src="https://i.ibb.co/W3HTbYG/pexels-zakaria-boumliha-2827374.jpg" alt="gallary" />
-              <img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg" alt="gallary" />
-            </div>
-          </div>
-          <div class="gallary__content">
-            <div>
-              <h2 class="section__title" data-aos="zoom-in">
-                Our trip gallery that will inspire you
-              </h2>
-              <p class="section__subtitle" data-aos="zoom-in">
-                Explore your suitable and dream places around the world. Here you
-                can find your right destination.
-              </p>
-              <button class="btn btn-style" id="btn-page" onclick="replaceDivs()" data-aos="zoom-in"
-                style="box-shadow: 2px 2px 8px rgb(0, 191, 255);">View All</button>
-            </div>
-          </div>
+    <script
+    src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+    crossorigin="anonymous"></script>
+    <script src="jquery.flipster.min.js"></script>
+<script>
+$('.carousel').flipster({
+    style:'carousel',
+    spacing: -0.3,
+});
+</script>
+<section class="gallary" id="ReviewGallery">
+  <div class="section__container gallary__container">
+    <div class="section__container gallary__container" id="originalDiv">
+      <div class="gallary__content">
+        <div>
+          <h2 class="section__title" data-aos="zoom-in">
+            Our trip gallery that will inspire you
+          </h2>
+          <p class="section__subtitle" data-aos="zoom-in">
+            Explore your suitable and dream places around the world. Here you
+            can find your right destination.
+          </p>
+          <button class="btn btn-style" id="btn-page" onclick="replaceDivs()" data-aos="zoom-in"
+            style="box-shadow: 2px 2px 8px rgb(0, 191, 255);">View All</button>
         </div>
       </div>
+    </div>
+  </div>
       <br><br>
       <!-- New div components (hidden initially) -->
       <div id="newDiv" style="display: none;" data-aos="zoom-in">
@@ -674,6 +728,13 @@ <h2 class="section__title" data-aos="zoom-in">
         </div>
       </div>
     </section>
+    <script>
+      function replaceDivs() {
+    document.querySelector('.hero').style.display = 'none';
+    document.getElementById('originalDiv').style.display = 'none';
+    document.getElementById('newDiv').style.display = 'block';
+  }
+    </script>
     <br /><br /><br /><br /><br /><br />
 
     <!-- Testimonials Section -->