diff --git a/explore.css b/explore.css index 646224f1..148f0541 100644 --- a/explore.css +++ b/explore.css @@ -1,7 +1,7 @@ -* { +/* * { box-sizing: border-box; /* ADDED BORDER RADIUS IN IMAGE SECTION */ - border-radius: 20px; + /*border-radius: 20px; } .outer-box { @@ -17,7 +17,6 @@ .containers { display: flex; width: 90vw; - } .card { @@ -27,7 +26,7 @@ height: 70vh; border-radius: 35px 35px; /* border-radius: 20px; */ - color: #fff; + /* color: #fff; cursor: pointer; flex: 0.5; margin: 10px; @@ -37,7 +36,7 @@ flex-direction: column; } -/* .card:hover { +.card:hover { flex: 3; } @@ -50,7 +49,7 @@ visibility: visible; } */ -.info { +/* .info { position: absolute; bottom: 20px; left: 25%; @@ -77,7 +76,7 @@ margin-top: 10px; font-weight: 500; /* -webkit-text-stroke:0.5px beige; */ -} +/* } .card.active { flex: 3; @@ -90,7 +89,7 @@ .card.active .info { visibility: visible; -} +} @media (max-width: 1300px) { .containers { @@ -120,4 +119,159 @@ width: 100px; left: 0px; } -} \ No newline at end of file +} +*/ + +/* Destination Section */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +#Destinations { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.section__title { + margin: 10px; +} + +.section__subtitle { + margin-bottom: 10px; +} + +/* Swiper */ +.swiper-container { + width: 100%; + height: 100%; + overflow: hidden; +} + +.swiper-wrapper { + display: flex; +} + +.swiper-slide { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; +} + +.swiper-button-prev, +.swiper-button-next { + position: absolute; + top: 55%; + transform: translateY(-50%); + padding: 20px; + color: #ffffff; + background-color: transparent; + border: none; + padding: 20px 20px; + z-index: 10; + cursor: pointer; +} + +.swiper-button-prev { + left: 14px; +} + +.swiper-button-next { + right: 13px; +} + +.swiper-button-prev:hover, +.swiper-button-next:hover { + background-color: transparent; + color: #FF5656; +} + +/* Card */ +.card { + width: 100%; + max-width: 300px; + height: auto; + border-radius: 20px; + overflow: hidden; + border: 8px solid #6A5ACD; + position: relative; + transition: transform 0.3s ease, border-color 0.3s ease; +} + +.card-img { + width: 100%; + height: 100%; + object-fit: cover; + overflow: hidden; + border-radius: 15px solid #6A5ACD; + transition: transform 0.3s ease; +} + +.card-body { + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + border: none; + color: #fff; + padding: 30px; + display: flex; + flex-direction: column; + justify-content: center; + transition: opacity 0.5s ease-in-out; + opacity: 0; +} + +.card:hover .card-body { + opacity: 1; +} + +.card-title { + text-transform: uppercase; + font-size: 30px; + font-weight: 500; +} + +.card-info { + font-size: 16px; + line-height: 25px; + margin: 20px 0; + font-weight: 400; +} + +.card-btn { + color: #FF5656; + background-color: #ffffff; + padding: 10px 20px; + width: 120px; + border-radius: 5px; + text-transform: capitalize; + border: none; + outline: none; + font-weight: 500; + cursor: pointer; +} + +.card-btn:hover { + color: #ffffff; + background-color: #FF5656; +} + +.card:hover .card-img { + transform: scale(1.1); +} + +.card.active { + transform: scale(1.05); + z-index: 10; +} + +.card.active .card-body { + opacity: 1; +} diff --git a/explore.js b/explore.js index 97a2d9db..1551a898 100644 --- a/explore.js +++ b/explore.js @@ -1,28 +1,15 @@ -let lastClickedCard = document.querySelector(".active"); +var swiper = new Swiper('.swiper-container', { + loop: true, +}); -// Function to handle click events -function handleClick(card) { - // Remove active classes from all cards - const panels = document.querySelectorAll(".card"); - panels.forEach(panel => panel.classList.remove("active")); - // Add active class to the clicked card - card.classList.add("active"); - lastClickedCard = card; // Update the reference to the last clicked card +function goToNextSlide() { + swiper.slideNext(); } -// Attach click event listener to all cards -const panels = document.querySelectorAll(".card"); -panels.forEach(panel => panel.addEventListener("click", () => handleClick(panel))); +function goToPrevSlide() { + swiper.slidePrev(); +} -// Adjust the mouseover event listener -panels.forEach(panel => { - panel.addEventListener('mouseover', () => { - lastClickedCard.classList.remove("active"); - panel.classList.add('active'); - }); - panel.addEventListener('mouseout', () => { - panel.classList.remove('active'); - lastClickedCard.classList.add("active"); -}); -}); +document.querySelector('.swiper-button-next').addEventListener('click', goToNextSlide); +document.querySelector('.swiper-button-prev').addEventListener('click', goToPrevSlide); diff --git a/img/MuseumofFuture.jpg b/img/MuseumofFuture.jpg new file mode 100644 index 00000000..66e02db0 Binary files /dev/null and b/img/MuseumofFuture.jpg differ diff --git a/img/TajMahal.jpg b/img/TajMahal.jpg new file mode 100644 index 00000000..6e94bdfa Binary files /dev/null and b/img/TajMahal.jpg differ diff --git a/img/TimesSquare.jpg b/img/TimesSquare.jpg new file mode 100644 index 00000000..bcff3119 Binary files /dev/null and b/img/TimesSquare.jpg differ diff --git a/img/eiffelTower2.webp b/img/eiffelTower2.webp new file mode 100644 index 00000000..c2cc352a Binary files /dev/null and b/img/eiffelTower2.webp differ diff --git a/img/giantWheel.webp b/img/giantWheel.webp new file mode 100644 index 00000000..7d86634b Binary files /dev/null and b/img/giantWheel.webp differ diff --git a/img/lehLadakh.jpg b/img/lehLadakh.jpg new file mode 100644 index 00000000..eb540293 Binary files /dev/null and b/img/lehLadakh.jpg differ diff --git a/index.html b/index.html index 97331051..fcc71c58 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@ + @@ -621,7 +622,7 @@

Get Flat 15% OFF

-
+ - + slideshow +
- - +
- - - -
-
- -
-
- -

- ||Eiffel Tower|| -

-

PARIS

+
+ +
+
+ +
+
+ +

+ ||Eiffel Tower|| +

+

PARIS

+
+ +
+
+ +

||Giant Wheel||

+

LONDON

- -
-
+
+ +
+
+ +

||Goa Beach||

+

GOA

+
+
+ +
+
-

||Giant Wheel||

-

LONDON

+

||Male Beach||

+

MALDIVES

+
+
- -
-
- -

||Goa Beach||

-

GOA

+
+ +
+ --> + + +
+
+
+

Explore Top Destinations

+

+ Explore your dream places around the world. Here you can find your perfect destination. +

- -
-
- -

||Male Beach||

-

MALDIVES

+ +
+
+
+ Eiffel Tower +
+

Eiffel Tower

+

The Eiffel Tower is an iconic iron lattice tower in Paris, built for the 1889 World's Fair, standing at 324 meters tall.

+ +
+
+ +
+ The London Eye +
+

The London Eye

+

The London Eye, a striking 135-meter tall observation wheel on the South Bank of the Thames, offers panoramic views of the city's landmarks.

+ +
+
+ +
+ Male Beach +
+

Male Beach

+

Male Beach, the pristine stretch of golden sand on Malé Atoll, offers a serene escape with crystal-clear waters and vibrant marine life.

+ +
+
+ +
+ Museum of the Future +
+

Museum of the Future

+

The Museum of the Future in Dubai is a visionary architectural gem that explores cutting-edge innovations and the potential of tomorrow's technology.

+ +
+
+ +
+ Taj Mahal +
+

Taj Mahal

+

The Taj Mahal, a majestic white marble mausoleum in Agra, is a timeless symbol of love and architectural brilliance.

+ +
+
+ +
+ Leh Ladakh +
+

Leh Ladakh

+

Leh Ladakh, a breathtaking high-altitude region in northern India, captivates with its rugged landscapes, serene monasteries, and vibrant cultural heritage.

+ +
+
+ +
+ Times Square +
+

Times Square

+

Times Square is a vibrant commercial and entertainment hub in New York City, renowned for its bright lights, Broadway theaters, and bustling atmosphere.

+ +
+
+ +
- -
-
- + + +
@@ -874,6 +960,7 @@

+
@@ -998,8 +1085,8 @@

Testimonials

@@ -1104,18 +1191,6 @@

Katie

- - - - - - - - - - - -