Premium Shopping Mall 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>Golden Plaza - Premium Shopping Mall</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body class="bg-gray-50 custom-scrollbar"> <!-- Navigation --> <nav class="bg-white shadow-xl fixed w-full z-50 top-0 backdrop-blur-md bg-opacity-95"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-20"> <div class="flex items-center"> <div class="text-3xl font-bold gradient-text flex items-center"> <i class="fas fa-shopping-bag mr-3 text-yellow-500"></i> Golden Plaza </div> </div> <!-- Desktop Menu --> <div class="hidden lg:block"> <div class="ml-10 flex items-baseline space-x-8"> <a href="#home" class="text-gray-800 hover:text-yellow-500 px-4 py-2 font-medium transition-all duration-300 hover:bg-yellow-50 rounded-lg">Home</a> <a href="#stores" class="text-gray-800 hover:text-yellow-500 px-4 py-2 font-medium transition-all duration-300 hover:bg-yellow-50 rounded-lg">Stores</a> <a href="#dining" class="text-gray-800 hover:text-yellow-500 px-4 py-2 font-medium transition-all duration-300 hover:bg-yellow-50 rounded-lg">Dining</a> <a href="#events" class="text-gray-800 hover:text-yellow-500 px-4 py-2 font-medium transition-all duration-300 hover:bg-yellow-50 rounded-lg">Events</a> <a href="#contact" class="text-gray-800 hover:text-yellow-500 px-4 py-2 font-medium transition-all duration-300 hover:bg-yellow-50 rounded-lg">Contact</a> </div> </div> <!-- Mobile menu button --> <div class="lg:hidden"> <button id="mobile-menu-btn" class="text-gray-800 hover:text-yellow-500 p-2"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="mobile-menu lg:hidden bg-white absolute top-20 left-0 w-full shadow-2xl"> <div class="px-4 pt-4 pb-6 space-y-2"> <a href="#home" class="block px-4 py-3 text-gray-800 hover:text-yellow-500 hover:bg-yellow-50 font-medium rounded-lg transition-all">Home</a> <a href="#stores" class="block px-4 py-3 text-gray-800 hover:text-yellow-500 hover:bg-yellow-50 font-medium rounded-lg transition-all">Stores</a> <a href="#dining" class="block px-4 py-3 text-gray-800 hover:text-yellow-500 hover:bg-yellow-50 font-medium rounded-lg transition-all">Dining</a> <a href="#entertainment" class="block px-4 py-3 text-gray-800 hover:text-yellow-500 hover:bg-yellow-50 font-medium rounded-lg transition-all">Entertainment</a> <a href="#events" class="block px-4 py-3 text-gray-800 hover:text-yellow-500 hover:bg-yellow-50 font-medium rounded-lg transition-all">Events</a> <a href="#services" class="block px-4 py-3 text-gray-800 hover:text-yellow-500 hover:bg-yellow-50 font-medium rounded-lg transition-all">Services</a> <a href="#contact" class="block px-4 py-3 text-gray-800 hover:text-yellow-500 hover:bg-yellow-50 font-medium rounded-lg transition-all">Contact</a> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600 overflow-hidden"> <div class="absolute inset-0 bg-black opacity-30"></div> <div class="absolute inset-0" style="background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1920&h=1080&fit=crop'); background-size: cover; background-position: center; opacity: 0.5;"></div> <div class="relative z-10 text-center text-white px-4 max-w-6xl mx-auto"> <h1 class="text-6xl md:text-8xl font-bold mb-8 fade-in floating text-shadow">Golden Plaza</h1> <p class="text-2xl md:text-3xl mb-6 fade-in typing-animation">Where Shopping Meets Luxury</p> <p class="text-lg md:text-xl mb-12 fade-in max-w-3xl mx-auto">Experience the ultimate shopping destination with over 200 premium stores, world-class dining, and entertainment for the whole family.</p> <div class="flex flex-col sm:flex-row gap-6 justify-center items-center fade-in"> <button class="bg-white text-yellow-600 px-10 py-4 rounded-full text-xl font-bold hover:bg-gray-100 transition-all duration-300 pulse-glow hover-lift glow-effect"> Explore Stores </button> <button class="border-2 border-white text-white px-10 py-4 rounded-full text-xl font-bold hover:bg-white hover:text-yellow-600 transition-all duration-300 hover-lift"> View Map </button> </div> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce"> <i class="fas fa-chevron-down text-3xl"></i> </div> <!-- Floating Elements --> <div class="absolute top-20 left-10 text-yellow-200 opacity-20 floating" style="animation-delay: 0.5s;"> <i class="fas fa-shopping-cart text-6xl"></i> </div> <div class="absolute top-40 right-20 text-yellow-200 opacity-20 floating" style="animation-delay: 1s;"> <i class="fas fa-gift text-5xl"></i> </div> <div class="absolute bottom-40 left-20 text-yellow-200 opacity-20 floating" style="animation-delay: 1.5s;"> <i class="fas fa-star text-4xl"></i> </div> </section> <!-- Featured Stores --> <section id="stores" class="py-24 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-5xl md:text-6xl font-bold text-gray-800 mb-6 fade-in gradient-text">Featured Stores</h2> <p class="text-xl md:text-2xl text-gray-600 fade-in max-w-3xl mx-auto">Discover premium brands and exclusive collections at our flagship stores</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-3xl overflow-hidden shadow-2xl hover-lift card-hover scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=500&h=300&fit=crop" alt="Fashion Store" class="w-full h-64 object-cover"> <div class="absolute top-4 right-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-semibold"> New </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-800 mb-3">Fashion Central</h3> <p class="text-gray-600 mb-6">Latest trends and designer collections from around the world</p> <div class="flex justify-between items-center"> <span class="text-yellow-600 font-semibold">Level 2, Zone A</span> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Visit Store </button> </div> </div> </div> <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-3xl overflow-hidden shadow-2xl hover-lift card-hover scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=500&h=300&fit=crop" alt="Electronics Store" class="w-full h-64 object-cover"> <div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold"> Sale </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-800 mb-3">Tech Hub</h3> <p class="text-gray-600 mb-6">Cutting-edge technology and gadgets for modern living</p> <div class="flex justify-between items-center"> <span class="text-yellow-600 font-semibold">Level 1, Zone B</span> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Visit Store </button> </div> </div> </div> <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-3xl overflow-hidden shadow-2xl hover-lift card-hover scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1560472355-536de3962603?w=500&h=300&fit=crop" alt="Home Decor Store" class="w-full h-64 object-cover"> <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold"> Popular </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-800 mb-3">Home & Living</h3> <p class="text-gray-600 mb-6">Beautiful furniture and decor to transform your space</p> <div class="flex justify-between items-center"> <span class="text-yellow-600 font-semibold">Level 3, Zone C</span> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Visit Store </button> </div> </div> </div> </div> <div class="text-center mt-16 fade-in"> <button class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white px-12 py-4 rounded-full text-lg font-bold hover:from-yellow-600 hover:to-yellow-700 transition-all duration-300 hover-lift shadow-lg"> View All Stores </button> </div> </div> </section> <!-- Dining Section --> <section id="dining" class="py-24 bg-gradient-to-br from-yellow-50 to-yellow-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-5xl md:text-6xl font-bold text-gray-800 mb-6 fade-in gradient-text">Dining Experience</h2> <p class="text-xl md:text-2xl text-gray-600 fade-in max-w-3xl mx-auto">Savor culinary delights from around the world in our premium food court and restaurants</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div class="slide-in-left"> <div class="grid grid-cols-2 gap-6"> <div class="space-y-6"> <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=300&h=200&fit=crop" alt="Restaurant 1" class="rounded-2xl shadow-lg hover-lift"> <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=300&h=250&fit=crop" alt="Restaurant 2" class="rounded-2xl shadow-lg hover-lift"> </div> <div class="space-y-6 mt-8"> <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=300&h=250&fit=crop" alt="Restaurant 3" class="rounded-2xl shadow-lg hover-lift"> <img src="https://images.unsplash.com/photo-1551218808-94e220e084d2?w=300&h=200&fit=crop" alt="Restaurant 4" class="rounded-2xl shadow-lg hover-lift"> </div> </div> </div> <div class="slide-in-right"> <h3 class="text-4xl font-bold text-gray-800 mb-8">World-Class Cuisine</h3> <div class="space-y-8"> <div class="flex items-start space-x-4"> <div class="bg-yellow-500 text-white p-3 rounded-full"> <i class="fas fa-utensils text-xl"></i> </div> <div> <h4 class="text-xl font-semibold text-gray-800 mb-2">Fine Dining</h4> <p class="text-gray-600">Experience Michelin-starred restaurants and celebrity chef establishments</p> </div> </div> <div class="flex items-start space-x-4"> <div class="bg-yellow-500 text-white p-3 rounded-full"> <i class="fas fa-coffee text-xl"></i> </div> <div> <h4 class="text-xl font-semibold text-gray-800 mb-2">Casual Dining</h4> <p class="text-gray-600">Relaxed atmosphere with diverse international cuisines</p> </div> </div> <div class="flex items-start space-x-4"> <div class="bg-yellow-500 text-white p-3 rounded-full"> <i class="fas fa-ice-cream text-xl"></i> </div> <div> <h4 class="text-xl font-semibold text-gray-800 mb-2">Desserts & Treats</h4> <p class="text-gray-600">Artisanal desserts, premium ice cream, and specialty beverages</p> </div> </div> </div> <button class="mt-10 bg-yellow-500 text-white px-10 py-4 rounded-full text-lg font-bold hover:bg-yellow-600 transition-all duration-300 hover-lift shadow-lg"> Explore Restaurants </button> </div> </div> </div> </section> <!-- Entertainment Section --> <section id="entertainment" class="py-24 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-5xl md:text-6xl font-bold text-gray-800 mb-6 fade-in gradient-text">Entertainment Zone</h2> <p class="text-xl md:text-2xl text-gray-600 fade-in max-w-3xl mx-auto">Fun for the whole family with state-of-the-art entertainment facilities</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="text-center group cursor-pointer zoom-in"> <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-3xl p-8 mb-6 group-hover:shadow-2xl transition-all duration-300 hover-lift"> <img src="https://images.unsplash.com/photo-1696708754875-a94ff43796d5?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Cinema" class="w-full h-32 object-cover rounded-2xl mb-4"> <i class="fas fa-film text-4xl text-white mb-4"></i> <h3 class="text-xl font-bold text-white">IMAX Cinema</h3> </div> <p class="text-gray-600">Latest blockbusters in stunning 4K resolution</p> </div> <div class="text-center group cursor-pointer zoom-in"> <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-3xl p-8 mb-6 group-hover:shadow-2xl transition-all duration-300 hover-lift"> <img src="https://images.unsplash.com/photo-1511882150382-421056c89033?w=200&h=150&fit=crop" alt="Gaming" class="w-full h-32 object-cover rounded-2xl mb-4"> <i class="fas fa-gamepad text-4xl text-white mb-4"></i> <h3 class="text-xl font-bold text-white">Gaming Arena</h3> </div> <p class="text-gray-600">VR experiences and arcade games</p> </div> <div class="text-center group cursor-pointer zoom-in"> <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-3xl p-8 mb-6 group-hover:shadow-2xl transition-all duration-300 hover-lift"> <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=200&h=150&fit=crop" alt="Kids Zone" class="w-full h-32 object-cover rounded-2xl mb-4"> <i class="fas fa-child text-4xl text-white mb-4"></i> <h3 class="text-xl font-bold text-white">Kids Zone</h3> </div> <p class="text-gray-600">Safe play area for children</p> </div> <div class="text-center group cursor-pointer zoom-in"> <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-3xl p-8 mb-6 group-hover:shadow-2xl transition-all duration-300 hover-lift"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=200&h=150&fit=crop" alt="Bowling" class="w-full h-32 object-cover rounded-2xl mb-4"> <i class="fas fa-bowling-ball text-4xl text-white mb-4"></i> <h3 class="text-xl font-bold text-white">Bowling Alley</h3> </div> <p class="text-gray-600">Professional bowling lanes</p> </div> </div> </div> </section> <!-- Events Section --> <section id="events" class="py-24 bg-gradient-to-br from-yellow-50 to-yellow-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-5xl md:text-6xl font-bold text-gray-800 mb-6 fade-in gradient-text">Upcoming Events</h2> <p class="text-xl md:text-2xl text-gray-600 fade-in max-w-3xl mx-auto">Don't miss out on exciting events, sales, and special occasions</p> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-10"> <div class="lg:col-span-2"> <div class="bg-white rounded-3xl overflow-hidden shadow-2xl hover-lift flip-in"> <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&h=400&fit=crop" alt="Fashion Show" class="w-full h-64 object-cover"> <div class="p-8"> <div class="flex items-center justify-between mb-4"> <span class="bg-yellow-500 text-white px-4 py-2 rounded-full text-sm font-semibold">Featured Event</span> <span class="text-gray-500">Dec 15, 2024</span> </div> <h3 class="text-3xl font-bold text-gray-800 mb-4">Winter Fashion Gala</h3> <p class="text-gray-600 mb-6">Experience the latest winter collections from top designers in an exclusive runway show featuring international models and celebrities.</p> <button class="bg-yellow-500 text-white px-8 py-3 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Get Tickets </button> </div> </div> </div> <div class="space-y-6"> <div class="bg-white rounded-2xl p-6 shadow-lg hover-lift slide-up"> <div class="flex items-center space-x-4"> <div class="bg-yellow-500 text-white p-3 rounded-full"> <i class="fas fa-percent text-xl"></i> </div> <div> <h4 class="text-lg font-semibold text-gray-800">Mega Sale</h4> <p class="text-gray-600 text-sm">Up to 70% off</p> <p class="text-yellow-600 text-sm font-semibold">Dec 20-25</p> </div> </div> </div> <div class="bg-white rounded-2xl p-6 shadow-lg hover-lift slide-up"> <div class="flex items-center space-x-4"> <div class="bg-yellow-500 text-white p-3 rounded-full"> <i class="fas fa-music text-xl"></i> </div> <div> <h4 class="text-lg font-semibold text-gray-800">Live Concert</h4> <p class="text-gray-600 text-sm">Local artists showcase</p> <p class="text-yellow-600 text-sm font-semibold">Dec 22</p> </div> </div> </div> <div class="bg-white rounded-2xl p-6 shadow-lg hover-lift slide-up"> <div class="flex items-center space-x-4"> <div class="bg-yellow-500 text-white p-3 rounded-full"> <i class="fas fa-gift text-xl"></i> </div> <div> <h4 class="text-lg font-semibold text-gray-800">Gift Fair</h4> <p class="text-gray-600 text-sm">Holiday shopping</p> <p class="text-yellow-600 text-sm font-semibold">Dec 18-24</p> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-24 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-5xl md:text-6xl font-bold text-gray-800 mb-6 fade-in gradient-text">Premium Services</h2> <p class="text-xl md:text-2xl text-gray-600 fade-in max-w-3xl mx-auto">Enjoy exclusive services designed to enhance your shopping experience</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> <div class="bg-gradient-to-br from-yellow-50 to-white rounded-3xl p-8 shadow-xl hover-lift rotate-in text-center"> <div class="bg-yellow-500 text-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-concierge-bell text-3xl"></i> </div> <h3 class="text-2xl font-bold text-gray-800 mb-4">Personal Shopper</h3> <p class="text-gray-600 mb-6">Get personalized assistance from our expert shopping consultants</p> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Book Now </button> </div> <div class="bg-gradient-to-br from-yellow-50 to-white rounded-3xl p-8 shadow-xl hover-lift rotate-in text-center"> <div class="bg-yellow-500 text-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-car text-3xl"></i> </div> <h3 class="text-2xl font-bold text-gray-800 mb-4">Valet Parking</h3> <p class="text-gray-600 mb-6">Convenient valet service for a hassle-free shopping experience</p> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Learn More </button> </div> <div class="bg-gradient-to-br from-yellow-50 to-white rounded-3xl p-8 shadow-xl hover-lift rotate-in text-center"> <div class="bg-yellow-500 text-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-shipping-fast text-3xl"></i> </div> <h3 class="text-2xl font-bold text-gray-800 mb-4">Home Delivery</h3> <p class="text-gray-600 mb-6">Same-day delivery service for your purchases</p> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Order Now </button> </div> <div class="bg-gradient-to-br from-yellow-50 to-white rounded-3xl p-8 shadow-xl hover-lift rotate-in text-center"> <div class="bg-yellow-500 text-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-credit-card text-3xl"></i> </div> <h3 class="text-2xl font-bold text-gray-800 mb-4">VIP Membership</h3> <p class="text-gray-600 mb-6">Exclusive discounts and early access to sales</p> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Join Now </button> </div> <div class="bg-gradient-to-br from-yellow-50 to-white rounded-3xl p-8 shadow-xl hover-lift rotate-in text-center"> <div class="bg-yellow-500 text-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-wifi text-3xl"></i> </div> <h3 class="text-2xl font-bold text-gray-800 mb-4">Free WiFi</h3> <p class="text-gray-600 mb-6">High-speed internet access throughout the mall</p> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Connect </button> </div> <div class="bg-gradient-to-br from-yellow-50 to-white rounded-3xl p-8 shadow-xl hover-lift rotate-in text-center"> <div class="bg-yellow-500 text-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-baby text-3xl"></i> </div> <h3 class="text-2xl font-bold text-gray-800 mb-4">Family Lounge</h3> <p class="text-gray-600 mb-6">Comfortable spaces for families with children</p> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors font-semibold"> Visit </button> </div> </div> </div> </section> <!-- Statistics Section --> <section class="py-24 bg-gray-800 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Golden Plaza by Numbers</h2> <p class="text-xl text-gray-300 fade-in">Impressive statistics that showcase our success</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> <div class="fade-in bounce-in" style="--delay: 0.1s;"> <div class="text-5xl md:text-6xl font-bold text-yellow-400 mb-4 counter" data-target="200">0</div> <div class="text-lg text-gray-300">Premium Stores</div> </div> <div class="fade-in bounce-in" style="--delay: 0.2s;"> <div class="text-5xl md:text-6xl font-bold text-yellow-400 mb-4 counter" data-target="50">0</div> <div class="text-lg text-gray-300">Restaurants</div> </div> <div class="fade-in bounce-in" style="--delay: 0.3s;"> <div class="text-5xl md:text-6xl font-bold text-yellow-400 mb-4 counter" data-target="5000">0</div> <div class="text-lg text-gray-300">Parking Spaces</div> </div> <div class="fade-in bounce-in" style="--delay: 0.4s;"> <div class="text-5xl md:text-6xl font-bold text-yellow-400 mb-4 counter" data-target="10">0</div> <div class="text-lg text-gray-300">Million Visitors/Year</div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-24 bg-gradient-to-br from-yellow-50 to-yellow-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-5xl md:text-6xl font-bold text-gray-800 mb-6 fade-in gradient-text">What Visitors Say</h2> <p class="text-xl md:text-2xl text-gray-600 fade-in max-w-3xl mx-auto">Real experiences from our valued customers</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> <div class="bg-white rounded-3xl p-8 shadow-2xl hover-lift scale-in"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1664575602554-2087b04935a5?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Customer" class="w-16 h-16 rounded-full mr-4"> <div> <h4 class="text-xl font-bold text-gray-800">Sarah Johnson</h4> <div class="text-yellow-500 text-lg">★★★★★</div> </div> </div> <p class="text-gray-600 text-lg leading-relaxed">"Golden Plaza is absolutely amazing! The variety of stores and the luxurious atmosphere make every visit a delightful experience. The customer service is exceptional."</p> </div> <div class="bg-white rounded-3xl p-8 shadow-2xl hover-lift scale-in"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face" alt="Customer" class="w-16 h-16 rounded-full mr-4"> <div> <h4 class="text-xl font-bold text-gray-800">Michael Chen</h4> <div class="text-yellow-500 text-lg">★★★★★</div> </div> </div> <p class="text-gray-600 text-lg leading-relaxed">"The entertainment options are fantastic! My family loves spending weekends here. The cinema is state-of-the-art and the dining options are world-class."</p> </div> <div class="bg-white rounded-3xl p-8 shadow-2xl hover-lift scale-in"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face" alt="Customer" class="w-16 h-16 rounded-full mr-4"> <div> <h4 class="text-xl font-bold text-gray-800">Emma Davis</h4> <div class="text-yellow-500 text-lg">★★★★★</div> </div> </div> <p class="text-gray-600 text-lg leading-relaxed">"I love the personal shopper service! They helped me find the perfect outfit for my wedding. The attention to detail and personalized service is unmatched."</p> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="py-24 bg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <h2 class="text-5xl md:text-6xl font-bold text-white mb-6 fade-in text-shadow">Stay Connected</h2> <p class="text-xl md:text-2xl text-white mb-12 fade-in">Get exclusive offers, event updates, and shopping tips delivered to your inbox</p> <div class="flex flex-col sm:flex-row gap-6 max-w-lg mx-auto scale-in"> <input type="email" placeholder="Enter your email address" class="flex-1 px-8 py-4 rounded-full text-gray-800 text-lg focus:outline-none focus:ring-4 focus:ring-yellow-300 shadow-lg"> <button class="bg-white text-yellow-600 px-10 py-4 rounded-full text-lg font-bold hover:bg-gray-100 transition-all duration-300 hover-lift shadow-lg"> Subscribe </button> </div> <p class="text-white text-sm mt-6 opacity-80">Join over 50,000 subscribers and never miss an update!</p> </div> </section> <!-- Contact Section --> <section id="contact" class="py-24 bg-gray-800 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-5xl md:text-6xl font-bold mb-6 fade-in gradient-text">Visit Us Today</h2> <p class="text-xl md:text-2xl text-gray-300 fade-in max-w-3xl mx-auto">We're here to make your shopping experience unforgettable</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> <div class="slide-in-left"> <h3 class="text-3xl font-bold mb-8">Get in Touch</h3> <div class="space-y-8"> <div class="flex items-start space-x-6"> <div class="bg-yellow-500 text-white p-4 rounded-full"> <i class="fas fa-map-marker-alt text-2xl"></i> </div> <div> <h4 class="text-xl font-semibold mb-2">Location</h4> <p class="text-gray-300 text-lg">123 Golden Avenue, Luxury District<br>Metropolitan City, MC 12345</p> </div> </div> <div class="flex items-start space-x-6"> <div class="bg-yellow-500 text-white p-4 rounded-full"> <i class="fas fa-clock text-2xl"></i> </div> <div> <h4 class="text-xl font-semibold mb-2">Opening Hours</h4> <p class="text-gray-300 text-lg">Monday - Sunday: 10:00 AM - 10:00 PM<br>Holidays: 12:00 PM - 8:00 PM</p> </div> </div> <div class="flex items-start space-x-6"> <div class="bg-yellow-500 text-white p-4 rounded-full"> <i class="fas fa-phone text-2xl"></i> </div> <div> <h4 class="text-xl font-semibold mb-2">Contact</h4> <p class="text-gray-300 text-lg">Phone: +1 (555) 123-4567<br>Email: info@goldenplaza.com</p> </div> </div> </div> <div class="mt-12"> <h4 class="text-2xl font-bold mb-6">Follow Us</h4> <div class="flex space-x-6"> <a href="#" class="bg-yellow-500 text-white p-4 rounded-full hover:bg-yellow-600 transition-colors text-2xl hover-lift"> <i class="fab fa-facebook"></i> </a> <a href="#" class="bg-yellow-500 text-white p-4 rounded-full hover:bg-yellow-600 transition-colors text-2xl hover-lift"> <i class="fab fa-instagram"></i> </a> <a href="#" class="bg-yellow-500 text-white p-4 rounded-full hover:bg-yellow-600 transition-colors text-2xl hover-lift"> <i class="fab fa-twitter"></i> </a> <a href="#" class="bg-yellow-500 text-white p-4 rounded-full hover:bg-yellow-600 transition-colors text-2xl hover-lift"> <i class="fab fa-youtube"></i> </a> </div> </div> </div> <div class="slide-in-right"> <div class="bg-gray-700 rounded-3xl p-8"> <h3 class="text-2xl font-bold mb-8">Send us a Message</h3> <form class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <input type="text" placeholder="First Name" class="w-full px-6 py-4 bg-gray-600 text-white rounded-2xl focus:outline-none focus:ring-2 focus:ring-yellow-400 text-lg"> <input type="text" placeholder="Last Name" class="w-full px-6 py-4 bg-gray-600 text-white rounded-2xl focus:outline-none focus:ring-2 focus:ring-yellow-400 text-lg"> </div> <input type="email" placeholder="Email Address" class="w-full px-6 py-4 bg-gray-600 text-white rounded-2xl focus:outline-none focus:ring-2 focus:ring-yellow-400 text-lg"> <input type="tel" placeholder="Phone Number" class="w-full px-6 py-4 bg-gray-600 text-white rounded-2xl focus:outline-none focus:ring-2 focus:ring-yellow-400 text-lg"> <textarea rows="6" placeholder="Your Message" class="w-full px-6 py-4 bg-gray-600 text-white rounded-2xl focus:outline-none focus:ring-2 focus:ring-yellow-400 text-lg resize-none"></textarea> <button type="submit" class="w-full bg-yellow-500 text-white py-4 rounded-2xl text-lg font-bold hover:bg-yellow-600 transition-all duration-300 hover-lift shadow-lg"> Send Message </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> <div> <div class="text-3xl font-bold gradient-text mb-6 flex items-center"> <i class="fas fa-shopping-bag mr-3 text-yellow-500"></i> Golden Plaza </div> <p class="text-gray-400 text-lg leading-relaxed">Your premier shopping destination since 2010. Experience luxury, comfort, and convenience all under one roof.</p> </div> <div> <h4 class="text-xl font-bold mb-6">Quick Links</h4> <ul class="space-y-3 text-gray-400"> <li><a href="#home" class="hover:text-yellow-400 transition-colors text-lg">Home</a></li> <li><a href="#stores" class="hover:text-yellow-400 transition-colors text-lg">Stores</a></li> <li><a href="#dining" class="hover:text-yellow-400 transition-colors text-lg">Dining</a></li> <li><a href="#entertainment" class="hover:text-yellow-400 transition-colors text-lg">Entertainment</a></li> <li><a href="#events" class="hover:text-yellow-400 transition-colors text-lg">Events</a></li> </ul> </div> <div> <h4 class="text-xl font-bold mb-6">Services</h4> <ul class="space-y-3 text-gray-400"> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Personal Shopper</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Valet Parking</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Home Delivery</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">VIP Membership</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Gift Cards</a></li> </ul> </div> <div> <h4 class="text-xl font-bold mb-6">Information</h4> <ul class="space-y-3 text-gray-400"> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Mall Directory</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Parking Info</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Accessibility</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Safety Guidelines</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors text-lg">Privacy Policy</a></li> </ul> </div> </div> <div class="border-t border-gray-800 mt-12 pt-8 text-center"> <p class="text-gray-400 text-lg">© 2024 Golden Plaza Shopping Mall. All rights reserved. Designed with ❤️ for exceptional shopping experiences.</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96a9f1aaa32f3d34',t:'MTc1NDQzNTE3Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
* { font-family: 'Poppins', sans-serif; } .fade-in { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.7); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-in.visible { opacity: 1; transform: scale(1); } .rotate-in { opacity: 0; transform: rotate(-10deg) scale(0.8); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .rotate-in.visible { opacity: 1; transform: rotate(0deg) scale(1); } .floating { animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-10px) rotate(1deg); } 50% { transform: translateY(-15px) rotate(0deg); } 75% { transform: translateY(-5px) rotate(-1deg); } } .pulse-glow { animation: pulse-glow 3s ease-in-out infinite alternate; } @keyframes pulse-glow { from { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2); transform: scale(1); } to { box-shadow: 0 0 30px rgba(251, 191, 36, 0.8), 0 0 60px rgba(251, 191, 36, 0.4); transform: scale(1.05); } } .gradient-text { background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 3s ease-in-out infinite; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hover-lift { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hover-lift:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .mobile-menu { transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .mobile-menu.open { transform: translateX(0); } .card-hover { transition: all 0.3s ease; position: relative; overflow: hidden; } .card-hover::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .card-hover:hover::before { left: 100%; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(251, 191, 36, 0.3); } .typing-animation { overflow: hidden; border-right: 3px solid #fbbf24; white-space: nowrap; animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #fbbf24; } } .stagger-animation { animation-delay: var(--delay); } .bounce-in { animation: bounceIn 1s ease-out; } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } } .slide-up { transform: translateY(100px); opacity: 0; transition: all 0.8s ease; } .slide-up.visible { transform: translateY(0); opacity: 1; } .zoom-in { transform: scale(0); opacity: 0; transition: all 0.6s ease; } .zoom-in.visible { transform: scale(1); opacity: 1; } .flip-in { transform: rotateY(-90deg); opacity: 0; transition: all 0.8s ease; } .flip-in.visible { transform: rotateY(0); opacity: 1; } .glow-effect { position: relative; } .glow-effect::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 2px; background: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706, #fbbf24); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: rotate-border 3s linear infinite; } @keyframes rotate-border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #fbbf24, #f59e0b); border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #f59e0b, #d97706); }
JavaScript
// Mobile menu toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('open'); const icon = mobileMenuBtn.querySelector('i'); if (mobileMenu.classList.contains('open')) { icon.classList.replace('fa-bars', 'fa-times'); } else { icon.classList.replace('fa-times', 'fa-bars'); } }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // Close mobile menu if open mobileMenu.classList.remove('open'); const icon = mobileMenuBtn.querySelector('i'); icon.classList.replace('fa-times', 'fa-bars'); }); }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -100px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in, .rotate-in, .slide-up, .zoom-in, .flip-in').forEach(el => { observer.observe(el); }); // Counter animation function animateCounters() { const counters = document.querySelectorAll('.counter'); counters.forEach(counter => { const target = parseInt(counter.getAttribute('data-target')); const increment = target / 100; let current = 0; const updateCounter = () => { if (current < target) { current += increment; counter.textContent = Math.ceil(current); requestAnimationFrame(updateCounter); } else { counter.textContent = target; } }; updateCounter(); }); } // Trigger counter animation when statistics section is visible const statsSection = document.querySelector('.bg-gray-800'); const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); statsObserver.unobserve(entry.target); } }); }, { threshold: 0.5 }); if (statsSection) { statsObserver.observe(statsSection); } // Button interactions document.querySelectorAll('button').forEach(button => { button.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.classList.add('ripple'); this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Handle specific button actions if (this.textContent.includes('Subscribe')) { e.preventDefault(); const email = this.previousElementSibling?.value; if (email && email.includes('@')) { this.textContent = 'Subscribed!'; this.classList.add('bg-green-500'); setTimeout(() => { this.textContent = 'Subscribe'; this.classList.remove('bg-green-500'); }, 3000); } else { alert('Please enter a valid email address'); } } if (this.textContent.includes('Send Message')) { e.preventDefault(); this.textContent = 'Message Sent!'; this.classList.add('bg-green-500'); setTimeout(() => { this.textContent = 'Send Message'; this.classList.remove('bg-green-500'); this.closest('form')?.reset(); }, 3000); } if (this.textContent.includes('Visit Store') || this.textContent.includes('Get Tickets') || this.textContent.includes('Book Now')) { this.textContent = 'Coming Soon!'; setTimeout(() => { this.textContent = this.textContent.replace('Coming Soon!', this.getAttribute('data-original') || 'Click Me'); }, 2000); } }); }); // Parallax effect for hero section window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const hero = document.getElementById('home'); if (hero) { const rate = scrolled * -0.5; hero.style.transform = `translateY(${rate}px)`; } }); // Add stagger animation delays document.querySelectorAll('.stagger-animation').forEach((el, index) => { el.style.setProperty('--delay', `${index * 0.1}s`); }); // Typing animation for hero text const typingText = document.querySelector('.typing-animation'); if (typingText) { const text = typingText.textContent; typingText.textContent = ''; let i = 0; function typeWriter() { if (i < text.length) { typingText.textContent += text.charAt(i); i++; setTimeout(typeWriter, 100); } } setTimeout(typeWriter, 2000); } // Add CSS for ripple effect const style = document.createElement('style'); style.textContent = ` .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple-animation 0.6s linear; pointer-events: none; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); // Navbar background change on scroll window.addEventListener('scroll', () => { const nav = document.querySelector('nav'); if (window.scrollY > 100) { nav.classList.add('bg-opacity-95', 'backdrop-blur-md'); } else { nav.classList.remove('bg-opacity-95', 'backdrop-blur-md'); } }); // Initialize animations on page load window.addEventListener('load', () => { // Add bounce animation to hero elements document.querySelectorAll('#home .fade-in').forEach((el, index) => { setTimeout(() => { el.classList.add('bounce-in'); }, index * 200); }); });
Output Preview
Desktop
Mobile
Fullscreen