All Prompts
All Prompts
herosectionlandingecommercegamingtailwindresponsiveinteractive
Gaming Hero and Latest Drops Product Section
Секция Landing Page: Hero с игровым изображением и сетка "Latest Drops" для аккаунтов MLBB. Адаптивный дизайн, эффекты при наведении.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drive X Store - Premium Accounts</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Inter:wght@400;500;600&display=swap"
rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'display': ['Oswald', 'sans-serif'], // For Headings
'body': ['Inter', 'sans-serif'], // For Body text
},
colors: {
'accent': '#FFD700', // Gold color for gaming vibe
}
}
}
}
</script>
<style>
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Hide scrollbar for clean look */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-neutral-50 text-neutral-900 font-body selection:bg-black selection:text-white">
<nav class="fixed top-0 w-full z-50 bg-neutral-50/80 backdrop-blur-md border-b border-neutral-200">
<div class="max-w-7xl mx-auto px-6 h-16 flex justify-between items-center">
<div class="font-display font-bold text-xl tracking-tighter">DRIVE X STORE.</div>
<a href="#"
class="text-xs font-bold uppercase border border-black px-4 py-2 rounded-full hover:bg-black hover:text-white transition">
Contact Us
</a>
</div>
</nav>
<header class="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-[90vh] flex flex-col justify-center">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<div class="lg:col-span-7 relative z-10">
<div class="inline-block bg-black text-white text-[10px] font-bold px-2 py-1 mb-4 uppercase tracking-wider">
Official Reseller
</div>
<h1 class="font-display text-[15vw] lg:text-[8rem] leading-[0.85] uppercase text-black mb-6">
LEVEL UP<br>
YOUR
<span class="text-transparent bg-clip-text bg-gradient-to-r from-neutral-500 to-black">LEGACY</span>
</h1>
<p class="max-w-md text-neutral-600 text-sm md:text-base leading-relaxed mb-8">
Premium MLBB accounts, curated for serious players.
Safe, fast, and 100% secured transactions.
</p>
<div class="flex items-center gap-4">
<div class="h-[1px] w-12 bg-black"></div>
<span class="text-xs font-bold uppercase tracking-widest">Scroll to Explore</span>
</div>
</div>
<div class="lg:col-span-5 relative group">
<div
class="absolute inset-0 bg-black translate-x-3 translate-y-3 rounded-xl transition-transform group-hover:translate-x-4 group-hover:translate-y-4">
</div>
<div class="relative bg-neutral-200 rounded-xl overflow-hidden aspect-[4/5] border border-neutral-900">
<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2670&auto=format&fit=crop"
alt="Featured Event"
class="object-cover w-full h-full grayscale group-hover:grayscale-0 transition duration-500 transform group-hover:scale-105">
<div class="absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-yellow-400 text-xs font-bold uppercase mb-1 block">Special Event</span>
<h3 class="text-white font-display text-2xl uppercase">KOF Skin Series<br>Available Now</h3>
</div>
</div>
</div>
</div>
</header>
<section class="py-20 bg-white border-t border-neutral-200">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-12">
<h2 class="font-display text-4xl md:text-6xl uppercase">Latest<br>Drops</h2>
<a href="#" class="hidden md:flex items-center gap-2 text-sm font-bold uppercase hover:underline">
View All Accounts <span>→</span>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="group cursor-pointer">
<div class="relative overflow-hidden bg-neutral-100 aspect-[4/3] mb-4 border border-neutral-200">
<span class="absolute top-3 left-3 bg-black text-white text-[10px] font-bold px-2 py-1 uppercase">Mythic Glory</span>
<img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=2671&auto=format&fit=crop" class="object-cover w-full h-full group-hover:scale-105 transition duration-500">
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="font-display text-xl uppercase mb-1 group-hover:text-neutral-600 transition">ID: 88291 (Smurf)
</h3>
<p class="text-xs text-neutral-500">2 Legends • 5 Collectors • Max Emblems</p>
</div>
<span class="font-bold text-lg">$120</span>
</div>
</div>
<div class="group cursor-pointer">
<div class="relative overflow-hidden bg-neutral-100 aspect-[4/3] mb-4 border border-neutral-200">
<span class="absolute top-3 left-3 bg-black text-white text-[10px] font-bold px-2 py-1 uppercase">Honor</span>
<img src="https://images.unsplash.com/photo-1538481199705-c710c4e965fc?q=80&w=2765&auto=format&fit=crop" class="object-cover w-full h-full group-hover:scale-105 transition duration-500">
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="font-display text-xl uppercase mb-1 group-hover:text-neutral-600 transition">ID: 99210 (Main)
</h3>
<p class="text-xs text-neutral-500">Full Skin • Gusion KOF • 60% WR</p>
</div>
<span class="font-bold text-lg">$250</span>
</div>
</div>
<div class="group cursor-pointer">
<div class="relative overflow-hidden bg-neutral-100 aspect-[4/3] mb-4 border border-neutral-200">
<span class="absolute top-3 left-3 bg-neutral-400 text-white text-[10px] font-bold px-2 py-1 uppercase">Sold Out</span>
<img src="https://images.unsplash.com/photo-1552820728-8b83bb6b773f?q=80&w=2670&auto=format&fit=crop" class="object-cover w-full h-full grayscale opacity-60">
</div>
<div class="flex justify-between items-start opacity-50">
<div>
<h3 class="font-display text-xl uppercase mb-1">ID: 11029</h3>
<p class="text-xs text-neutral-500">Epic V • Basic Skins</p>
</div>
<span class="font-bold text-lg line-through">$45</span>
</div>
</div>
</div>
<div class="mt-8 md:hidden flex justify-center">
<button class="w-full border border-black py-4 font-bold uppercase text-xs tracking-widest">View All Accounts</button>
</div>
</div>
</section>
</body>
</html>