Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added a website #34

Merged
merged 1 commit into from
Oct 26, 2024
Merged

added a website #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 112 additions & 0 deletions Tourist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script defer src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script defer src="main.js"></script>
<title>Responsive Vertical Slider with Animated Clip Path</title>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content" data-content="one">
<h1>Hallstatt, Austria</h1>
<p>
Visit Hallstatt, Austria, a beautiful village by a clear lake,
surrounded by tall mountains. Walk through old streets, see
ancient salt mines, and enjoy the peaceful views. This tour is
perfect for nature lovers and history fans.
</p>
</div>
<div class="background" data-item="one"></div>
</div>

<div class="swiper-slide">
<div class="content" data-content="two">
<h1>Paris, France</h1>
<p>
Explore Paris, the City of Light, known for its romance and famous
landmarks like the Eiffel Tower. Enjoy delicious food, visit the
Louvre, and stroll along the Seine River. Choose this tour to
experience the charm and culture of France.
</p>
</div>
<div class="background" data-item="two"></div>
</div>

<div class="swiper-slide">
<div class="content" data-content="three">
<h1>Amsterdam, Netherlands</h1>
<p>
Discover Amsterdam, a city full of canals, bicycles, and culture.
Visit the Van Gogh Museum, take a canal cruise, and explore lively
streets. This tour is great for those who love art, history, and a
vibrant city atmosphere.
</p>
</div>
<div class="background" data-item="three"></div>
</div>

<div class="swiper-slide">
<div class="content" data-content="four">
<h1>Kyoto, Japan</h1>
<p>
Travel to Kyoto, Japan, a city rich in tradition and beauty. Visit
ancient temples, enjoy beautiful gardens, and see colorful geisha
districts. This tour is perfect for those who want to experience
Japan's history and culture.
</p>
</div>
<div class="background" data-item="four"></div>
</div>

<div class="swiper-slide">
<div class="content" data-content="five">
<h1>New York, USA</h1>
<p>
Experience New York City, where excitement and adventure await at
every corner. See the Statue of Liberty, enjoy a Broadway show,
and taste food from around the world. This tour is ideal for those
who want to feel the energy of a big city.
</p>
</div>
<div class="background" data-item="five"></div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>

<div class="footer">
<div class="feature">
<i class="fa-solid fa-house"></i>
<div>
<p>Accommodation</p>
<small>5 days</small>
</div>
</div>
<hr />
<div class="feature">
<i class="fa-solid fa-headphones"></i>
<div>
<p>Live guide</p>
<small>available</small>
</div>
</div>
<hr />
<div class="feature">
<i class="fa-solid fa-clock"></i>
<div>
<p>Easy cancellation</p>
<small>cancel before 48 hours</small>
</div>
</div>
<hr />
<button class="btn">Book Now</button>
</div>
</body>
</html>
37 changes: 37 additions & 0 deletions Tourist/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
const swiper = new Swiper(".swiper-container", {
direction: "vertical",
effect: "fade",
speed: 1000,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
mousewheel: {
invert: false,
forceToAxis: false,
thresholdDelta: 50,
sensitivity: 1,
},
on: {
init: function () {
let activeSlide = this.slides[this.activeIndex];
let background = activeSlide.querySelector(".background");
background.classList.add("animation");
},
slideChange: function () {
this.slides.forEach((slide) => {
let background = slide.querySelector(".background");
if (background) {
background.classList.remove("animation");
}
});
let activeSlide = this.slides[this.activeIndex];
let background = activeSlide.querySelector(".background");
if (background) {
background.classList.add("animation");
}
},
},
});

Loading
Loading