|
|
<!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> |
