images added

index.html

@@ -362,95 +362,88 @@ <h2 class="section__title" data-aos="fade-in">Explore top destinations</h2>
     </div>
 
     <!-- slideshow -->
-    <!-- <div class="slideshow-container" data-aos="fade-up"> -->
+<!-- <div class="slideshow-container" data-aos="fade-up"> -->
 
-    <!-- Next and previous buttons -->
-    <!-- <div class="destination__nav">
-          <span onclick="pullSlide(-1)"><i class="ri-arrow-left-s-line"></i></span>
-          <span onclick="pullSlide(1)"><i class="ri-arrow-right-s-line"></i></span>
-        </div> -->
+<!-- Next and previous buttons -->
+<!-- <div class="destination__nav">
+      <span onclick="pullSlide(-1)"><i class="ri-arrow-left-s-line"></i></span>
+      <span onclick="pullSlide(1)"><i class="ri-arrow-right-s-line"></i></span>
+    </div> -->
 
-    <!-- Full-width images with number and caption text -->
-    <!-- <div class="mySlides">
-          <img src="./img/eiffelTower.webp" style="width:100%">
-        </div>
-
-        <div class="mySlides">
-          <img src="./img/london.jpg" style="width:100%">
-        </div>
-
-        <div class="mySlides">
-          <img src="./img/goa.jpg" style="width:100%">
-        </div>
-
-        <div class="mySlides">
-          <img src="./img/maldives.jpg" style="width:100%">
-        </div>
-        <div class="imageDots">
-          <span class="active"></span>
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-      </div> -->
-    <div class="outer-box">
-      <div class="containers">
-
-          <div class="card active" style="
-            background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-              url('/img/paris.jpg')
-          ">
-          <div class="info">
-
-            <p>
-              ||Eiffel Tower||
-            </p>
-            <h3>PARIS</h3>
-          </div>
-        </div>
+<!-- Full-width images with number and caption text -->
+<!-- <div class="mySlides">
+      <img src="./img/eiffelTower.webp" style="width:100%">
+    </div>
 
-        <div class="card" style="
-              background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-                url('/img/london.jpg')
-            ">
-          <div class="info">
+    <div class="mySlides">
+      <img src="./img/london.jpg" style="width:100%">
+    </div>
 
-            <p>
-              ||Giant Wheel||
-            </p>
-            <h3>LONDON</h3>
-          </div>
-        </div>
+    <div class="mySlides">
+      <img src="./img/goa.jpg" style="width:100%">
+    </div>
 
-        <div class="card" style="
-              background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-                url('/img/goa.jpg')
-            ">
-          <div class="info">
+    <div class="mySlides">
+      <img src="./img/maldives.jpg" style="width:100%">
+    </div>
+    <div class="imageDots">
+      <span class="active"></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div> -->
+<div class="outer-box">
+  <div class="containers">
+
+    <div class="card active" style="
+      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+        url('./img/eiffelTower.webp')
+    ">
+      <div class="info">
+        <img src="./img/eiffelTower.webp" alt="Eiffel Tower" style="width:100%">
+        <p>||Eiffel Tower||</p>
+        <h3>PARIS</h3>
+      </div>
+    </div>
 
-            <p>
-              ||Goa Beach||
-            </p>
-            <h3>GOA</h3>
-          </div>
-        </div>
+    <div class="card" style="
+      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+        url('./img/london.jpg')
+    ">
+      <div class="info">
+        <img src="./img/london.jpg" alt="Giant Wheel" style="width:100%">
+        <p>||Giant Wheel||</p>
+        <h3>LONDON</h3>
+      </div>
+    </div>
 
-        <div class="card" style="
-              background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-                url('/img/maldives.jpg')">
-          <div class="info">
+    <div class="card" style="
+      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+        url('./img/goa.jpg')
+    ">
+      <div class="info">
+        <img src="./img/goa.jpg" alt="Goa Beach" style="width:100%">
+        <p>||Goa Beach||</p>
+        <h3>GOA</h3>
+      </div>
+    </div>
 
-            <p>
-              ||Male Beach||
-            </p>
-            <h3>MALDIVES</h3>
-          </div>
-        </div>
+    <div class="card" style="
+      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+        url('./img/maldives.jpg')
+    ">
+      <div class="info">
+        <img src="./img/maldives.jpg" alt="Male Beach" style="width:100%">
+        <p>||Male Beach||</p>
+        <h3>MALDIVES</h3>
+      </div>
+    </div>
 
+  </div>
+</div>
 
 
-      </div>
-    </div>
     <script src="explore.js"></script>
     <!-- </section> -->