Spaces:
Running
Running
File size: 13,301 Bytes
90edf9e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 | <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Labubu Official</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.bg-gradient {
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
}
.search-box {
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.trending-item:hover {
background-color: rgba(0, 120, 212, 0.1);
}
.dropdown:hover .dropdown-menu {
display: block;
}
.quiz-option:hover {
background-color: rgba(0, 120, 212, 0.05);
}
</style>
</head>
<body class="font-sans bg-gray-50 min-h-screen flex flex-col">
<!-- Header -->
<!-- Hero Section -->
<section class="bg-gradient py-20">
<div class="container mx-auto px-4 text-center">
<h1 class="text-5xl font-bold text-white mb-6">Welcome to Labubu World</h1>
<p class="text-xl text-white mb-8 max-w-2xl mx-auto">Discover the magical creatures from Kasing Lung's fantasy universe</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-pink-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Shop Now</button>
<button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-pink-600 transition">Explore</button>
</div>
</div>
</section>
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-2 flex justify-between items-center">
<div class="flex items-center space-x-6">
<a href="#" class="text-pink-600 font-bold text-2xl">LABUBU</a>
<nav class="hidden md:flex space-x-4">
<a href="#" class="text-gray-700 hover:text-pink-600">Characters</a>
<a href="#" class="text-gray-700 hover:text-pink-600">Collections</a>
<a href="#" class="text-gray-700 hover:text-pink-600">Shop</a>
<a href="#" class="text-gray-700 hover:text-pink-600">Gallery</a>
<a href="#" class="text-gray-700 hover:text-pink-600">About</a>
</nav>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-700 hover:text-pink-600 hidden md:block">News</a>
<a href="#" class="text-gray-700 hover:text-pink-600 flex items-center">
<i class="fas fa-shopping-cart text-xl"></i>
<span class="ml-1 hidden md:inline">Cart</span>
</a>
<a href="#" class="text-gray-700 hover:text-pink-600 hidden md:block">Events</a>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</header>
<!-- Products Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Featured Collections</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1627855437693-dcc7b0c4ba8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Labubu Forest" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Forest Series</h3>
<p class="text-gray-600 mb-4">Magical creatures living in the enchanted forest</p>
<button class="text-pink-600 font-medium hover:text-pink-700">View Collection →</button>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Labubu Space" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Space Series</h3>
<p class="text-gray-600 mb-4">Adventures in the cosmic wonderland</p>
<button class="text-pink-600 font-medium hover:text-pink-700">View Collection →</button>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Labubu Candy" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Candy Series</h3>
<p class="text-gray-600 mb-4">Sweet and colorful characters</p>
<button class="text-pink-600 font-medium hover:text-pink-700">View Collection →</button>
</div>
</div>
</div>
</div>
</section>
<!-- New Arrivals Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">New Arrivals</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1635070041053-2c8f7a7b1c3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Labubu Mini" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-1">Mini Series</h3>
<p class="text-sm text-gray-600 mb-2">$29.99</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1637858868819-3f7b6a5d5d5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Labubu Halloween" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-1">Halloween Edition</h3>
<p class="text-sm text-gray-600 mb-2">$39.99</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Labubu Rainbow" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-1">Rainbow Edition</h3>
<p class="text-sm text-gray-600 mb-2">$49.99</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Labubu Galaxy" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-1">Galaxy Edition</h3>
<p class="text-sm text-gray-600 mb-2">$59.99</p>
</div>
</div>
</div>
</div>
</section>
<!-- Artist Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
<img src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Kasing Lung with Labubu" class="rounded-lg shadow-md w-full h-auto">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-6">Meet the Artist</h2>
<p class="text-gray-600 mb-4">Kasing Lung is the talented artist behind the Labubu universe. His whimsical characters and imaginative worlds have captured the hearts of collectors worldwide.</p>
<p class="text-gray-600 mb-6">Each Labubu figure is carefully designed with unique personalities and stories, making them more than just toys - they're works of art.</p>
<button class="bg-pink-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-pink-700 transition">Learn More</button>
</div>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="py-16 bg-pink-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Join the Labubu Family</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to get updates on new releases, events and exclusive offers</p>
<div class="max-w-md mx-auto flex">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none text-gray-800">
<button class="bg-white text-pink-600 px-6 py-3 rounded-r-full font-semibold hover:bg-gray-100 transition">Subscribe</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">LABUBU</h3>
<p class="text-gray-400">Magical creatures from the imagination of Kasing Lung</p>
</div>
<div>
<h4 class="font-semibold mb-4">Shop</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">All Products</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Limited Editions</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">About</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Our Story</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">The Artist</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Events</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-weibo"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>© 2023 Labubu Official. All rights reserved.</p>
</div>
</div>
</footer>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=haaaaaaaa1/labubuwebsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |