Skip to content

Commit 23fcf88

Browse files
iamwatchdogsiamwatchdogs
authored
PR #34: Tourist Website
added a website Merge pull request #34 from Inija-2503/Touri
2 parents 003c672 + 9dcf6c8 commit 23fcf88

File tree

3 files changed

+496
-0
lines changed

3 files changed

+496
-0
lines changed

‎Tourist/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
<script defer src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
10+
<script defer src="main.js"></script>
11+
<title>Responsive Vertical Slider with Animated Clip Path</title>
12+
</head>
13+
<body>
14+
<div class="swiper-container">
15+
<div class="swiper-wrapper">
16+
<div class="swiper-slide">
17+
<div class="content" data-content="one">
18+
<h1>Hallstatt, Austria</h1>
19+
<p>
20+
Visit Hallstatt, Austria, a beautiful village by a clear lake,
21+
surrounded by tall mountains. Walk through old streets, see
22+
ancient salt mines, and enjoy the peaceful views. This tour is
23+
perfect for nature lovers and history fans.
24+
</p>
25+
</div>
26+
<div class="background" data-item="one"></div>
27+
</div>
28+
29+
<div class="swiper-slide">
30+
<div class="content" data-content="two">
31+
<h1>Paris, France</h1>
32+
<p>
33+
Explore Paris, the City of Light, known for its romance and famous
34+
landmarks like the Eiffel Tower. Enjoy delicious food, visit the
35+
Louvre, and stroll along the Seine River. Choose this tour to
36+
experience the charm and culture of France.
37+
</p>
38+
</div>
39+
<div class="background" data-item="two"></div>
40+
</div>
41+
42+
<div class="swiper-slide">
43+
<div class="content" data-content="three">
44+
<h1>Amsterdam, Netherlands</h1>
45+
<p>
46+
Discover Amsterdam, a city full of canals, bicycles, and culture.
47+
Visit the Van Gogh Museum, take a canal cruise, and explore lively
48+
streets. This tour is great for those who love art, history, and a
49+
vibrant city atmosphere.
50+
</p>
51+
</div>
52+
<div class="background" data-item="three"></div>
53+
</div>
54+
55+
<div class="swiper-slide">
56+
<div class="content" data-content="four">
57+
<h1>Kyoto, Japan</h1>
58+
<p>
59+
Travel to Kyoto, Japan, a city rich in tradition and beauty. Visit
60+
ancient temples, enjoy beautiful gardens, and see colorful geisha
61+
districts. This tour is perfect for those who want to experience
62+
Japan's history and culture.
63+
</p>
64+
</div>
65+
<div class="background" data-item="four"></div>
66+
</div>
67+
68+
<div class="swiper-slide">
69+
<div class="content" data-content="five">
70+
<h1>New York, USA</h1>
71+
<p>
72+
Experience New York City, where excitement and adventure await at
73+
every corner. See the Statue of Liberty, enjoy a Broadway show,
74+
and taste food from around the world. This tour is ideal for those
75+
who want to feel the energy of a big city.
76+
</p>
77+
</div>
78+
<div class="background" data-item="five"></div>
79+
</div>
80+
</div>
81+
<div class="swiper-pagination"></div>
82+
</div>
83+
84+
<div class="footer">
85+
<div class="feature">
86+
<i class="fa-solid fa-house"></i>
87+
<div>
88+
<p>Accommodation</p>
89+
<small>5 days</small>
90+
</div>
91+
</div>
92+
<hr />
93+
<div class="feature">
94+
<i class="fa-solid fa-headphones"></i>
95+
<div>
96+
<p>Live guide</p>
97+
<small>available</small>
98+
</div>
99+
</div>
100+
<hr />
101+
<div class="feature">
102+
<i class="fa-solid fa-clock"></i>
103+
<div>
104+
<p>Easy cancellation</p>
105+
<small>cancel before 48 hours</small>
106+
</div>
107+
</div>
108+
<hr />
109+
<button class="btn">Book Now</button>
110+
</div>
111+
</body>
112+
</html>

‎Tourist/main.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const swiper = new Swiper(".swiper-container", {
2+
direction: "vertical",
3+
effect: "fade",
4+
speed: 1000,
5+
loop: true,
6+
pagination: {
7+
el: ".swiper-pagination",
8+
clickable: true,
9+
},
10+
mousewheel: {
11+
invert: false,
12+
forceToAxis: false,
13+
thresholdDelta: 50,
14+
sensitivity: 1,
15+
},
16+
on: {
17+
init: function () {
18+
let activeSlide = this.slides[this.activeIndex];
19+
let background = activeSlide.querySelector(".background");
20+
background.classList.add("animation");
21+
},
22+
slideChange: function () {
23+
this.slides.forEach((slide) => {
24+
let background = slide.querySelector(".background");
25+
if (background) {
26+
background.classList.remove("animation");
27+
}
28+
});
29+
let activeSlide = this.slides[this.activeIndex];
30+
let background = activeSlide.querySelector(".background");
31+
if (background) {
32+
background.classList.add("animation");
33+
}
34+
},
35+
},
36+
});
37+

0 commit comments

Comments
 (0)