Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>

<head>

<title>AURA | Cinematic Travel Discovery</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

serif: ['Playfair Display', 'serif'],

colors: {

gold: '#D4AF37',

dark: '#0a0a0a',

surface: 'rgba(255, 255, 255, 0.05)',

}

</script>

<style>

/* Custom Styles & Micro-interactions */

body {

background-color: #050505;

color: #ffffff;

overflow-x: hidden;

}

/* Glassmorphism Utilities */

.glass {

background: rgba(15, 15, 15, 0.4);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border: 1px solid rgba(255, 255, 255, 0.08);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);

}

.glass-nav {

background: linear-gradient(to bottom, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0) 100%);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

/* Hide Scrollbar but keep functionality */

.no-scrollbar::-webkit-scrollbar {

display: none;

}

.no-scrollbar {

-ms-overflow-style: none;

scrollbar-width: none;

}

/* Hero Carousel Animations */

.hero-slide {

opacity: 0;

transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);

transform: scale(1.05);

z-index: 0;

pointer-events: none;

}

.hero-slide.active {

opacity: 1;

transform: scale(1);

z-index: 10;

pointer-events: auto;

}

/* Text Reveal Animation for active slide */

.hero-slide .reveal-text {

transform: translateY(30px);

opacity: 0;

transition: transform 0.8s ease-out, opacity 0.8s ease-out;

}

.hero-slide.active .reveal-text {

transform: translateY(0);

opacity: 1;

}

.hero-slide.active .delay-1 { transition-delay: 0.3s; }

.hero-slide.active .delay-2 { transition-delay: 0.5s; }

.hero-slide.active .delay-3 { transition-delay: 0.7s; }

/* Button Hover Effects */

.btn-glow {

position: relative;

overflow: hidden;

transition: all 0.3s ease;

}

.btn-glow::after {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);

opacity: 0;

transform: scale(0.5);

transition: transform 0.3s ease, opacity 0.3s ease;

}

.btn-glow:hover::after {

opacity: 1;

transform: scale(1);

}

/* Star Rating Animation */

.star-rating i {

transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;

}

.star-rating i:hover {

transform: scale(1.3);

}

.star-rating i.active {

color: #D4AF37; /* Gold */

}

.star-rating i.voted-anim {

animation: starPop 0.4s ease forwards;

}

@keyframes starPop {

0% { transform: scale(1); }

50% { transform: scale(1.4); color: #FFF; }

100% { transform: scale(1); color: #D4AF37; }

}

/* Destination Card Hover Reveal */

.dest-card .content-reveal {

transform: translateY(100%);

opacity: 0;

transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}

.dest-card:hover .content-reveal {

transform: translateY(0);

opacity: 1;

}

.dest-card:hover .title-shift {

transform: translateY(-10px);

}

/* Image Zoom on hover */

.zoom-img-container img {

transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.zoom-img-container:hover img {

transform: scale(1.08);

}

/* Preloader */

#preloader {

transition: opacity 0.5s ease-out, visibility 0.5s ease-out;

}

</style>

</head>

</div>

<style>

@keyframes slide {

0% { left: -50%; }

100% { left: 100%; }

}

</style>

AURA

</a>

<a href="#destinations" class="hover:text-gold transition-colors">DESTINATIONS</a>

<a href="#popular" class="hover:text-gold transition-colors">POPULAR</a>

<a href="#contact" class="hover:text-gold transition-colors">CONTACT</a>

BOOK NOW

</button>

</div>

</button>

</div>

<a href="#destinations" class="text-lg tracking-widest hover:text-gold mobile-link">DESTINATIONS</a>

<a href="#popular" class="text-lg tracking-widest hover:text-gold mobile-link">POPULAR</a>

<a href="#contact" class="text-lg tracking-widest hover:text-gold mobile-link">CONTACT</a>

</div>

</nav>

</div>

<span class="text-xs tracking-widest uppercase text-gray-300">4.8 • Historical</span>

</div>

<h1 class="text-5xl md:text-7xl font-serif font-bold mb-4 leading-tight reveal-text delay-2">Kyoto,<br><span class="text-transparent bg-clip-text bg-gradient-to-r from-gold to-yellow-200">Japan</span></h1>

<p class="text-gray-300 mb-8 font-light leading-relaxed reveal-text delay-3">Step into a world where ancient traditions blend seamlessly with breathtaking natural beauty. Discover serene temples and bamboo forests.</p>

<span class="tracking-widest text-sm font-medium">DISCOVER MORE</span>

</button>

</div>

</div>

<span class="text-xs tracking-widest uppercase text-gray-300">5.0 • Coastal</span>

</div>

<h1 class="text-5xl md:text-7xl font-serif font-bold mb-4 leading-tight reveal-text delay-2">Santorini,<br><span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-200">Greece</span></h1>

<p class="text-gray-300 mb-8 font-light leading-relaxed reveal-text delay-3">Experience the magic of whitewashed architecture clinging to dramatic cliffs, overlooking the deep azure of the Aegean Sea.</p>

<span class="tracking-widest text-sm font-medium">DISCOVER MORE</span>

</button>

</div>

</div>

<span class="text-xs tracking-widest uppercase text-gray-300">4.9 • Nature</span>

</div>

<h1 class="text-5xl md:text-7xl font-serif font-bold mb-4 leading-tight reveal-text delay-2">Zermatt,<br><span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-200 to-white">Switzerland</span></h1>

<p class="text-gray-300 mb-8 font-light leading-relaxed reveal-text delay-3">Breathe in the crisp mountain air surrounded by majestic snow-capped peaks. The ultimate escape for adventurers and dreamers alike.</p>

<span class="tracking-widest text-sm font-medium">DISCOVER MORE</span>

</button>

</div>

</button>

</button>

</div>

</div>

</section>

<div>

<h4 class="text-gold tracking-widest text-sm font-medium mb-2">CURATED JOURNEYS</h4>

<h2 class="text-4xl md:text-5xl font-serif">Featured Destinations</h2>

</div>

</button>

</button>

</div>

PERU

</div>

<h3 class="text-2xl font-serif mb-1">Machu Picchu</h3>

<i class="fas fa-map-marker-alt text-gold"></i> Andes Mountains

</p>

</div>

<p class="text-sm text-gray-400 font-light mb-4 line-clamp-3">Explore the breathtaking lost city of the Incas, set high in the Andes Mountains. A testament to human engineering and spiritual devotion.</p>

EXPLORE ROUTE

</button>

</div>

JORDAN

</div>

<i class="fas fa-map-marker-alt text-gold"></i> Petra

</p>

</div>

<p class="text-sm text-gray-400 font-light mb-4 line-clamp-3">Wander through the narrow Siq to witness the magnificent Treasury carved directly into vibrant red, white, and pink sandstone cliffs.</p>

EXPLORE ROUTE

</button>

</div>

ITALY

</div>

<h3 class="text-2xl font-serif mb-1">Amalfi Coast</h3>

<i class="fas fa-map-marker-alt text-gold"></i> Campania

</p>

</div>

<p class="text-sm text-gray-400 font-light mb-4 line-clamp-3">Experience "La Dolce Vita" driving along sheer cliffs with pastel-colored fishing villages plunging into the Mediterranean Sea.</p>

EXPLORE ROUTE

</button>

</div>

INDONESIA

</div>

<h3 class="text-2xl font-serif mb-1">Ubud Retreat</h3>

<i class="fas fa-map-marker-alt text-gold"></i> Bali

</p>

</div>

<p class="text-sm text-gray-400 font-light mb-4 line-clamp-3">Find inner peace among lush rice terraces, ancient Hindu shrines, and vibrant rainforests in the spiritual heart of Bali.</p>

EXPLORE ROUTE

</button>

</div>

</section>

<h4 class="text-gold tracking-widest text-sm font-medium mb-2">COMMUNITY CHOICE</h4>

<h2 class="text-4xl md:text-5xl font-serif mb-4">Rate Your Favorites</h2>

<p class="text-gray-400 font-light max-w-2xl mx-auto">Help fellow travelers discover the world's hidden gems by casting your vote on these spectacular locations.</p>

</div>

</div>

<h3 class="text-xl font-serif">Dubai Skyline</h3>

</div>

<p class="text-sm text-gray-400 font-light mb-6">Modern architectural marvels piercing the desert sky.</p>

</div>

<span class="text-sm text-gray-400">Your Rating</span>

</div>

</div>

<h3 class="text-xl font-serif">Eiffel Tower</h3>

<span class="text-xs bg-white/10 px-2 py-1 rounded text-gray-300">FRANCE</span>

</div>

<p class="text-sm text-gray-400 font-light mb-6">The city of love, illuminated beautifully at twilight.</p>

</div>

<span class="text-sm text-gray-400">Your Rating</span>

</div>

</div>

<h3 class="text-xl font-serif">Golden Gate</h3>

</div>

<p class="text-sm text-gray-400 font-light mb-6">Iconic crimson bridge emerging from the coastal fog.</p>

</div>

<span class="text-sm text-gray-400">Your Rating</span>

</div>

<span class="text-sm font-medium">Rating submitted! Thank you.</span>

</div>

</section>

<div>

<h4 class="text-gold tracking-widest text-sm font-medium mb-2">TRAVEL DIARIES</h4>

<h2 class="text-4xl md:text-5xl font-serif">Latest Stories</h2>

</div>

<a href="#" class="text-sm tracking-wider uppercase border-b border-gold/50 pb-1 hover:text-gold hover:border-gold transition-colors">View All Articles</a>

</div>

<i class="far fa-clock"></i> 5 min read

</div>

<div class="text-gold text-xs tracking-widest uppercase mb-3">GUIDES & TIPS</div>

<h3 class="text-2xl font-serif mb-4 group-hover:text-gold transition-colors">The Ultimate Guide to Cross-Country Roadtrips</h3>

<p class="text-gray-400 font-light mb-6 flex-grow line-clamp-3">Pack your bags and prepare for the open road. We cover everything from vehicle maintenance checks to finding the best hidden diners along Route 66.</p>

<div>

<h5 class="text-sm font-medium">Elena Rodriguez</h5>

<p class="text-xs text-gray-500">October 12, 2023</p>

</div>

</article>

</div>

<div class="text-gold text-xs tracking-widest uppercase">CULTURE</div>

</div>

<h3 class="text-xl font-serif mb-3 group-hover:text-gold transition-colors">Navigating Local Transport Like a Pro</h3>

<p class="text-sm text-gray-400 font-light line-clamp-2 mb-4">Mastering the art of trains, buses, and tuk-tuks in unfamiliar territories.</p>

<h5 class="text-xs font-medium text-gray-300">David Chen</h5>

</div>

</article>

</div>

</div>

<h3 class="text-xl font-serif mb-3 group-hover:text-gold transition-colors">Street Food Secrets of Southeast Asia</h3>

<p class="text-sm text-gray-400 font-light line-clamp-2 mb-4">A culinary journey through the bustling night markets of Bangkok and Hanoi.</p>

<h5 class="text-xs font-medium text-gray-300">Sarah Jenkins</h5>

</div>

</article>

</div>

</section>

<p class="text-gray-400 text-sm font-light leading-relaxed mb-6">Redefining luxury travel discovery. We curate extraordinary experiences for the modern explorer, blending cinematic inspiration with practical utility.</p>

</div>

<div>

<h4 class="text-white font-medium mb-6 tracking-wider">EXPLORE</h4>

<li><a href="#" class="hover:text-gold transition-colors">Destinations</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Experiences</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Travel Guides</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Community Reviews</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-medium mb-6 tracking-wider">COMPANY</h4>

<li><a href="#" class="hover:text-gold transition-colors">About Us</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Careers</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Press & Media</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Contact Support</a></li>

</ul>

</div>

<h4 class="text-white font-medium mb-6 tracking-wider">NEWSLETTER</h4>

<p class="text-sm text-gray-400 font-light mb-4">Subscribe for exclusive travel offers, cinematic stories, and early access to new routes.</p>

JOIN

</button>

</form>

</div>

<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>

<a href="#" class="hover:text-white transition-colors">Terms of Service</a>

</div>

</footer>

// Preloader

window.addEventListener('load', () => {

setTimeout(() => {

const preloader = document.getElementById('preloader');

preloader.style.opacity = '0';

preloader.style.visibility = 'hidden';

}, 800); // Small delay for aesthetic purposes

});

// Navbar Scroll Effect

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('shadow-2xl');

navbar.style.background = 'rgba(5, 5, 5, 0.85)';

navbar.style.borderBottom = '1px solid rgba(255, 255, 255, 0.1)';

} else {

navbar.classList.remove('shadow-2xl');

navbar.style.background = 'linear-gradient(to bottom, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0) 100%)';

navbar.style.borderBottom = '1px solid rgba(255, 255, 255, 0.05)';

}

});

// Mobile Menu Toggle

const mobileBtn = document.getElementById('mobile-menu-btn');

const mobileMenu = document.getElementById('mobile-menu');

const mobileLinks = document.querySelectorAll('.mobile-link');

mobileBtn.addEventListener('click', () => {

const isHidden = mobileMenu.classList.contains('hidden');

if (isHidden) {

mobileMenu.classList.remove('hidden');

// Small delay to allow display:block to apply before transition

setTimeout(() => {

mobileMenu.classList.remove('scale-y-0', 'opacity-0');

mobileMenu.classList.add('scale-y-100', 'opacity-100');

mobileBtn.innerHTML = '<i class="fas fa-times"></i>';

}, 10);

} else {

mobileMenu.classList.remove('scale-y-100', 'opacity-100');

mobileMenu.classList.add('scale-y-0', 'opacity-0');

setTimeout(() => {

mobileMenu.classList.add('hidden');

mobileBtn.innerHTML = '<i class="fas fa-bars"></i>';

}, 300);

}

});

// Close mobile menu on link click

mobileLinks.forEach(link => {

link.addEventListener('click', () => {

mobileMenu.classList.remove('scale-y-100', 'opacity-100');

mobileMenu.classList.add('scale-y-0', 'opacity-0');

setTimeout(() => {

mobileMenu.classList.add('hidden');

mobileBtn.innerHTML = '<i class="fas fa-bars"></i>';

}, 300);

});

// Hero Carousel Logic

const slides = document.querySelectorAll('.hero-slide');

const indicators = document.querySelectorAll('.indicator');

const prevBtn = document.getElementById('prev-slide');

const nextBtn = document.getElementById('next-slide');

const carouselContainer = document.getElementById('carousel-container');

let currentSlide = 0;

let slideInterval;

function updateSlides(newIndex) {

slides[currentSlide].classList.remove('active');

// Reset indicator styles

indicators[currentSlide].classList.remove('w-12', 'bg-white', 'active');

indicators[currentSlide].classList.add('w-4', 'bg-white/30');

currentSlide = newIndex;

slides[currentSlide].classList.add('active');

// Update new indicator styles

indicators[currentSlide].classList.remove('w-4', 'bg-white/30');

indicators[currentSlide].classList.add('w-12', 'bg-white', 'active');

}

function next() {

let nextIndex = (currentSlide + 1) % slides.length;

updateSlides(nextIndex);

}

function prev() {

let prevIndex = (currentSlide - 1 + slides.length) % slides.length;

updateSlides(prevIndex);

}

function startAutoplay() {

slideInterval = setInterval(next, 6000);

}

function resetAutoplay() {

clearInterval(slideInterval);

startAutoplay();

}

// Controls Event Listeners

nextBtn.addEventListener('click', () => { next(); resetAutoplay(); });

prevBtn.addEventListener('click', () => { prev(); resetAutoplay(); });

indicators.forEach(ind => {

ind.addEventListener('click', (e) => {

const index = parseInt(e.target.getAttribute('data-index'));

if (index !== currentSlide) {

updateSlides(index);

resetAutoplay();

}

});

// Touch Swipe for Hero Carousel

let touchStartX = 0;

let touchEndX = 0;

carouselContainer.addEventListener('touchstart', e => {

touchStartX = e.changedTouches[0].screenX;

}, {passive: true});

carouselContainer.addEventListener('touchend', e => {

touchEndX = e.changedTouches[0].screenX;

handleSwipe();

}, {passive: true});

function handleSwipe() {

const threshold = 50;

if (touchEndX < touchStartX - threshold) {

// Swipe Left

next();

resetAutoplay();

}

if (touchEndX > touchStartX + threshold) {

// Swipe Right

prev();

resetAutoplay();

}

startAutoplay();

// Destinations Slider (Horizontal Scroll Buttons)

const destSlider = document.getElementById('destinations-slider');

const scrollLeftBtn = document.getElementById('scroll-left');

const scrollRightBtn = document.getElementById('scroll-right');

if(scrollLeftBtn && scrollRightBtn && destSlider) {

scrollLeftBtn.addEventListener('click', () => {

const cardWidth = destSlider.querySelector('.dest-card').offsetWidth + 24; // width + gap

destSlider.scrollBy({ left: -cardWidth, behavior: 'smooth' });

});

scrollRightBtn.addEventListener('click', () => {

const cardWidth = destSlider.querySelector('.dest-card').offsetWidth + 24;

destSlider.scrollBy({ left: cardWidth, behavior: 'smooth' });

});

}

// Interactive Voting System

const starContainers = document.querySelectorAll('.star-rating');

const toast = document.getElementById('vote-toast');

let toastTimeout;

function showToast() {

toast.classList.remove('opacity-0', 'translate-y-10', 'pointer-events-none');

toast.classList.add('opacity-100', 'translate-y-0');

clearTimeout(toastTimeout);

toastTimeout = setTimeout(() => {

toast.classList.remove('opacity-100', 'translate-y-0');

toast.classList.add('opacity-0', 'translate-y-10', 'pointer-events-none');

}, 3000);

}

starContainers.forEach(container => {

const stars = container.querySelectorAll('i');

let currentRating = 0;

// Hover effects

stars.forEach(star => {

star.addEventListener('mouseenter', function() {

const val = parseInt(this.getAttribute('data-val'));

stars.forEach(s => {

if (parseInt(s.getAttribute('data-val')) <= val) {

s.classList.add('text-yellow-400');

s.classList.remove('text-gray-600');

} else {

if (parseInt(s.getAttribute('data-val')) > currentRating) {

s.classList.remove('text-yellow-400', 'active');

s.classList.add('text-gray-600');

}

});

container.addEventListener('mouseleave', function() {

stars.forEach(s => {

const val = parseInt(s.getAttribute('data-val'));

if (val <= currentRating) {

s.classList.add('text-yellow-400', 'active');

s.classList.remove('text-gray-600');

} else {

s.classList.remove('text-yellow-400', 'active', 'voted-anim');

s.classList.add('text-gray-600');

}

});

// Click / Vote

stars.forEach(star => {

star.addEventListener('click', function() {

currentRating = parseInt(this.getAttribute('data-val'));

// Reset animation class first to allow re-triggering

stars.forEach(s => s.classList.remove('voted-anim'));

// Force reflow

void container.offsetWidth;

stars.forEach(s => {

const val = parseInt(s.getAttribute('data-val'));

if (val <= currentRating) {

s.classList.add('text-yellow-400', 'active', 'voted-anim');

s.classList.remove('text-gray-600');

// Staggered animation delay

s.style.animationDelay = `${val * 0.05}s`;

} else {

s.classList.remove('text-yellow-400', 'active');

s.classList.add('text-gray-600');

}

});

showToast();

});

</script>

</body>

</html>

Preview

Open Advanced Editor

HTML CSS JS

<!DOCTYPE html>

<head>

<title>AURA | Cinematic Travel Discovery</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

serif: ['Playfair Display', 'serif'],

colors: {

gold: '#D4AF37',

dark: '#0a0a0a',

surface: 'rgba(255, 255, 255, 0.05)',

}

</script>

<style>

/* Custom Styles & Micro-interactions */

body {

background-color: #050505;

color: #ffffff;

overflow-x: hidden;

}

/* Glassmorphism Utilities */

.glass {

background: rgba(15, 15, 15, 0.4);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border: 1px solid rgba(255, 255, 255, 0.08);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);

}

.glass-nav {

background: linear-gradient(to bottom, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0) 100%);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

/* Hide Scrollbar but keep functionality */

.no-scrollbar::-webkit-scrollbar {

display: none;

}

.no-scrollbar {

-ms-overflow-style: none;

scrollbar-width: none;

}

/* Hero Carousel Animations */

.hero-slide {

opacity: 0;

transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);

transform: scale(1.05);

z-index: 0;

pointer-events: none;

}

.hero-slide.active {

opacity: 1;

transform: scale(1);

z-index: 10;

pointer-events: auto;

}

/* Text Reveal Animation for active slide */

.hero-slide .reveal-text {

transform: translateY(30px);

opacity: 0;

transition: transform 0.8s ease-out, opacity 0.8s ease-out;

}

.hero-slide.active .reveal-text {

transform: translateY(0);

opacity: 1;

}

.hero-slide.active .delay-1 { transition-delay: 0.3s; }

.hero-slide.active .delay-2 { transition-delay: 0.5s; }

.hero-slide.active .delay-3 { transition-delay: 0.7s; }

/* Button Hover Effects */

.btn-glow {

position: relative;

overflow: hidden;

transition: all 0.3s ease;

}

.btn-glow::after {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);

opacity: 0;

transform: scale(0.5);

transition: transform 0.3s ease, opacity 0.3s ease;

}

.btn-glow:hover::after {

opacity: 1;

transform: scale(1);

}

/* Star Rating Animation */

.star-rating i {

transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;

}

.star-rating i:hover {

transform: scale(1.3);

}

.star-rating i.active {

color: #D4AF37; /* Gold */

}

.star-rating i.voted-anim {

animation: starPop 0.4s ease forwards;

}

@keyframes starPop {

0% { transform: scale(1); }

50% { transform: scale(1.4); color: #FFF; }

100% { transform: scale(1); color: #D4AF37; }

}

/* Destination Card Hover Reveal */

.dest-card .content-reveal {

transform: translateY(100%);

opacity: 0;

transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}

.dest-card:hover .content-reveal {

transform: translateY(0);

opacity: 1;

}

.dest-card:hover .title-shift {

transform: translateY(-10px);

}

/* Image Zoom on hover */

.zoom-img-container img {

transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.zoom-img-container:hover img {

transform: scale(1.08);

}

/* Preloader */

#preloader {

transition: opacity 0.5s ease-out, visibility 0.5s ease-out;

}

</style>

</head>

</div>

<style>

@keyframes slide {

0% { left: -50%; }

100% { left: 100%; }

}

</style>

AURA

</a>

<a href="#destinations" class="hover:text-gold transition-colors">DESTINATIONS</a>

<a href="#popular" class="hover:text-gold transition-colors">POPULAR</a>

<a href="#contact" class="hover:text-gold transition-colors">CONTACT</a>

BOOK NOW

</button>

</div>

</button>

</div>

<a href="#destinations" class="text-lg tracking-widest hover:text-gold mobile-link">DESTINATIONS</a>

<a href="#popular" class="text-lg tracking-widest hover:text-gold mobile-link">POPULAR</a>

<a href="#contact" class="text-lg tracking-widest hover:text-gold mobile-link">CONTACT</a>

</div>

</nav>

</div>

<span class="text-xs tracking-widest uppercase text-gray-300">4.8 • Historical</span>

</div>

<span class="tracking-widest text-sm font-medium">DISCOVER MORE</span>

</button>

</div>

</div>

<span class="text-xs tracking-widest uppercase text-gray-300">5.0 • Coastal</span>

</div>

<span class="tracking-widest text-sm font-medium">DISCOVER MORE</span>

</button>

</div>

</div>

<span class="text-xs tracking-widest uppercase text-gray-300">4.9 • Nature</span>

</div>

<span class="tracking-widest text-sm font-medium">DISCOVER MORE</span>

</button>

</div>

</button>

</button>

</div>

</div>

</section>

<div>

<h4 class="text-gold tracking-widest text-sm font-medium mb-2">CURATED JOURNEYS</h4>

<h2 class="text-4xl md:text-5xl font-serif">Featured Destinations</h2>

</div>

</button>

</button>

</div>

PERU

</div>

<h3 class="text-2xl font-serif mb-1">Machu Picchu</h3>

<i class="fas fa-map-marker-alt text-gold"></i> Andes Mountains

</p>

</div>

EXPLORE ROUTE

</button>

</div>

JORDAN

</div>

<i class="fas fa-map-marker-alt text-gold"></i> Petra

</p>

</div>

<p class="text-sm text-gray-400 font-light mb-4 line-clamp-3">Wander through the narrow Siq to witness the magnificent Treasury carved directly into vibrant red, white, and pink sandstone cliffs.</p>

EXPLORE ROUTE

</button>

</div>

ITALY

</div>

<h3 class="text-2xl font-serif mb-1">Amalfi Coast</h3>

<i class="fas fa-map-marker-alt text-gold"></i> Campania

</p>

</div>

<p class="text-sm text-gray-400 font-light mb-4 line-clamp-3">Experience "La Dolce Vita" driving along sheer cliffs with pastel-colored fishing villages plunging into the Mediterranean Sea.</p>

EXPLORE ROUTE

</button>

</div>

INDONESIA

</div>

<h3 class="text-2xl font-serif mb-1">Ubud Retreat</h3>

<i class="fas fa-map-marker-alt text-gold"></i> Bali

</p>

</div>

<p class="text-sm text-gray-400 font-light mb-4 line-clamp-3">Find inner peace among lush rice terraces, ancient Hindu shrines, and vibrant rainforests in the spiritual heart of Bali.</p>

EXPLORE ROUTE

</button>

</div>

</section>

<h4 class="text-gold tracking-widest text-sm font-medium mb-2">COMMUNITY CHOICE</h4>

<h2 class="text-4xl md:text-5xl font-serif mb-4">Rate Your Favorites</h2>

<p class="text-gray-400 font-light max-w-2xl mx-auto">Help fellow travelers discover the world's hidden gems by casting your vote on these spectacular locations.</p>

</div>

</div>

<h3 class="text-xl font-serif">Dubai Skyline</h3>

</div>

<p class="text-sm text-gray-400 font-light mb-6">Modern architectural marvels piercing the desert sky.</p>

</div>

<span class="text-sm text-gray-400">Your Rating</span>

</div>

</div>

<h3 class="text-xl font-serif">Eiffel Tower</h3>

<span class="text-xs bg-white/10 px-2 py-1 rounded text-gray-300">FRANCE</span>

</div>

<p class="text-sm text-gray-400 font-light mb-6">The city of love, illuminated beautifully at twilight.</p>

</div>

<span class="text-sm text-gray-400">Your Rating</span>

</div>

</div>

<h3 class="text-xl font-serif">Golden Gate</h3>

</div>

<p class="text-sm text-gray-400 font-light mb-6">Iconic crimson bridge emerging from the coastal fog.</p>

</div>

<span class="text-sm text-gray-400">Your Rating</span>

</div>

<span class="text-sm font-medium">Rating submitted! Thank you.</span>

</div>

</section>

<div>

<h4 class="text-gold tracking-widest text-sm font-medium mb-2">TRAVEL DIARIES</h4>

<h2 class="text-4xl md:text-5xl font-serif">Latest Stories</h2>

</div>

<a href="#" class="text-sm tracking-wider uppercase border-b border-gold/50 pb-1 hover:text-gold hover:border-gold transition-colors">View All Articles</a>

</div>

<i class="far fa-clock"></i> 5 min read

</div>

<div class="text-gold text-xs tracking-widest uppercase mb-3">GUIDES & TIPS</div>

<h3 class="text-2xl font-serif mb-4 group-hover:text-gold transition-colors">The Ultimate Guide to Cross-Country Roadtrips</h3>

<div>

<h5 class="text-sm font-medium">Elena Rodriguez</h5>

<p class="text-xs text-gray-500">October 12, 2023</p>

</div>

</article>

</div>

<div class="text-gold text-xs tracking-widest uppercase">CULTURE</div>

</div>

<h3 class="text-xl font-serif mb-3 group-hover:text-gold transition-colors">Navigating Local Transport Like a Pro</h3>

<p class="text-sm text-gray-400 font-light line-clamp-2 mb-4">Mastering the art of trains, buses, and tuk-tuks in unfamiliar territories.</p>

<h5 class="text-xs font-medium text-gray-300">David Chen</h5>

</div>

</article>

</div>

</div>

<h3 class="text-xl font-serif mb-3 group-hover:text-gold transition-colors">Street Food Secrets of Southeast Asia</h3>

<p class="text-sm text-gray-400 font-light line-clamp-2 mb-4">A culinary journey through the bustling night markets of Bangkok and Hanoi.</p>

<h5 class="text-xs font-medium text-gray-300">Sarah Jenkins</h5>

</div>

</article>

</div>

</section>

</div>

<div>

<h4 class="text-white font-medium mb-6 tracking-wider">EXPLORE</h4>

<li><a href="#" class="hover:text-gold transition-colors">Destinations</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Experiences</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Travel Guides</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Community Reviews</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-medium mb-6 tracking-wider">COMPANY</h4>

<li><a href="#" class="hover:text-gold transition-colors">About Us</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Careers</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Press & Media</a></li>

<li><a href="#" class="hover:text-gold transition-colors">Contact Support</a></li>

</ul>

</div>

<h4 class="text-white font-medium mb-6 tracking-wider">NEWSLETTER</h4>

<p class="text-sm text-gray-400 font-light mb-4">Subscribe for exclusive travel offers, cinematic stories, and early access to new routes.</p>

JOIN

</button>

</form>

</div>

<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>

<a href="#" class="hover:text-white transition-colors">Terms of Service</a>

</div>

</footer>

// Preloader

window.addEventListener('load', () => {

setTimeout(() => {

const preloader = document.getElementById('preloader');

preloader.style.opacity = '0';

preloader.style.visibility = 'hidden';

}, 800); // Small delay for aesthetic purposes

});

// Navbar Scroll Effect

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('shadow-2xl');

navbar.style.background = 'rgba(5, 5, 5, 0.85)';

navbar.style.borderBottom = '1px solid rgba(255, 255, 255, 0.1)';

} else {

navbar.classList.remove('shadow-2xl');

navbar.style.background = 'linear-gradient(to bottom, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0) 100%)';

navbar.style.borderBottom = '1px solid rgba(255, 255, 255, 0.05)';

}

});

// Mobile Menu Toggle

const mobileBtn = document.getElementById('mobile-menu-btn');

const mobileMenu = document.getElementById('mobile-menu');

const mobileLinks = document.querySelectorAll('.mobile-link');

mobileBtn.addEventListener('click', () => {

const isHidden = mobileMenu.classList.contains('hidden');

if (isHidden) {

mobileMenu.classList.remove('hidden');

// Small delay to allow display:block to apply before transition

setTimeout(() => {

mobileMenu.classList.remove('scale-y-0', 'opacity-0');

mobileMenu.classList.add('scale-y-100', 'opacity-100');

mobileBtn.innerHTML = '<i class="fas fa-times"></i>';

}, 10);

} else {

mobileMenu.classList.remove('scale-y-100', 'opacity-100');

mobileMenu.classList.add('scale-y-0', 'opacity-0');

setTimeout(() => {

mobileMenu.classList.add('hidden');

mobileBtn.innerHTML = '<i class="fas fa-bars"></i>';

}, 300);

}

});

// Close mobile menu on link click

mobileLinks.forEach(link => {

link.addEventListener('click', () => {

mobileMenu.classList.remove('scale-y-100', 'opacity-100');

mobileMenu.classList.add('scale-y-0', 'opacity-0');

setTimeout(() => {

mobileMenu.classList.add('hidden');

mobileBtn.innerHTML = '<i class="fas fa-bars"></i>';

}, 300);

});

// Hero Carousel Logic

const slides = document.querySelectorAll('.hero-slide');

const indicators = document.querySelectorAll('.indicator');

const prevBtn = document.getElementById('prev-slide');

const nextBtn = document.getElementById('next-slide');

const carouselContainer = document.getElementById('carousel-container');

let currentSlide = 0;

let slideInterval;

function updateSlides(newIndex) {

slides[currentSlide].classList.remove('active');

// Reset indicator styles

indicators[currentSlide].classList.remove('w-12', 'bg-white', 'active');

indicators[currentSlide].classList.add('w-4', 'bg-white/30');

currentSlide = newIndex;

slides[currentSlide].classList.add('active');

// Update new indicator styles

indicators[currentSlide].classList.remove('w-4', 'bg-white/30');

indicators[currentSlide].classList.add('w-12', 'bg-white', 'active');

}

function next() {

let nextIndex = (currentSlide + 1) % slides.length;

updateSlides(nextIndex);

}

function prev() {

let prevIndex = (currentSlide - 1 + slides.length) % slides.length;

updateSlides(prevIndex);

}

function startAutoplay() {

slideInterval = setInterval(next, 6000);

}

function resetAutoplay() {

clearInterval(slideInterval);

startAutoplay();

}

// Controls Event Listeners

nextBtn.addEventListener('click', () => { next(); resetAutoplay(); });

prevBtn.addEventListener('click', () => { prev(); resetAutoplay(); });

indicators.forEach(ind => {

ind.addEventListener('click', (e) => {

const index = parseInt(e.target.getAttribute('data-index'));

if (index !== currentSlide) {

updateSlides(index);

resetAutoplay();

}

});

// Touch Swipe for Hero Carousel

let touchStartX = 0;

let touchEndX = 0;

carouselContainer.addEventListener('touchstart', e => {

touchStartX = e.changedTouches[0].screenX;

}, {passive: true});

carouselContainer.addEventListener('touchend', e => {

touchEndX = e.changedTouches[0].screenX;

handleSwipe();

}, {passive: true});

function handleSwipe() {

const threshold = 50;

if (touchEndX < touchStartX - threshold) {

// Swipe Left

next();

resetAutoplay();

}

if (touchEndX > touchStartX + threshold) {

// Swipe Right

prev();

resetAutoplay();

}

startAutoplay();

// Destinations Slider (Horizontal Scroll Buttons)

const destSlider = document.getElementById('destinations-slider');

const scrollLeftBtn = document.getElementById('scroll-left');

const scrollRightBtn = document.getElementById('scroll-right');

if(scrollLeftBtn && scrollRightBtn && destSlider) {

scrollLeftBtn.addEventListener('click', () => {

const cardWidth = destSlider.querySelector('.dest-card').offsetWidth + 24; // width + gap

destSlider.scrollBy({ left: -cardWidth, behavior: 'smooth' });

});

scrollRightBtn.addEventListener('click', () => {

const cardWidth = destSlider.querySelector('.dest-card').offsetWidth + 24;

destSlider.scrollBy({ left: cardWidth, behavior: 'smooth' });

});

}

// Interactive Voting System

const starContainers = document.querySelectorAll('.star-rating');

const toast = document.getElementById('vote-toast');

let toastTimeout;

function showToast() {

toast.classList.remove('opacity-0', 'translate-y-10', 'pointer-events-none');

toast.classList.add('opacity-100', 'translate-y-0');

clearTimeout(toastTimeout);

toastTimeout = setTimeout(() => {

toast.classList.remove('opacity-100', 'translate-y-0');

toast.classList.add('opacity-0', 'translate-y-10', 'pointer-events-none');

}, 3000);

}

starContainers.forEach(container => {

const stars = container.querySelectorAll('i');

let currentRating = 0;

// Hover effects

stars.forEach(star => {

star.addEventListener('mouseenter', function() {

const val = parseInt(this.getAttribute('data-val'));

stars.forEach(s => {

if (parseInt(s.getAttribute('data-val')) <= val) {

s.classList.add('text-yellow-400');

s.classList.remove('text-gray-600');

} else {

if (parseInt(s.getAttribute('data-val')) > currentRating) {

s.classList.remove('text-yellow-400', 'active');

s.classList.add('text-gray-600');

}

});

container.addEventListener('mouseleave', function() {

stars.forEach(s => {

const val = parseInt(s.getAttribute('data-val'));

if (val <= currentRating) {

s.classList.add('text-yellow-400', 'active');

s.classList.remove('text-gray-600');

} else {

s.classList.remove('text-yellow-400', 'active', 'voted-anim');

s.classList.add('text-gray-600');

}

});

// Click / Vote

stars.forEach(star => {

star.addEventListener('click', function() {

currentRating = parseInt(this.getAttribute('data-val'));

// Reset animation class first to allow re-triggering

stars.forEach(s => s.classList.remove('voted-anim'));

// Force reflow

void container.offsetWidth;

stars.forEach(s => {

const val = parseInt(s.getAttribute('data-val'));

if (val <= currentRating) {

s.classList.add('text-yellow-400', 'active', 'voted-anim');

s.classList.remove('text-gray-600');

// Staggered animation delay

s.style.animationDelay = `${val * 0.05}s`;

} else {

s.classList.remove('text-yellow-400', 'active');

s.classList.add('text-gray-600');

}

});

showToast();

});

</script>

</body>

</html>

Preview

Validating your code, please wait...