<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iknow Travel</title>
<meta name="google" content="notranslate">
<link rel="icon" type="image/png" sizes="152x152" href="https://web.archive.org/web/20170321014359im_/http://iknow.travel/images/favicon-152.png">
<link rel="dns-prefetch" href="https://lp-cms-production.imgix.net" />
<style>
html, body {
height: 100%;
}
.top-right-menu {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 15px;
z-index: 4;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
}
.top-right-menu div {
cursor: pointer;
font-size: 16px;
color: white;
font-weight: bold;
}
.top-right-menu .active {
text-decoration: underline;
}
.svg-container {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.svg-container svg {
width: 100%;
height: 100%;
fill: white;
}
@media screen and (max-width: 768px) {
.top-right-menu {
flex-direction: column;
top: 10px;
right: 10px;
gap: 10px;
}
.top-right-menu div {
font-size: 14px;
}
.logo {
top: 5px;
left: 5px;
}
.side-info {
left: 10px;
padding: 15px;
max-width: 250px;
}
.side-info h1 {
font-size: 20px;
}
.side-info p {
font-size: 14px;
}
.thumbnail-bar {
gap: 5px;
bottom: 100px!important;
right: 10px;
}
.thumbnail-bar img {
width: 60px!important;
height: 30px!important;
}
}
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
height: 100%;
}
.slideshow-container {
position: relative;
width: 100vw;
height: 100vh;
}
.main-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.main-image.hidden {
opacity: 0;
transform: scale(1.2);
}
.side-info {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 20px;
border-radius: 10px;
z-index: 2;
max-width: 300px;
}
.side-info h1 {
margin: 0;
font-size: 24px;
}
.side-info p {
margin: 10px 0 0;
font-size: 16px;
}
.thumbnail-bar {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
z-index: 3;
overflow-x: auto;
white-space: nowrap;
}
.thumbnail-bar img {
width: 100px;
height: 56px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
border-radius: 5px;
opacity: 0.5;
transition: opacity 0.3s, border-color 0.3s;
}
.thumbnail-bar img.active {
opacity: 1;
border-color: white;
}
.logo {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
background: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 5px;
}
.logo img {
width: 140px;
height: 25px;
}
.progress-bar-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(0, 0, 0, 0.3);
z-index: 4;
}
.progress-bar {
width: 0;
height: 100%;
background: white;
transition: width 5s linear;
}
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: Arial, sans-serif;
z-index: 100;
animation: fadeOut 1s ease-in-out forwards;
animation-delay: 2s;
}
@keyframes fadeOut {
to {
opacity: 0;
visibility: hidden;
}
}
</style>
</head>
<body>
<div class="loading-screen">Loading...</div>
<div class="top-right-menu">
<div class="active">Home</div>
<div>Holidays</div>
<div>Destinations</div>
<div>Flights</div>
<div>Offers</div>
<div>Contact</div>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</div>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="slideshow-container">
<!-- Logo -->
<div class="logo">
<img src="https://web.archive.org/web/20170313235708im_/http://iknow.travel/images/navbar-logo.svg" alt="Logo">
</div>
<!-- Main Images -->
<img loading="lazy" id="mainImage1" class="main-image" src="https://lp-cms-production.imgix.net/2024-07/shutterstock2009607746.jpg?fit=crop&w=1500&auto=format&q=100" alt="Cao Bang, Vietnam">
<img loading="lazy" id="mainImage2" class="main-image hidden" src="https://lp-cms-production.imgix.net/2022-11/iStock-1395608080.jpg?fit=crop&w=1500&auto=format&q=100" alt="São Tomé and Príncipe">
<img loading="lazy" id="mainImage3" class="main-image hidden" src="https://lp-cms-production.imgix.net/2022-11/iStock-1335362981-RFC.jpg?fit=crop&w=1500&auto=format&q=100" alt="image">
<img loading="lazy" id="mainImage4" class="main-image hidden" src="https://lp-cms-production.imgix.net/2025-01/Shutterstock1091100218.jpg?fit=crop&w=1500&auto=format&q=100" alt="image">
<img loading="lazy" id="mainImage5" class="main-image hidden" src="https://lp-cms-production.imgix.net/2024-08/Cambodia-Koh-Sdach-rchphoto-GettyImages-827555434-RFE.jpg?fit=crop&w=1500&auto=format&q=100" alt="image">
<!-- Side Information -->
<div class="side-info">
<h1 id="imageTitle">Cao Bang, Vietnam</h1>
<p id="imageDescription">Cao Bang, in the north of Vietnam, has some of the most impressive natural sites in the country, but without the crowds. Start at Phat Tich Truc Lam, a temple near the Chinese border that offers wonderful views over the region’s rolling hills. Ban Gioc Waterfall – one of the most magical waterfalls in Southeast Asia and the largest in Vietnam – cascades over multiple tiers and can be visited on a boat trip or bamboo raft. The nearby Nguom Ngao Cave system extends for several kilometers underground and is home to many breathtaking stalactites and stalagmites.</p>
</div>
<!-- Thumbnail Bar -->
<div class="thumbnail-bar" id="thumbnailBar">
<img src="https://lp-cms-production.imgix.net/2024-07/shutterstock2009607746.jpg?fit=crop&w=200&auto=format&q=50" alt="Thumbnail 1" onclick="showImage(0)">
<img src="https://lp-cms-production.imgix.net/2022-11/iStock-1395608080.jpg?fit=crop&w=200&auto=format&q=50" alt="Thumbnail 2" onclick="showImage(1)">
<img src="https://lp-cms-production.imgix.net/2022-11/iStock-1335362981-RFC.jpg?fit=crop&w=200&auto=format&q=50" alt="Thumbnail 3" onclick="showImage(2)">
<img src="https://lp-cms-production.imgix.net/2025-01/Shutterstock1091100218.jpg?fit=crop&w=200&auto=format&q=50" alt="Thumbnail 4" onclick="showImage(3)">
<img src="https://lp-cms-production.imgix.net/2024-08/Cambodia-Koh-Sdach-rchphoto-GettyImages-827555434-RFE.jpg?fit=crop&w=200&auto=format&q=50" alt="Thumbnail 5" onclick="showImage(4)">
</div>
</div>
<script>
const images = [
{ id: "mainImage1", title: "Cao Bang, Vietnam", description: "Cao Bang, in the north of Vietnam, has some of the most impressive natural sites in the country, but without the crowds. Start at Phat Tich Truc Lam, a temple near the Chinese border that offers wonderful views over the region’s rolling hills. Ban Gioc Waterfall – one of the most magical waterfalls in Southeast Asia and the largest in Vietnam – cascades over multiple tiers and can be visited on a boat trip or bamboo raft." },
{ id: "mainImage2", title: "São Tomé and Príncipe", description: "Adrift in the Gulf of Guinea, this two-island nation is Africa’s second-smallest and one that blends natural wonders with a gripping history. São Tomé and Príncipe (STP) is a safe and welcoming ecotourism destination, as rich in jungles as it is beautiful. This is especially true on unspoiled Príncipe, which has a population of just 7000." },
{ id: "mainImage3", title: "Stewart Island/Rakiura, New Zealand", description: "Providing a southern anchor to New Zealand, Stewart Island is known in Māori as Rakiura – Glowing Skies – in reference to the shimmering aurora australis (southern lights) phenomenon that is often sighted during the cooler and longer nights of a southern hemisphere winter. " },
{ id: "mainImage4", title: "Langtang Valley, Nepal", description: "Nowhere has trekking quite like in Nepal. Breathless trails strain over the highest mountains on Earth, and the reward for a hard day’s hiking is a slice of apple pie and a cold beer by a yak-dung fire. You’ll need a permit to take on the most popular trails, but beyond that, the sky is literally the limit. " },
{ id: "mainImage5", title: "Koh Sdach Islands, Koh Kong", description: "Just off the southwest tip of Botum Sakor National Park, the Koh Sdach Archipelago is a castaway cluster of 12 small islands, many of which have good snorkeling and scuba diving. The main island – Koh Sdach (King's Island) – lacks beaches but it's a great place to experience island life without the crowds." }
];
let currentIndex = 0;
function showImage(index) {
document.querySelectorAll('.main-image').forEach((img, idx) => {
img.classList.toggle('hidden', idx !== index);
});
const { title, description } = images[index];
document.getElementById("imageTitle").textContent = title;
document.getElementById("imageDescription").textContent = description;
document.querySelectorAll('.thumbnail-bar img').forEach((thumb, idx) => {
thumb.classList.toggle('active', idx === index);
});
currentIndex = index;
}
function startSlideshow() {
const progressBar = document.getElementById('progressBar');
function resetProgressBar() {
progressBar.style.transition = 'none';
progressBar.style.width = '0';
setTimeout(() => {
progressBar.style.transition = 'width 5s linear';
progressBar.style.width = '100%';
}, 50);
}
function advanceSlideshow() {
const nextIndex = (currentIndex + 1) % images.length;
showImage(nextIndex);
resetProgressBar();
}
resetProgressBar();
setInterval(advanceSlideshow, 5000);
}
window.onload = () => {
showImage(currentIndex);
startSlideshow();
};
</script>
<script>
function updateImageSources() {
const screenWidth = window.innerWidth;
const newWidth = screenWidth <= 768 ? 500 : 1500;
const images = document.querySelectorAll('.main-image');
images.forEach(img => {
const currentSrc = img.src;
const updatedSrc = currentSrc.replace(/w=\d+/g, `w=${newWidth}`);
img.src = updatedSrc;
});
}
updateImageSources();
// Ekran boyutu değiştiğinde güncelle
window.addEventListener('resize', updateImageSources);
</script>
</body>
</html>