Spaces:
Running
Running
I need a home page, each section should have background image, title, sub title, paragraph, section image. Each section should scroll as a slider scrolls, Each section should have 100vh min-height header should be absolute and sticky. Each section should have animation and smooth transition to one scroll to another and having 6 sections. Scroll between the sections must be smooth and animated.
fda7f47 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ScrollScape Voyager</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="font-sans"> | |
| <custom-header></custom-header> | |
| <main> | |
| <section id="section1"> | |
| <div class="overlay"></div> | |
| <div class="container flex flex-col lg:flex-row items-center justify-center h-full"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 text-white"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif" data-animate data-delay="100">Discover New Horizons</h1> | |
| <h2 class="text-xl md:text-2xl mb-6" data-animate data-delay="200">Where Adventure Meets Innovation</h2> | |
| <p class="text-lg mb-8 max-w-lg" data-animate data-delay="300">Embark on a journey through breathtaking landscapes and cutting-edge technology that will transform your perspective.</p> | |
| <a href="#section2" class="px-8 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-gray-200 transition duration-300 inline-block" data-animate data-delay="400">Explore More</a> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center" data-animate data-delay="200"> | |
| <img src="http://static.photos/travel/640x360/1" alt="Travel" class="rounded-lg shadow-2xl w-full max-w-md hover:scale-105 transition duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="section2"> | |
| <div class="overlay"></div> | |
| <div class="container flex flex-col lg:flex-row items-center justify-center h-full"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 text-white"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif" data-animate data-delay="100">Innovate Your World</h1> | |
| <h2 class="text-xl md:text-2xl mb-6" data-animate data-delay="200">Technology That Shapes Tomorrow</h2> | |
| <p class="text-lg mb-8 max-w-lg" data-animate data-delay="300">Discover groundbreaking solutions that are revolutionizing industries and creating opportunities for everyone.</p> | |
| <a href="#section3" class="px-8 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-gray-200 transition duration-300 inline-block" data-animate data-delay="400">Learn More</a> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center" data-animate data-delay="200"> | |
| <img src="http://static.photos/technology/640x360/2" alt="Technology" class="rounded-lg shadow-2xl w-full max-w-md hover:scale-105 transition duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="section3"> | |
| <div class="overlay"></div> | |
| <div class="container flex flex-col lg:flex-row items-center justify-center h-full"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 text-white"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif" data-animate data-delay="100">Nature's Majesty</h1> | |
| <h2 class="text-xl md:text-2xl mb-6" data-animate data-delay="200">Where Earth Speaks to Your Soul</h2> | |
| <p class="text-lg mb-8 max-w-lg" data-animate data-delay="300">Immerse yourself in the untouched beauty of our planet's most spectacular natural wonders.</p> | |
| <a href="#section4" class="px-8 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-gray-200 transition duration-300 inline-block" data-animate data-delay="400">Discover</a> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center" data-animate data-delay="200"> | |
| <img src="http://static.photos/nature/640x360/3" alt="Nature" class="rounded-lg shadow-2xl w-full max-w-md hover:scale-105 transition duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="section4"> | |
| <div class="overlay"></div> | |
| <div class="container flex flex-col lg:flex-row items-center justify-center h-full"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 text-white"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif" data-animate data-delay="100">Urban Pulse</h1> | |
| <h2 class="text-xl md:text-2xl mb-6" data-animate data-delay="200">The Rhythm of Modern Life</h2> | |
| <p class="text-lg mb-8 max-w-lg" data-animate data-delay="300">Experience the vibrant energy of cities that never sleep, where culture and innovation collide.</p> | |
| <a href="#section5" class="px-8 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-gray-200 transition duration-300 inline-block" data-animate data-delay="400">Explore</a> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center" data-animate data-delay="200"> | |
| <img src="http://static.photos/cityscape/640x360/4" alt="City" class="rounded-lg shadow-2xl w-full max-w-md hover:scale-105 transition duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="section5" class="snap-start min-h-screen w-full relative overflow-hidden bg-cover bg-center flex items-center justify-center"> | |
| <div class="absolute inset-0 bg-black/40 z-0"></div> | |
| <div class="container mx-auto px-6 relative z-10 text-white flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif">Creative Minds</h1> | |
| <h2 class="text-xl md:text-2xl mb-6">Where Imagination Takes Flight</h2> | |
| <p class="text-lg mb-8 max-w-lg">Witness the power of human creativity as it transforms ideas into reality across all disciplines.</p> | |
| <a href="#section6" class="px-8 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-gray-200 transition duration-300 inline-block">Be Inspired</a> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center"> | |
| <img src="http://static.photos/abstract/640x360/5" alt="Creativity" class="rounded-lg shadow-2xl w-full max-w-md transform hover:scale-105 transition duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="section6" class="snap-start min-h-screen w-full relative overflow-hidden bg-cover bg-center flex items-center justify-center"> | |
| <div class="absolute inset-0 bg-black/40 z-0"></div> | |
| <div class="container mx-auto px-6 relative z-10 text-white flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif">Your Journey</h1> | |
| <h2 class="text-xl md:text-2xl mb-6">Begins Here and Now</h2> | |
| <p class="text-lg mb-8 max-w-lg">Ready to start your adventure? We're here to guide you every step of the way with our expertise and passion.</p> | |
| <a href="#section1" class="px-8 py-3 bg-white text-gray-900 rounded-full font-semibold hover:bg-gray-200 transition duration-300 inline-block">Begin Again</a> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center"> | |
| <img src="http://static.photos/adventure/640x360/6" alt="Adventure" class="rounded-lg shadow-2xl w-full max-w-md transform hover:scale-105 transition duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="components/header.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Set background images for each section | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const sections = [ | |
| { id: 'section1', image: 'http://static.photos/travel/1200x630/1' }, | |
| { id: 'section2', image: 'http://static.photos/technology/1200x630/2' }, | |
| { id: 'section3', image: 'http://static.photos/nature/1200x630/3' }, | |
| { id: 'section4', image: 'http://static.photos/cityscape/1200x630/4' }, | |
| { id: 'section5', image: 'http://static.photos/abstract/1200x630/5' }, | |
| { id: 'section6', image: 'http://static.photos/adventure/1200x630/6' } | |
| ]; | |
| sections.forEach(section => { | |
| const element = document.getElementById(section.id); | |
| if (element) { | |
| element.style.backgroundImage = `url(${section.image})`; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |