| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GamerZone - Steam-like Store</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> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #1a1a1a; |
| color: #e6e6e6; |
| } |
| |
| .game-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| } |
| |
| .discount-badge { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| background-color: #4c6b22; |
| color: #beee11; |
| padding: 3px 8px; |
| font-weight: bold; |
| border-radius: 3px; |
| font-size: 14px; |
| } |
| |
| .nav-link:hover { |
| color: #fff; |
| background-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| .progress-bar { |
| height: 4px; |
| background-color: rgba(255, 255, 255, 0.2); |
| border-radius: 2px; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background-color: #66c0f4; |
| border-radius: 2px; |
| } |
| |
| .review-card { |
| background-color: #2a2a2a; |
| transition: all 0.3s ease; |
| } |
| |
| .review-card:hover { |
| background-color: #333333; |
| } |
| |
| .system-req { |
| background-color: #2a2a2a; |
| border-left: 3px solid #66c0f4; |
| } |
| |
| .carousel-item { |
| min-width: 100%; |
| transition: transform 0.5s ease; |
| } |
| |
| .carousel-container { |
| scroll-behavior: smooth; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="bg-[#171a21] sticky top-0 z-50 shadow-lg"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-10"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center"> |
| <i class="fas fa-gamepad text-white text-xl"></i> |
| </div> |
| <span class="ml-2 text-white font-bold text-xl">GamerZone</span> |
| </div> |
| <nav class="hidden md:flex space-x-1"> |
| <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">Store</a> |
| <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">Community</a> |
| <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">About</a> |
| <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">Support</a> |
| </nav> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative hidden md:block"> |
| <input type="text" placeholder="Search games..." class="bg-[#316282] text-white placeholder-gray-300 rounded-md px-4 py-1 pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-search absolute left-3 top-2 text-gray-300"></i> |
| </div> |
| <button class="bg-[#5c7e10] hover:bg-[#6e9319] text-white px-4 py-1 rounded text-sm font-medium"> |
| <i class="fas fa-shopping-cart mr-1"></i> Cart (3) |
| </button> |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center cursor-pointer"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-6"> |
| |
| <div class="relative rounded-lg overflow-hidden mb-8"> |
| <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div> |
| <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Featured Game" class="w-full h-96 object-cover"> |
| <div class="absolute bottom-0 left-0 z-20 p-8 w-full md:w-1/2"> |
| <h1 class="text-4xl font-bold text-white mb-2">Cyber Nexus 2077</h1> |
| <p class="text-gray-300 mb-4">Enter a dystopian future where technology and humanity collide in this open-world RPG.</p> |
| <div class="flex items-center mb-4"> |
| <div class="flex mr-4"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| <i class="fas fa-star-half-alt text-yellow-400"></i> |
| <span class="ml-1 text-gray-300 text-sm">(4,892)</span> |
| </div> |
| <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">RPG</span> |
| <span class="bg-purple-500 text-white text-xs px-2 py-1 rounded ml-2">Open World</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-[#4c6b22] text-[#beee11] px-3 py-1 font-bold mr-4"> |
| -50% |
| </div> |
| <div class="flex flex-col"> |
| <span class="text-gray-400 line-through text-sm">$59.99</span> |
| <span class="text-white font-bold text-xl">$29.99</span> |
| </div> |
| <button class="ml-6 bg-[#5c7e10] hover:bg-[#6e9319] text-white px-6 py-2 rounded font-medium"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="mb-10"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-2xl font-bold text-white">Featured Games</h2> |
| <div class="flex space-x-2"> |
| <button onclick="scrollCarousel('featured', -1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fas fa-chevron-left text-white"></i> |
| </button> |
| <button onclick="scrollCarousel('featured', 1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fas fa-chevron-right text-white"></i> |
| </button> |
| </div> |
| </div> |
| <div id="featured-carousel" class="carousel-container relative flex overflow-x-auto space-x-4 pb-4 scrollbar-hide"> |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| <div class="discount-badge">-30%</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Space Odyssey</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(2,145)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-gray-400 line-through text-sm mr-2">$39.99</span> |
| <span class="text-white font-bold">$27.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Cyber Nexus 2077</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(4,892)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-gray-400 line-through text-sm mr-2">$59.99</span> |
| <span class="text-white font-bold">$29.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| <div class="discount-badge">-60%</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Zombie Apocalypse</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(1,023)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-gray-400 line-through text-sm mr-2">$24.99</span> |
| <span class="text-white font-bold">$9.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Fantasy Realms</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(5,621)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-white font-bold">$49.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| <div class="discount-badge">-25%</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Racing Legends</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(3,456)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-gray-400 line-through text-sm mr-2">$34.99</span> |
| <span class="text-white font-bold">$26.24</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| |
| <div class="w-full md:w-2/3"> |
| |
| <div class="mb-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-xl font-bold text-white">Screenshots</h2> |
| <div class="flex space-x-2"> |
| <button onclick="scrollCarousel('screenshots', -1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fas fa-chevron-left text-white"></i> |
| </button> |
| <button onclick="scrollCarousel('screenshots', 1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fas fa-chevron-right text-white"></i> |
| </button> |
| </div> |
| </div> |
| <div id="screenshots-carousel" class="carousel-container relative flex overflow-x-auto space-x-4 pb-4 scrollbar-hide"> |
| <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Screenshot 1" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Screenshot 2" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Screenshot 3" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Screenshot 4" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg"> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h2 class="text-xl font-bold text-white mb-4">About the Game</h2> |
| <p class="text-gray-300 mb-4"> |
| Cyber Nexus 2077 is an open-world, action-adventure story set in Night City, a megalopolis obsessed with power, glamour and body modification. You play as V, a mercenary outlaw going after a one-of-a-kind implant that is the key to immortality. |
| </p> |
| <p class="text-gray-300 mb-4"> |
| Explore a vast city where the choices you make shape the story and the world around you. Become a cyberpunk, an urban mercenary equipped with cybernetic enhancements and build your legend on the streets of Night City. |
| </p> |
| <p class="text-gray-300"> |
| With hundreds of weapons, cyberware modifications, and other ways to customize your character, you can play Cyber Nexus 2077 exactly the way you want. |
| </p> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h2 class="text-xl font-bold text-white mb-4">System Requirements</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="system-req p-4 rounded"> |
| <h3 class="text-white font-medium mb-2">Minimum</h3> |
| <ul class="text-gray-300 text-sm space-y-1"> |
| <li><span class="font-medium">OS:</span> Windows 10 64-bit</li> |
| <li><span class="font-medium">Processor:</span> Intel Core i5-3570K or AMD FX-8310</li> |
| <li><span class="font-medium">Memory:</span> 8 GB RAM</li> |
| <li><span class="font-medium">Graphics:</span> NVIDIA GeForce GTX 780 or AMD Radeon RX 470</li> |
| <li><span class="font-medium">Storage:</span> 70 GB available space</li> |
| </ul> |
| </div> |
| <div class="system-req p-4 rounded"> |
| <h3 class="text-white font-medium mb-2">Recommended</h3> |
| <ul class="text-gray-300 text-sm space-y-1"> |
| <li><span class="font-medium">OS:</span> Windows 10 64-bit</li> |
| <li><span class="font-medium">Processor:</span> Intel Core i7-4790 or AMD Ryzen 3 3200G</li> |
| <li><span class="font-medium">Memory:</span> 12 GB RAM</li> |
| <li><span class="font-medium">Graphics:</span> NVIDIA GeForce GTX 1060 or AMD Radeon RX 590</li> |
| <li><span class="font-medium">Storage:</span> 70 GB available space (SSD recommended)</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-xl font-bold text-white">User Reviews</h2> |
| <button class="text-blue-400 hover:text-blue-300 text-sm font-medium">See all reviews</button> |
| </div> |
| |
| <div class="flex items-center mb-6"> |
| <div class="mr-4"> |
| <span class="text-4xl font-bold text-white">89%</span> |
| <span class="block text-sm text-gray-400">of 4,892 reviews</span> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center mb-1"> |
| <span class="text-sm text-gray-300 w-16">Positive</span> |
| <div class="progress-bar flex-1 mx-2"> |
| <div class="progress-fill" style="width: 89%"></div> |
| </div> |
| <span class="text-sm text-gray-300">4,356</span> |
| </div> |
| <div class="flex items-center mb-1"> |
| <span class="text-sm text-gray-300 w-16">Negative</span> |
| <div class="progress-bar flex-1 mx-2"> |
| <div class="progress-fill bg-red-500" style="width: 11%"></div> |
| </div> |
| <span class="text-sm text-gray-300">536</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-4"> |
| |
| <div class="review-card p-4 rounded-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-gray-600 mr-3"></div> |
| <div> |
| <h4 class="text-white font-medium">CyberPunkFan</h4> |
| <div class="flex items-center"> |
| <div class="flex mr-1"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">32 hrs on record</span> |
| </div> |
| </div> |
| <div class="ml-auto text-gray-400 text-sm">Posted: 2 days ago</div> |
| </div> |
| <p class="text-gray-300 mb-3"> |
| Absolutely stunning game! The world is incredibly detailed and immersive. The story is engaging and the characters feel real. Definitely worth every penny, especially at this discounted price. |
| </p> |
| <div class="flex items-center text-sm"> |
| <button class="text-gray-400 hover:text-white mr-4"> |
| <i class="far fa-thumbs-up mr-1"></i> 124 |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="far fa-thumbs-down mr-1"></i> 3 |
| </button> |
| <button class="ml-auto text-blue-400 hover:text-blue-300"> |
| <i class="far fa-comment mr-1"></i> Reply |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="review-card p-4 rounded-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-gray-600 mr-3"></div> |
| <div> |
| <h4 class="text-white font-medium">TechGamer</h4> |
| <div class="flex items-center"> |
| <div class="flex mr-1"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">45 hrs on record</span> |
| </div> |
| </div> |
| <div class="ml-auto text-gray-400 text-sm">Posted: 1 week ago</div> |
| </div> |
| <p class="text-gray-300 mb-3"> |
| The game has improved significantly since launch. The world-building is phenomenal and the side quests are actually interesting. Still some bugs here and there, but nothing game-breaking. Recommended if you enjoy immersive RPGs. |
| </p> |
| <div class="flex items-center text-sm"> |
| <button class="text-gray-400 hover:text-white mr-4"> |
| <i class="far fa-thumbs-up mr-1"></i> 89 |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="far fa-thumbs-down mr-1"></i> 7 |
| </button> |
| <button class="ml-auto text-blue-400 hover:text-blue-300"> |
| <i class="far fa-comment mr-1"></i> Reply |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="w-full md:w-1/3"> |
| |
| <div class="bg-[#1e2127] rounded-lg p-6 mb-6 sticky top-24"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-xl font-bold text-white">Buy Cyber Nexus 2077</h3> |
| <div class="bg-[#4c6b22] text-[#beee11] px-2 py-1 text-sm font-bold"> |
| -50% |
| </div> |
| </div> |
| |
| <div class="flex items-center mb-6"> |
| <span class="text-gray-400 line-through mr-2">$59.99</span> |
| <span class="text-white font-bold text-2xl">$29.99</span> |
| </div> |
| |
| <button class="w-full bg-[#5c7e10] hover:bg-[#6e9319] text-white py-3 rounded font-bold mb-4"> |
| <i class="fas fa-shopping-cart mr-2"></i> Add to Cart |
| </button> |
| |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded font-bold mb-6"> |
| <i class="fas fa-bolt mr-2"></i> Buy Now |
| </button> |
| |
| <div class="border-t border-gray-700 pt-4"> |
| <h4 class="text-white font-medium mb-3">This game includes:</h4> |
| <ul class="text-gray-300 space-y-2 text-sm"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-400 mr-2 mt-1"></i> |
| <span>Full Cyber Nexus 2077 game</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-400 mr-2 mt-1"></i> |
| <span>Digital Artbook</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-400 mr-2 mt-1"></i> |
| <span>Original Soundtrack</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="bg-[#1e2127] rounded-lg p-6 mb-6"> |
| <h3 class="text-xl font-bold text-white mb-4">Downloadable Content</h3> |
| |
| <div class="space-y-4"> |
| |
| <div class="flex"> |
| <div class="w-20 h-20 bg-gray-800 rounded mr-4 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="DLC Cover" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <h4 class="text-white font-medium text-sm mb-1">Phantom Liberty</h4> |
| <div class="flex items-center mb-1"> |
| <span class="text-gray-400 line-through text-xs mr-1">$19.99</span> |
| <span class="text-white text-sm font-bold">$14.99</span> |
| </div> |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="w-20 h-20 bg-gray-800 rounded mr-4 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="DLC Cover" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <h4 class="text-white font-medium text-sm mb-1">Night City Expansion</h4> |
| <div class="flex items-center mb-1"> |
| <span class="text-gray-400 line-through text-xs mr-1">$14.99</span> |
| <span class="text-white text-sm font-bold">$9.99</span> |
| </div> |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <button class="w-full mt-4 text-blue-400 hover:text-blue-300 text-sm font-medium"> |
| View all 5 DLCs |
| </button> |
| </div> |
| |
| |
| <div class="bg-[#1e2127] rounded-lg p-6"> |
| <h3 class="text-xl font-bold text-white mb-4">Popular user-defined tags</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">RPG</span> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Open World</span> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Cyberpunk</span> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Futuristic</span> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Story Rich</span> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Singleplayer</span> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">FPS</span> |
| <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Sci-fi</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-2xl font-bold text-white">More Like This</h2> |
| <div class="flex space-x-2"> |
| <button onclick="scrollCarousel('more-games', -1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fas fa-chevron-left text-white"></i> |
| </button> |
| <button onclick="scrollCarousel('more-games', 1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fas fa-chevron-right text-white"></i> |
| </button> |
| </div> |
| </div> |
| <div id="more-games-carousel" class="carousel-container relative flex overflow-x-auto space-x-4 pb-4 scrollbar-hide"> |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Deus Ex: Mankind Divided</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(3,781)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-white font-bold">$19.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| <div class="discount-badge">-40%</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Watch Dogs: Legion</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(2,943)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-gray-400 line-through text-sm mr-2">$49.99</span> |
| <span class="text-white font-bold">$29.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">The Ascent</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(1,876)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-white font-bold">$29.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| <div class="discount-badge">-60%</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Ghostrunner</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(3,245)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-gray-400 line-through text-sm mr-2">$29.99</span> |
| <span class="text-white font-bold">$11.99</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-medium mb-1">Observer: System Redux</h3> |
| <div class="flex items-center mb-2"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star text-yellow-400 text-xs"></i> |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> |
| <i class="far fa-star text-yellow-400 text-xs"></i> |
| </div> |
| <span class="text-gray-400 text-xs">(1,543)</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-white font-bold">$24.99</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-[#171a21] py-10"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <h3 class="text-white font-bold mb-4">About GamerZone</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">About Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">GamerZone Partners</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Gift Cards</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-bold mb-4">Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Support</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Forums</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community Guidelines</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Feedback</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-bold mb-4">Legal</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Refund Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Preferences</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-bold mb-4">Connect With Us</h3> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fab fa-facebook-f text-white"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fab fa-twitter text-white"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fab fa-instagram text-white"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
| <i class="fab fa-discord text-white"></i> |
| </a> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-globe text-gray-400 mr-2"></i> |
| <select class="bg-transparent text-white text-sm focus:outline-none"> |
| <option>English</option> |
| <option>Français</option> |
| <option>Deutsch</option> |
| <option>Español</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 pt-6"> |
| <p class="text-gray-400 text-sm">© 2023 GamerZone, Inc. All rights reserved. All trademarks are property of their respective owners.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function scrollCarousel(carouselId, direction) { |
| const carousel = document.getElementById(`${carouselId}-carousel`); |
| const itemWidth = carousel.querySelector('.carousel-item').offsetWidth; |
| carousel.scrollBy({ left: direction * itemWidth, behavior: 'smooth' }); |
| } |
| |
| |
| document.querySelectorAll('[class*="Add to Cart"]').forEach(button => { |
| button.addEventListener('click', function() { |
| const cartCount = document.querySelector('[class*="Cart ("]'); |
| let count = parseInt(cartCount.textContent.match(/\d+/)[0]); |
| cartCount.textContent = cartCount.textContent.replace(/\d+/, count + 1); |
| |
| |
| const icon = this.querySelector('i') || document.createElement('i'); |
| const iconClone = icon.cloneNode(true); |
| iconClone.style.position = 'fixed'; |
| iconClone.style.zIndex = '9999'; |
| iconClone.style.fontSize = '20px'; |
| iconClone.style.color = '#5c7e10'; |
| |
| const rect = this.getBoundingClientRect(); |
| const cartRect = document.querySelector('[class*="Cart ("]').getBoundingClientRect(); |
| |
| iconClone.style.left = rect.left + 'px'; |
| iconClone.style.top = rect.top + 'px'; |
| document.body.appendChild(iconClone); |
| |
| const animation = iconClone.animate([ |
| { |
| left: rect.left + 'px', |
| top: rect.top + 'px', |
| opacity: 1, |
| transform: 'scale(1)' |
| }, |
| { |
| left: cartRect.right - 20 + 'px', |
| top: cartRect.top - 10 + 'px', |
| opacity: 0, |
| transform: 'scale(0.5)' |
| } |
| ], { |
| duration: 800, |
| easing: 'cubic-bezier(0.42, 0, 0.58, 1)' |
| }); |
| |
| animation.onfinish = () => { |
| iconClone.remove(); |
| }; |
| }); |
| }); |
| |
| |
| console.log("HACK: 99999 - Unlimited gaming power activated!"); |
| </script> |
| <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=REDMOOD/gamerzone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
