Stylish Components Collection
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Stylish Components</title> <script src="https://code.jquery.com/jquery 3.6.0.min.js"></script> <style> /* General Styles */ body { font family: 'Inter', sans serif; margin: 0; padding: 0; line height: 1.6; overflow x: hidden; } .container { max width: 1200px; margin: 0 auto; padding: 0 1.5rem; width: 100%; box sizing: border box; } /* Header Styles */ header { background: linear gradient(135deg, #2563eb 0%, #1d4ed8 100%); padding: 1.25rem; position: sticky; top: 0; z index: 1000; box shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } header .container { display: flex; justify content: space between; align items: center; } .logo { font size: 1.75rem; font weight: 800; color: white; text decoration: none; letter spacing: 0.5px; } nav { display: flex; align items: center; gap: 2rem; } nav a { color: white; text decoration: none; font weight: 500; transition: all 0.3s ease; position: relative; } nav a:not(.sign up btn)::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 4px; left: 0; background color: white; transition: width 0.3s ease; } nav a:not(.sign up btn):hover::after { width: 100%; } .sign up btn { background color: white; color: #2563eb; padding: 0.75rem 1.5rem; border radius: 50px; font weight: 600; transition: all 0.3s ease; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .sign up btn:hover { transform: translateY( 2px); box shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } /* Stories Carousel Styles */ .stories { padding: 4rem 0; background color: #f8fafc; } .carousel { position: relative; overflow: hidden; border radius: 1rem; box shadow: 0 25px 50px 12px rgba(0, 0, 0, 0.25); margin top: 2rem; } .carousel inner { display: flex; transition: transform 0.6s cubic bezier(0.4, 0, 0.2, 1); } .carousel item { flex: 0 0 100%; position: relative; height: 600px; } .carousel item img { width: 100%; height: 100%; object fit: cover; transition: transform 0.6s ease; } .carousel caption { position: absolute; inset: 0; background: linear gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; flex direction: column; justify content: flex end; padding: 3rem; color: white; } .carousel caption h3 { font size: 2.5rem; font weight: bold; margin: 0; text shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .carousel item.active .carousel caption h3 { opacity: 1; transform: translateY(0); } .carousel btn { position: absolute; top: 50%; transform: translateY( 50%); background color: rgba(255, 255, 255, 0.9); color: #2563eb; border: none; width: 3rem; height: 3rem; border radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align items: center; justify content: center; font size: 1.5rem; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .carousel btn:hover { background color: white; transform: translateY( 50%) scale(1.1); } .carousel btn prev { left: 1.5rem; } .carousel btn next { right: 1.5rem; } /* Testimonials Styles */ .testimonials { background: linear gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); padding: 2rem 0; } .testimonials h2 { font size: 2.5rem; font weight: bold; text align: center; margin bottom: 3rem; color: #1e40af; } .testimonials carousel { position: relative; padding: 1rem; } .testimonials inner { display: flex; gap: 2rem; transition: transform 0.6s cubic bezier(0.4, 0, 0.2, 1); } .testimonial card { flex: 0 0 calc(33.333% 1.33rem); background color: white; border radius: 1rem; padding: 2rem; box shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; transform: scale(0.98); } .testimonial card:hover { transform: translateY( 5px) scale(1); box shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1); } .testimonial header { display: flex; align items: center; gap: 1rem; margin bottom: 1.5rem; } .testimonial avatar { width: 4rem; height: 4rem; border radius: 50%; object fit: cover; } .testimonial name { font weight: 600; font size: 1.25rem; margin: 0; color: #1e40af; } .testimonial role { font size: 0.875rem; color: #6b7280; margin: 0.25rem 0 0 0; } .testimonial content { font style: italic; color: #374151; line height: 1.7; margin: 0; } /* About Us Styles */ .about us { background: linear gradient(135deg, #1e40af 0%, #1d4ed8 100%); color: white; padding: 2rem 0; } .about us content { display: grid; grid template columns: 1fr 1fr; gap: 4rem; align items: center; } .about us h2 { font size: 3rem; font weight: bold; margin: 0 0 2rem 0; line height: 1.2; } .about us p { font size: 1.25rem; margin: 0 0 2.5rem 0; opacity: 0.9; line height: 1.7; } .about us btn { display: inline block; background color: white; color: #1e40af; padding: 1rem 2rem; font size: 1.125rem; font weight: 600; text decoration: none; border radius: 50px; transition: all 0.3s ease; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .about us btn:hover { transform: translateY( 2px); box shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } .about us image { position: relative; border radius: 1rem; overflow: hidden; } .about us image img { width: 100%; height: 500px; object fit: cover; border radius: 1rem; transition: transform 0.6s ease; } .about us image:hover img { transform: scale(1.05); } /* Footer Styles */ footer { background color: #1f2937; color: white; padding: 2rem 0; text align: center; } footer p { margin: 0; opacity: 0.9; } /* Responsive Styles */ @media (max width: 1024px) { .testimonial card { flex: 0 0 calc(50% 1rem); } .carousel item { height: 500px; } } @media (max width: 768px) { nav { display: none; } .about us content { grid template columns: 1fr; gap: 3rem; } .carousel item { height: 400px; } .carousel caption h3 { font size: 2rem; } .testimonial card { flex: 0 0 calc(100% 1rem); } .about us h2 { font size: 2.5rem; } } @media (max width: 480px) { .carousel item { height: 300px; } .carousel caption h3 { font size: 1.5rem; } .carousel btn { width: 2.5rem; height: 2.5rem; font size: 1.25rem; } .about us { padding: 4rem 0; } .testimonials { padding: 4rem 0; } } </style> </head> <body> <header> <div class="container"> <a href="#" class="logo">Wanderlust</a> <nav> <a href="#">Home</a> <a href="#">Stories</a> <a href="#">About</a> <a href="#">Contact</a> <a href="#" class="sign up btn">Sign Up</a> </nav> </div> </header> <main> <section class="stories"> <div class="container"> <h1 style="text align: center; font size: 2.5rem; font weight: bold; margin: 0 0 1rem 0; color: #1e40af;">Amazing Stories</h1> <div class="carousel"> <div class="carousel inner"> <div class="carousel item"> <img src="https://images.unsplash.com/photo 1682687220742 aba13b6e50ba" alt="A Journey Through Time"> <div class="carousel caption"> <h3>A Journey Through Time</h3> </div> </div> <div class="carousel item"> <img src="https://images.unsplash.com/photo 1682687221006 b7fd60cf9dd0" alt="The Hidden Oasis"> <div class="carousel caption"> <h3>The Hidden Oasis</h3> </div> </div> <div class="carousel item"> <img src="https://images.unsplash.com/photo 1682687220063 4742bd7fd538" alt="Echoes of the Past"> <div class="carousel caption"> <h3>Echoes of the Past</h3> </div> </div> </div> <button class="carousel btn carousel btn prev">❮</button> <button class="carousel btn carousel btn next">❯</button> </div> </div> </section> <section class="testimonials"> <div class="container"> <h2>What Our Travelers Say</h2> <div class="testimonials carousel"> <div class="testimonials inner"> <div class="testimonial card"> <div class="testimonial header"> <img src="https://images.unsplash.com/photo 1507003211169 0a1dd7228f2d" alt="Bob Smith" class="testimonial avatar"> <div> <h3 class="testimonial name">Bob Smith</h3> <p class="testimonial role">Travel Photographer</p> </div> </div> <p class="testimonial content">"As a photographer, I've found endless inspiration through these journeys. The destinations are simply breathtaking!"</p> </div> <div class="testimonial card"> <div class="testimonial header"> <img src="https://images.unsplash.com/photo 1438761681033 6461ffad8d80" alt="Carol Williams" class="testimonial avatar"> <div> <h3 class="testimonial name">Carol Williams</h3> <p class="testimonial role">Cultural Explorer</p> </div> </div> <p class="testimonial content">"The cultural immersion experiences have opened my eyes to new perspectives. Truly unforgettable moments!"</p> </div> <div class="testimonial card"> <div class="testimonial header"> <img src="https://images.unsplash.com/photo 1494790108377 be9c29b29330" alt="Alice Johnson" class="testimonial avatar"> <div> <h3 class="testimonial name">Alice Johnson</h3> <p class="testimonial role">Adventure Enthusiast</p> </div> </div> <p class="testimonial content">"The experiences I've had through Wanderlust have been absolutely life changing. Every journey tells a unique story!"</p> </div> <div class="testimonial card"> <div class="testimonial header"> <img src="https://images.unsplash.com/photo 1507003211169 0a1dd7228f2d" alt="Bob Smith" class="testimonial avatar"> <div> <h3 class="testimonial name">Bob Smith</h3> <p class="testimonial role">Travel Photographer</p> </div> </div> <p class="testimonial content">"As a photographer, I've found endless inspiration through these journeys. The destinations are simply breathtaking!"</p> </div> <div class="testimonial card"> <div class="testimonial header"> <img src="https://images.unsplash.com/photo 1438761681033 6461ffad8d80" alt="Carol Williams" class="testimonial avatar"> <div> <h3 class="testimonial name">Carol Williams</h3> <p class="testimonial role">Cultural Explorer</p> </div> </div> <p class="testimonial content">"The cultural immersion experiences have opened my eyes to new perspectives. Truly unforgettable moments!"</p> </div> </div> </div> </div> </section> <section class="about us"> <div class="container"> <div class="about us content"> <div> <h2>About Us</h2> <p>At Wanderlust, we believe every journey has a story waiting to be told. Our passion is creating immersive experiences that transform travelers into storytellers, connecting people with the heart and soul of each destination.</p> <a href="#" class="about us btn">Read More</a> </div> <div class="about us image"> <img src="https://images.unsplash.com/photo 1682687220198 88e9bdea9931" alt="Adventure Awaits"> </div> </div> </div> </section> </main> <footer> <div class="container"> <p>© 2024 Wanderlust. Crafting unforgettable stories through travel.</p> </div> </footer> <script> $(document).ready(function() { // Stories Carousel let storiesCurrentIndex = 0; const storiesItems = $('.carousel item'); const storiesTotalItems = storiesItems.length; function showStoriesSlide(index) { if (index < 0) index = storiesTotalItems 1; if (index >= storiesTotalItems) index = 0; storiesCurrentIndex = index; // Remove active class from all items storiesItems.removeClass('active'); // Add active class to current item $(storiesItems[index]).addClass('active'); $('.carousel inner').css('transform', `translateX( ${storiesCurrentIndex * 100}%)`); } $('.carousel btn next').click(function() { showStoriesSlide(storiesCurrentIndex + 1); }); $('.carousel btn prev').click(function() { showStoriesSlide(storiesCurrentIndex 1); }); // Show first slide as active showStoriesSlide(0); // Auto advance slides setInterval(function() { showStoriesSlide(storiesCurrentIndex + 1); }, 5000); // Testimonials Carousel let testimonialsCurrentIndex = 0; const testimonialCards = $('.testimonial card'); const testimonialsTotalItems = testimonialCards.length; const visibleCards = window.innerWidth >= 1024 ? 3 : window.innerWidth >= 768 ? 2 : 1; function showTestimonialsSlide(index) { if (index < 0) index = testimonialsTotalItems visibleCards; if (index > testimonialsTotalItems visibleCards) index = 0; testimonialsCurrentIndex = index; const translateValue = window.innerWidth >= 1024 ? (index * 33.333) : window.innerWidth >= 768 ? (index * 50) : (index * 100); $('.testimonials inner').css('transform', `translateX( ${translateValue}%)`); } // Handle window resize for responsive carousel $(window).resize(function() { showTestimonialsSlide(0); }); // Auto advance testimonials setInterval(function() { showTestimonialsSlide(testimonialsCurrentIndex + 1); }, 5000); }); </script> </body> </html> enhance the styles and functionalities
