Sweet Delights Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sweet Delights - Futuristic Sweet Shop</title> <!-- Tailwind CSS CDN --> <!-- Google Fonts - Inter --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Font Awesome for icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body class="text-gray-100"> <!-- Header/Navbar --> <header class="fixed w-full z-50 py-4 glass-effect"> <nav class="container mx-auto flex justify-between items-center px-6 md:px-12"> <div class="text-2xl font-bold text-white animate-glow">Sweet Delights</div> <ul class="hidden md:flex space-x-8 text-lg"> <li><a href="#hero" class="hover:text-blue-400 transition duration-300">Home</a></li> <li><a href="#about" class="hover:text-blue-400 transition duration-300">About</a></li> <li><a href="#products" class="hover:text-blue-400 transition duration-300">Products</a></li> <li><a href="#gallery" class="hover:text-blue-400 transition duration-300">Gallery</a></li> <li><a href="#contact" class="hover:text-blue-400 transition duration-300">Contact</a></li> </ul> <div class="md:hidden"> <button id="menu-button" class="text-white focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> </nav> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden bg-gray-900 bg-opacity-90 absolute top-full left-0 w-full py-4 text-center"> <ul class="flex flex-col space-y-4 text-lg"> <li><a href="#hero" class="block py-2 hover:text-blue-400 transition duration-300">Home</a></li> <li><a href="#about" class="block py-2 hover:text-blue-400 transition duration-300">About</a></li> <li><a href="#products" class="block py-2 hover:text-blue-400 transition duration-300">Products</a></li> <li><a href="#gallery" class="block py-2 hover:text-blue-400 transition duration-300">Gallery</a></li> <li><a href="#contact" class="block py-2 hover:text-blue-400 transition duration-300">Contact</a></li> </ul> </div> </header> <main> <!-- Hero Section --> <section id="hero" class="relative h-screen flex items-center justify-center text-center bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1558326567-98ae2405596b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1186&q=80');"> <div class="absolute inset-0 bg-black opacity-60"></div> <div class="z-10 p-6 md:p-12 glass-effect reveal-on-scroll"> <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-4 animate-glow"> Indulge in Tomorrow's Sweetness </h1> <p class="text-lg md:text-2xl text-gray-300 mb-8"> Experience a symphony of flavors crafted with futuristic precision and passion. </p> <a href="#products" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg pulse-border"> Explore Our Delights </a> </div> </section> <!-- About Us Section --> <section id="about" class="py-20 bg-gradient-to-br from-blue-900 to-gray-900"> <div class="container mx-auto px-6 md:px-12 reveal-on-scroll"> <div class="glass-effect p-8 md:p-12 text-center max-w-4xl mx-auto"> <h2 class="text-3xl md:text-5xl font-bold text-white mb-6">Our Vision of Sweetness</h2> <p class="text-lg md:text-xl text-gray-300 leading-relaxed mb-8"> At Sweet Delights, we blend traditional confectionery artistry with cutting-edge culinary science. Our mission is to create unique, unforgettable sweet experiences that transport you to a future where taste knows no bounds. Every treat is a masterpiece, designed to delight your senses and leave you craving more. </p> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-white mt-10"> <div class="flex flex-col items-center"> <i class="fas fa-flask text-5xl text-blue-400 mb-4"></i> <h3 class="text-xl font-semibold mb-2">Innovative Recipes</h3> <p class="text-gray-400">Pioneering new flavor combinations.</p> </div> <div class="flex flex-col items-center"> <i class="fas fa-gem text-5xl text-blue-400 mb-4"></i> <h3 class="text-xl font-semibold mb-2">Premium Ingredients</h3> <p class="text-gray-400">Sourced globally for unparalleled quality.</p> </div> <div class="flex flex-col items-center"> <i class="fas fa-robot text-5xl text-blue-400 mb-4"></i> <h3 class="text-xl font-semibold mb-2">Automated Precision</h3> <p class="text-gray-400">Ensuring perfection in every bite.</p> </div> </div> </div> </div> </section> <!-- Smart Showcase Carousel --> <section id="showcase" class="py-20 bg-gradient-to-tl from-blue-950 to-black"> <div class="container mx-auto px-6 md:px-12 text-center reveal-on-scroll"> <h2 class="text-3xl md:text-5xl font-bold text-white mb-12">Our Signature Creations</h2> <div class="relative flex items-center justify-center h-[400px] md:h-[500px] overflow-hidden"> <div id="carousel-container" class="flex items-center justify-center w-full h-full"> <!-- Carousel Items will be dynamically loaded here --> <div class="carousel-item absolute w-3/4 md:w-1/2 lg:w-1/3 h-full flex flex-col justify-center items-center p-4 glass-effect"> <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1089&q=80" alt="Galactic Gummies" class="w-full h-2/3 object-cover rounded-lg mb-4"> <div class="velvet-caption-container w-full text-left"> <h3 class="text-2xl font-semibold text-white">Galactic Gummies</h3> <div class="velvet-caption"> <p class="text-gray-300 text-sm mt-2">Experience the universe in every chew. These gummies are infused with cosmic flavors and a touch of stardust for a truly out-of-this-world experience.</p> </div> </div> </div> <div class="carousel-item absolute w-3/4 md:w-1/2 lg:w-1/3 h-full flex flex-col justify-center items-center p-4 glass-effect"> <img src="https://images.unsplash.com/photo-1558326567-98ae2405596b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1186&q=80" alt="Quantum Cakes" class="w-full h-2/3 object-cover rounded-lg mb-4"> <div class="velvet-caption-container w-full text-left"> <h3 class="text-2xl font-semibold text-white">Quantum Cakes</h3> <div class="velvet-caption"> <p class="text-gray-300 text-sm mt-2">Miniature cakes that defy gravity and taste. Each bite is a journey through multi-dimensional layers of flavor and texture, a true marvel of culinary engineering.</p> </div> </div> </div> <div class="carousel-item absolute w-3/4 md:w-1/2 lg:w-1/3 h-full flex flex-col justify-center items-center p-4 glass-effect"> <img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Astro Pops" class="w-full h-2/3 object-cover rounded-lg mb-4"> <div class="velvet-caption-container w-full text-left"> <h3 class="text-2xl font-semibold text-white">Astro Pops</h3> <div class="velvet-caption"> <p class="text-gray-300 text-sm mt-2">Lollipops that glow with edible starlight. These vibrant pops are a treat for the eyes and the palate, offering a burst of fruity, tangy flavors with every lick.</p> </div> </div> </div> <div class="carousel-item absolute w-3/4 md:w-1/2 lg:w-1/3 h-full flex flex-col justify-center items-center p-4 glass-effect"> <img src="https://images.unsplash.com/photo-1627834377411-8da5f4f09de8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=701&q=80" alt="Cyber Chocolates" class="w-full h-2/3 object-cover rounded-lg mb-4"> <div class="velvet-caption-container w-full text-left"> <h3 class="text-2xl font-semibold text-white">Cyber Chocolates</h3> <div class="velvet-caption"> <p class="text-gray-300 text-sm mt-2">Digitally crafted chocolates with intricate designs. Each piece is a miniature work of art, offering a rich, velvety taste that melts in your mouth.</p> </div> </div> </div> </div> <button id="prev-btn" class="absolute left-0 md:left-10 text-white text-4xl p-4 rounded-full bg-blue-600 hover:bg-blue-700 transition duration-300 z-30 transform -translate-y-1/2 top-1/2"> <i class="fas fa-chevron-left"></i> </button> <button id="next-btn" class="absolute right-0 md:right-10 text-white text-4xl p-4 rounded-full bg-blue-600 hover:bg-blue-700 transition duration-300 z-30 transform -translate-y-1/2 top-1/2"> <i class="fas fa-chevron-right"></i> </button> </div> </div> </section> <!-- Our Products/Menu Section (Card Luxe UI) --> <section id="products" class="py-20 bg-gradient-to-br from-blue-900 to-gray-900"> <div class="container mx-auto px-6 md:px-12 reveal-on-scroll"> <h2 class="text-3xl md:text-5xl font-bold text-white text-center mb-12">Our Stellar Collection</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Product Card 1 --> <div class="card-luxe p-6 flex flex-col items-center text-center"> <img src="https://images.unsplash.com/photo-1627834377411-8da5f4f09de8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=701&q=80" alt="Nebula Nougat" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-2xl font-semibold text-white mb-2">Nebula Nougat</h3> <p class="text-gray-300 mb-4">A soft, chewy nougat swirling with fruity and nutty flavors, reminiscent of distant nebulae.</p> <span class="text-blue-400 text-xl font-bold">$12.99</span> <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full transition duration-300 transform hover:scale-105">Add to Cart</button> </div> <!-- Product Card 2 --> <div class="card-luxe p-6 flex flex-col items-center text-center"> <img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Cosmic Caramels" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-2xl font-semibold text-white mb-2">Cosmic Caramels</h3> <p class="text-gray-300 mb-4">Rich, buttery caramels with a hint of sea salt, melting like stars in your mouth.</p> <span class="text-blue-400 text-xl font-bold">$9.50</span> <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full transition duration-300 transform hover:scale-105">Add to Cart</button> </div> <!-- Product Card 3 --> <div class="card-luxe p-6 flex flex-col items-center text-center"> <img src="https://images.unsplash.com/photo-1558326567-98ae2405596b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1186&q=80" alt="Stardust Macarons" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-2xl font-semibold text-white mb-2">Stardust Macarons</h3> <p class="text-gray-300 mb-4">Delicate, airy macarons dusted with edible glitter, available in a spectrum of flavors.</p> <span class="text-blue-400 text-xl font-bold">$15.00</span> <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full transition duration-300 transform hover:scale-105">Add to Cart</button> </div> <!-- Product Card 4 --> <div class="card-luxe p-6 flex flex-col items-center text-center"> <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1089&q=80" alt="Lunar Lollipops" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-2xl font-semibold text-white mb-2">Lunar Lollipops</h3> <p class="text-gray-300 mb-4">Swirling lollipops with a tart and sweet flavor profile, inspired by lunar landscapes.</p> <span class="text-blue-400 text-xl font-bold">$7.25</span> <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full transition duration-300 transform hover:scale-105">Add to Cart</button> </div> <!-- Product Card 5 --> <div class="card-luxe p-6 flex flex-col items-center text-center"> <img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Meteorite Muffins" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-2xl font-semibold text-white mb-2">Meteorite Muffins</h3> <p class="text-gray-300 mb-4">Dense, rich muffins studded with chocolate chunks, resembling delicious meteorites.</p> <span class="text-blue-400 text-xl font-bold">$11.00</span> <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full transition duration-300 transform hover:scale-105">Add to Cart</button> </div> <!-- Product Card 6 --> <div class="card-luxe p-6 flex flex-col items-center text-center"> <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1089&q=80" alt="Aurora Atrus" class="w-full h-48 object-cover rounded-lg mb-4"> <h3 class="text-2xl font-semibold text-white mb-2">Aurora Atrus</h3> <p class="text-gray-300 mb-4">A vibrant, layered dessert capturing the ethereal beauty of the aurora borealis.</p> <span class="text-blue-400 text-xl font-bold">$18.75</span> <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full transition duration-300 transform hover:scale-105">Add to Cart</button> </div> </div> </div> </section> <!-- Testimonials Section (Velvet Caption Reveal) --> <section id="testimonials" class="py-20 bg-gradient-to-tr from-blue-950 to-black"> <div class="container mx-auto px-6 md:px-12 reveal-on-scroll"> <h2 class="text-3xl md:text-5xl font-bold text-white text-center mb-12">What Our Patrons Say</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Testimonial 1 --> <div class="velvet-caption-container glass-effect p-6 text-center"> <img src="https://placehold.co/100x100/1a3a60/ffffff?text=User1" alt="User 1" class="rounded-full w-24 h-24 mx-auto mb-4 object-cover"> <h3 class="text-xl font-semibold text-white mb-2">Anya Sharma</h3> <p class="text-gray-300 italic">"Sweet Delights is truly out of this world! The Quantum Cakes are a revelation."</p> <div class="velvet-caption flex flex-col items-center justify-center"> <p class="text-gray-300 text-sm">Customer since 2077</p> <div class="text-yellow-400 mt-2"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> </div> <!-- Testimonial 2 --> <div class="velvet-caption-container glass-effect p-6 text-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 2" class="rounded-full w-24 h-24 mx-auto mb-4 object-cover"> <h3 class="text-xl font-semibold text-white mb-2">Jaxson K.</h3> <p class="text-gray-300 italic">"Never tasted anything like the Galactic Gummies. A futuristic treat for sure!"</p> <div class="velvet-caption flex flex-col items-center justify-center"> <p class="text-gray-300 text-sm">Frequent Buyer</p> <div class="text-yellow-400 mt-2"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> </div> </div> </div> <!-- Testimonial 3 --> <div class="velvet-caption-container glass-effect p-6 text-center"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User 3" class="rounded-full w-24 h-24 mx-auto mb-4 object-cover"> <h3 class="text-xl font-semibold text-white mb-2">Dr. Elara Vance</h3> <p class="text-gray-300 italic">"The precision in their Cyber Chocolates is astounding. A true culinary marvel."</p> <div class="velvet-caption flex flex-col items-center justify-center"> <p class="text-gray-300 text-sm">Food Critic</p> <div class="text-yellow-400 mt-2"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> </div> </div> </div> </section> <!-- Special Offers/Promotions Section --> <section id="offers" class="py-20 bg-gradient-to-br from-blue-900 to-gray-900"> <div class="container mx-auto px-6 md:px-12 text-center reveal-on-scroll"> <h2 class="text-3xl md:text-5xl font-bold text-white mb-12">Exclusive Cyber Deals!</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="glass-effect p-8 flex flex-col items-center"> <i class="fas fa-gift text-6xl text-blue-400 mb-6 animate-bounce"></i> <h3 class="text-3xl font-bold text-white mb-4">First Order Discount</h3> <p class="text-gray-300 text-lg mb-6">Get <span class="text-blue-400 font-bold">20% off</span> your entire first purchase. Use code: <span class="font-mono text-blue-300 bg-blue-900 px-2 py-1 rounded">SWEETFUTURE</span></p> <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg">Claim Offer</button> </div> <div class="glass-effect p-8 flex flex-col items-center"> <i class="fas fa-box-open text-6xl text-blue-400 mb-6 animate-pulse"></i> <h3 class="text-3xl font-bold text-white mb-4">Subscription Box</h3> <p class="text-gray-300 text-lg mb-6">Receive a curated selection of futuristic sweets monthly. Starting at <span class="text-blue-400 font-bold">$39.99/month</span>.</p> <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg">Subscribe Now</button> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="py-20 bg-gradient-to-tl from-blue-950 to-black"> <div class="container mx-auto px-6 md:px-12 reveal-on-scroll"> <h2 class="text-3xl md:text-5xl font-bold text-white text-center mb-12">A Glimpse Into Our Sweet Universe</h2> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="glass-effect p-4"> <img src="https://images.unsplash.com/photo-1627834377411-8da5f4f09de8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=701&q=80" alt="Sweet Image 1" class="w-full h-64 object-cover rounded-lg transform hover:scale-105 transition duration-300"> </div> <div class="glass-effect p-4"> <img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sweet Image 2" class="w-full h-64 object-cover rounded-lg transform hover:scale-105 transition duration-300"> </div> <div class="glass-effect p-4"> <img src="https://images.unsplash.com/photo-1558326567-98ae2405596b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1186&q=80" alt="Sweet Image 3" class="w-full h-64 object-cover rounded-lg transform hover:scale-105 transition duration-300"> </div> <div class="glass-effect p-4"> <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1089&q=80" alt="Sweet Image 4" class="w-full h-64 object-cover rounded-lg transform hover:scale-105 transition duration-300"> </div> <div class="glass-effect p-4"> <img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sweet Image 5" class="w-full h-64 object-cover rounded-lg transform hover:scale-105 transition duration-300"> </div> <div class="glass-effect p-4"> <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1089&q=80" alt="Sweet Image 6" class="w-full h-64 object-cover rounded-lg transform hover:scale-105 transition duration-300"> </div> </div> </div> </section> <!-- Contact Us/Location Section --> <section id="contact" class="py-20 bg-gradient-to-br from-blue-900 to-gray-900"> <div class="container mx-auto px-6 md:px-12 reveal-on-scroll"> <h2 class="text-3xl md:text-5xl font-bold text-white text-center mb-12">Connect With The Future of Flavor</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="glass-effect p-8"> <h3 class="text-2xl font-semibold text-white mb-6">Send Us a Message</h3> <form class="space-y-6"> <div> <label for="name" class="block text-gray-300 text-lg font-medium mb-2">Name</label> <input type="text" id="name" name="name" class="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50" placeholder="Your Name"> </div> <div> <label for="email" class="block text-gray-300 text-lg font-medium mb-2">Email</label> <input type="email" id="email" name="email" class="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50" placeholder="your@email.com"> </div> <div> <label for="message" class="block text-gray-300 text-lg font-medium mb-2">Message</label> <textarea id="message" name="message" rows="5" class="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50" placeholder="Your message..."></textarea> </div> <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg">Send Message</button> </form> </div> <div class="glass-effect p-8 flex flex-col justify-between"> <div> <h3 class="text-2xl font-semibold text-white mb-6">Our Galactic Hub</h3> <p class="text-gray-300 text-lg mb-4"> <i class="fas fa-map-marker-alt text-blue-400 mr-3"></i> Unit 2077, Cybernetic Confectionery Complex,<br> Neo-City Sector 7, Earth Prime </p> <p class="text-gray-300 text-lg mb-4"> <i class="fas fa-phone-alt text-blue-400 mr-3"></i> +1 (555) 012-3456 </p> <p class="text-gray-300 text-lg mb-6"> <i class="fas fa-envelope text-blue-400 mr-3"></i> info@sweetdelights.fut </p> </div> <!-- Placeholder for Map --> <div class="w-full h-64 bg-gray-800 rounded-lg overflow-hidden border border-gray-700"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.297495963965!2d144.9631168153164!3d-37.81410797975199!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b5c00a4b1f%3A0x504567846294e0!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sin!4v1678888888888!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="bg-gray-950 py-10 text-center text-gray-400 text-lg"> <div class="container mx-auto px-6 md:px-12"> <p>© 2077 Sweet Delights. All rights reserved. Designed for a sweeter future.</p> <div class="flex justify-center space-x-6 mt-6"> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"><i class="fab fa-facebook-f text-2xl"></i></a> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"><i class="fab fa-twitter text-2xl"></i></a> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"><i class="fab fa-instagram text-2xl"></i></a> <a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300"><i class="fab fa-linkedin-in text-2xl"></i></a> </div> </div> </footer> </body> </html>
CSS
/* Custom CSS for animations and glassmorphism */ body { font-family: 'Inter', sans-serif; overflow-x: hidden; /* Prevent horizontal scroll due to animations */ background: linear-gradient(135deg, #0a192f, #000d1a); /* Dark blue background */ } /* Glassmorphism Effect */ .glass-effect { backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.05); /* Lighter for visibility */ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } /* Elegant Slide Reveal (on scroll) */ .reveal-on-scroll { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .reveal-on-scroll.active { opacity: 1; transform: translateY(0); } /* Velvet Caption Reveal */ .velvet-caption-container { position: relative; overflow: hidden; border-radius: 15px; } .velvet-caption { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); color: white; padding: 1rem; transform: translateY(100%); transition: transform 0.4s ease-out; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .velvet-caption-container:hover .velvet-caption { transform: translateY(0); } /* Smart Showcase Carousel */ .carousel-item { transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; transform: scale(0.8); opacity: 0.5; filter: blur(2px); z-index: 1; } .carousel-item.active { transform: scale(1); opacity: 1; filter: blur(0); z-index: 2; } .carousel-item.prev, .carousel-item.next { transform: scale(0.9); opacity: 0.7; filter: blur(1px); z-index: 1; } /* Card Luxe UI */ .card-luxe { background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-luxe:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); } /* Custom scrollbar for a futuristic look */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #0a192f; } ::-webkit-scrollbar-thumb { background: #4a90e2; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #357bd8; } /* Keyframe animations */ @keyframes glow { 0% { text-shadow: 0 0 5px #4a90e2; } 50% { text-shadow: 0 0 20px #4a90e2, 0 0 30px #4a90e2; } 100% { text-shadow: 0 0 5px #4a90e2; } } .animate-glow { animation: glow 2s infinite alternate; } @keyframes pulse-border { 0% { border-color: rgba(74, 144, 226, 0.5); } 50% { border-color: rgba(74, 144, 226, 1); } 100% { border-color: rgba(74, 144, 226, 0.5); } } .pulse-border { animation: pulse-border 2s infinite alternate; }
JavaScript
// Mobile Menu Toggle const menuButton = document.getElementById('menu-button'); const mobileMenu = document.getElementById('mobile-menu'); menuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when a link is clicked mobileMenu.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); // Elegant Slide Reveal on Scroll const revealElements = document.querySelectorAll('.reveal-on-scroll'); const revealOnScroll = () => { const windowHeight = window.innerHeight; revealElements.forEach(el => { const elementTop = el.getBoundingClientRect().top; if (elementTop < windowHeight - 100) { /* Adjust offset as needed */ el.classList.add('active'); } else { el.classList.remove('active'); /* Optional: remove on scroll up */ } }); }; window.addEventListener('scroll', revealOnScroll); window.addEventListener('load', revealOnScroll); /* Trigger on load for elements already in view */ // Smart Showcase Carousel const carouselContainer = document.getElementById('carousel-container'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const carouselItems = Array.from(carouselContainer.children); let currentIndex = 0; const updateCarousel = () => { carouselItems.forEach((item, index) => { item.classList.remove('active', 'prev', 'next'); item.style.transform = ''; /* Reset transform */ item.style.opacity = ''; /* Reset opacity */ item.style.filter = ''; /* Reset filter */ if (index === currentIndex) { item.classList.add('active'); } else if (index === (currentIndex - 1 + carouselItems.length) % carouselItems.length) { item.classList.add('prev'); } else if (index === (currentIndex + 1) % carouselItems.length) { item.classList.add('next'); } }); }; prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length; updateCarousel(); }); nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % carouselItems.length; updateCarousel(); }); // Initialize carousel on load window.addEventListener('load', () => { updateCarousel(); }); // Auto-advance carousel setInterval(() => { currentIndex = (currentIndex + 1) % carouselItems.length; updateCarousel(); }, 5000); // Change slide every 5 seconds
Output Preview
Desktop
Mobile
Fullscreen