|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GamePulse - Latest Gaming News</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=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #0f172a; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
|
|
} |
|
|
|
|
|
.news-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.news-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tag { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tag:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
display: block; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: #3b82f6; |
|
|
transition: width 0.3s; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.search-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-gray-100"> |
|
|
|
|
|
<header class="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-8"> |
|
|
<a href="#" class="flex items-center space-x-2"> |
|
|
<i class="fas fa-gamepad text-blue-500 text-2xl"></i> |
|
|
<span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">GamePulse</span> |
|
|
</a> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="nav-link font-medium hover:text-blue-400">Home</a> |
|
|
<a href="#" class="nav-link font-medium hover:text-blue-400">News</a> |
|
|
<a href="#" class="nav-link font-medium hover:text-blue-400">Reviews</a> |
|
|
<a href="#" class="nav-link font-medium hover:text-blue-400">Guides</a> |
|
|
<a href="#" class="nav-link font-medium hover:text-blue-400">Esports</a> |
|
|
</nav> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative hidden md:block"> |
|
|
<input type="text" placeholder="Search games..." class="search-input bg-slate-800 rounded-full py-2 px-4 pl-10 w-64 focus:ring-2 focus:ring-blue-500 text-sm"> |
|
|
<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
|
|
Sign In |
|
|
</button> |
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-white focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-slate-900 px-4 py-2 border-t border-slate-800"> |
|
|
<div class="flex flex-col space-y-3"> |
|
|
<a href="#" class="block py-2 hover:text-blue-400">Home</a> |
|
|
<a href="#" class="block py-2 hover:text-blue-400">News</a> |
|
|
<a href="#" class="block py-2 hover:text-blue-400">Reviews</a> |
|
|
<a href="#" class="block py-2 hover:text-blue-400">Guides</a> |
|
|
<a href="#" class="block py-2 hover:text-blue-400">Esports</a> |
|
|
<div class="relative pt-2"> |
|
|
<input type="text" placeholder="Search games..." class="search-input bg-slate-800 rounded-full py-2 px-4 pl-10 w-full focus:ring-2 focus:ring-blue-500 text-sm"> |
|
|
<i class="fas fa-search absolute left-3 top-4 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-gradient py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
|
|
<span class="inline-block bg-blue-900 text-blue-300 px-3 py-1 rounded-full text-xs font-semibold mb-4">BREAKING NEWS</span> |
|
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Next-Gen Console War Heats Up With Exclusive Game Reveals</h1> |
|
|
<p class="text-lg text-gray-300 mb-6">Microsoft and Sony announce blockbuster exclusives coming this holiday season that could shift the balance in the console war.</p> |
|
|
<div class="flex flex-wrap gap-3 mb-6"> |
|
|
<span class="tag bg-slate-800 hover:bg-slate-700 text-blue-400 px-3 py-1 rounded-full text-xs font-medium cursor-pointer">#PS5</span> |
|
|
<span class="tag bg-slate-800 hover:bg-slate-700 text-green-400 px-3 py-1 rounded-full text-xs font-medium cursor-pointer">#Xbox</span> |
|
|
<span class="tag bg-slate-800 hover:bg-slate-700 text-purple-400 px-3 py-1 rounded-full text-xs font-medium cursor-pointer">#Exclusives</span> |
|
|
</div> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> |
|
|
Read Full Story <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="relative overflow-hidden rounded-xl shadow-2xl"> |
|
|
<img src="https://images.unsplash.com/photo-1607853202273-797f1c22a38e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Next-Gen Consoles" class="w-full h-auto"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-6"> |
|
|
<p class="text-sm text-gray-300">Image: Concept art from upcoming exclusives</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold flex items-center"> |
|
|
<i class="fas fa-fire text-red-500 mr-3"></i> Trending Now |
|
|
</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center"> |
|
|
View All <i class="fas fa-chevron-right ml-1 text-xs"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg"> |
|
|
<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="Elden Ring DLC" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3"> |
|
|
<span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full font-bold">HOT</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-2"> |
|
|
<span>Today</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>By Alex Johnson</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Elden Ring DLC "Shadow of the Erdtree" Announced</h3> |
|
|
<p class="text-gray-300 text-sm mb-4">FromSoftware reveals first details about the highly anticipated expansion coming early next year.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="tag bg-slate-700 hover:bg-slate-600 text-yellow-400 px-2 py-1 rounded-full text-xs">#RPG</span> |
|
|
<span class="tag bg-slate-700 hover:bg-slate-600 text-red-400 px-2 py-1 rounded-full text-xs">#FromSoftware</span> |
|
|
</div> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1598550476439-6847785fcea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Starfield" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3"> |
|
|
<span class="bg-blue-600 text-white text-xs px-2 py-1 rounded-full font-bold">NEW</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-2"> |
|
|
<span>2 days ago</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>By Sarah Miller</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Starfield Review: A Stellar But Flawed Space Epic</h3> |
|
|
<p class="text-gray-300 text-sm mb-4">Bethesda's ambitious space RPG delivers breathtaking exploration but stumbles with technical issues.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="tag bg-slate-700 hover:bg-slate-600 text-blue-400 px-2 py-1 rounded-full text-xs">#Bethesda</span> |
|
|
<span class="tag bg-slate-700 hover:bg-slate-600 text-purple-400 px-2 py-1 rounded-full text-xs">#RPG</span> |
|
|
</div> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg"> |
|
|
<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=1470&q=80" alt="Esports" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-3 left-3"> |
|
|
<span class="bg-green-600 text-white text-xs px-2 py-1 rounded-full font-bold">LIVE</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-2"> |
|
|
<span>3 hours ago</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>By James Chen</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Team Liquid Wins International 2023 in Stunning Upset</h3> |
|
|
<p class="text-gray-300 text-sm mb-4">Underdog team takes home $15 million prize in what analysts are calling the greatest finals in esports history.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="tag bg-slate-700 hover:bg-slate-600 text-green-400 px-2 py-1 rounded-full text-xs">#Esports</span> |
|
|
<span class="tag bg-slate-700 hover:bg-slate-600 text-orange-400 px-2 py-1 rounded-full text-xs">#Dota2</span> |
|
|
</div> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold flex items-center"> |
|
|
<i class="fas fa-newspaper text-blue-500 mr-3"></i> Latest News |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg text-sm font-medium">All</button> |
|
|
<button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded-lg text-sm font-medium">PC</button> |
|
|
<button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded-lg text-sm font-medium">Console</button> |
|
|
<button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded-lg text-sm font-medium">Mobile</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cyberpunk 2077" class="w-full h-40 object-cover"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-2"> |
|
|
<span>5 hours ago</span> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Cyberpunk 2077 2.0 Update Overhauls Core Systems</h3> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-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="Nintendo Switch" class="w-full h-40 object-cover"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-2"> |
|
|
<span>7 hours ago</span> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Nintendo Switch 2 Specs Leak Suggests 4K Support</h3> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1b15?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="GTA 6" class="w-full h-40 object-cover"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-2"> |
|
|
<span>10 hours ago</span> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">GTA 6 Development Progress Reportedly Ahead of Schedule</h3> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-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="VR Gaming" class="w-full h-40 object-cover"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-2"> |
|
|
<span>12 hours ago</span> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">New VR Headset From Valve Rumored for 2024 Release</h3> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold flex items-center"> |
|
|
<i class="fas fa-star text-yellow-500 mr-3"></i> Featured Reviews |
|
|
</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center"> |
|
|
View All Reviews <i class="fas fa-chevron-right ml-1 text-xs"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg flex flex-col lg:flex-row"> |
|
|
<div class="lg:w-1/3"> |
|
|
<img src="https://images.unsplash.com/photo-1638549501416-57f5f543a6fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Baldur's Gate 3" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="lg:w-2/3 p-6"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<span class="text-xs text-gray-400">September 5, 2023</span> |
|
|
<div class="flex items-center bg-slate-900 px-2 py-1 rounded-full"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<span class="text-xs font-bold">9.5/10</span> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Baldur's Gate 3 Review: A Masterclass in RPG Design</h3> |
|
|
<p class="text-gray-300 text-sm mb-4">Larian Studios delivers what might be the greatest CRPG ever made, with unparalleled depth, choice, and storytelling.</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full overflow-hidden mr-3"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<span class="text-sm text-gray-300">By Michael Thompson</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg flex flex-col lg:flex-row"> |
|
|
<div class="lg:w-1/3"> |
|
|
<img src="https://images.unsplash.com/photo-1633613286848-e6f43bbafb8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Final Fantasy XVI" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="lg:w-2/3 p-6"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<span class="text-xs text-gray-400">August 20, 2023</span> |
|
|
<div class="flex items-center bg-slate-900 px-2 py-1 rounded-full"> |
|
|
<i class="fas fa-star text-yellow-400 text-xs mr-1"></i> |
|
|
<span class="text-xs font-bold">8.8/10</span> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Final Fantasy XVI: A Bold New Direction for the Series</h3> |
|
|
<p class="text-gray-300 text-sm mb-4">Square Enix takes risks with this action-focused entry, delivering spectacular battles but sacrificing some RPG depth.</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full overflow-hidden mr-3"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<span class="text-sm text-gray-300">By Jessica Lee</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold flex items-center"> |
|
|
<i class="fas fa-calendar-alt text-purple-500 mr-3"></i> Upcoming Releases |
|
|
</h2> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center"> |
|
|
View Release Calendar <i class="fas fa-chevron-right ml-1 text-xs"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<div class="inline-block min-w-full align-middle"> |
|
|
<div class="overflow-hidden shadow rounded-lg"> |
|
|
<table class="min-w-full divide-y divide-slate-700"> |
|
|
<thead class="bg-slate-800"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Game</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Platform</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Release Date</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Developer</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Genre</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-slate-800 divide-y divide-slate-700"> |
|
|
<tr class="hover:bg-slate-700/50 transition"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/0/05/Spiderman_2_cover.jpg" alt="Spider-Man 2"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-white">Marvel's Spider-Man 2</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">PS5</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">October 20, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Insomniac Games</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Action-Adventure</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-slate-700/50 transition"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/9/9f/Super_Mario_Bros_Wonder.jpg" alt="Super Mario Bros. Wonder"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-white">Super Mario Bros. Wonder</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-300">Switch</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">October 20, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Nintendo EPD</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Platformer</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-slate-700/50 transition"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/1f/Alan_Wake_2_cover.jpg/220px-Alan_Wake_2_cover.jpg" alt="Alan Wake 2"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-white">Alan Wake 2</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">PC</span> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">PS5</span> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-600 text-white">Xbox</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">October 27, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Remedy Entertainment</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Survival Horror</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-slate-700/50 transition"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/4f/Call_of_Duty_Modern_Warfare_III_cover.jpg/220px-Call_of_Duty_Modern_Warfare_III_cover.jpg" alt="Call of Duty"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-white">Call of Duty: Modern Warfare III</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">PC</span> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">PS5</span> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-600 text-white">Xbox</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">November 10, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Sledgehammer Games</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">FPS</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-900/50 to-purple-900/50 py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">Stay Updated With Gaming News</h2> |
|
|
<p class="text-gray-300 mb-8">Subscribe to our newsletter and never miss the latest gaming news, reviews, and exclusive content.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">Subscribe</button> |
|
|
</div> |
|
|
<p class="text-xs text-gray-400 mt-3">We respect your privacy. Unsubscribe at any time.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-slate-900 border-t border-slate-800"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<a href="#" class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-gamepad text-blue-500 text-2xl"></i> |
|
|
<span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">GamePulse</span> |
|
|
</a> |
|
|
<p class="text-gray-400 text-sm">Your premier destination for the latest in gaming news, reviews, and community.</p> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-discord"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">Categories</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">News</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Reviews</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Guides</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Esports</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Indie Games</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Hardware</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">Platforms</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">PC</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">PlayStation 5</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Xbox Series X/S</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Nintendo Switch</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Mobile</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">VR</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Contact</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Advertise</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Careers</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 GamePulse. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-blue-400 text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-500 hover:text-blue-400 text-sm">Terms of Service</a> |
|
|
<a href="#" class="text-gray-500 hover:text-blue-400 text-sm">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
|
|
|
|
|
|
const icon = this.querySelector('i'); |
|
|
if (menu.classList.contains('hidden')) { |
|
|
icon.classList.remove('fa-times'); |
|
|
icon.classList.add('fa-bars'); |
|
|
} else { |
|
|
icon.classList.remove('fa-bars'); |
|
|
icon.classList.add('fa-times'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.createElement('button'); |
|
|
darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>'; |
|
|
darkModeToggle.className = 'fixed bottom-6 right-6 bg-slate-800 w-12 h-12 rounded-full shadow-lg flex items-center justify-center text-xl hover:bg-slate-700 transition z-50'; |
|
|
document.body.appendChild(darkModeToggle); |
|
|
|
|
|
darkModeToggle.addEventListener('click', function() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
const icon = this.querySelector('i'); |
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
icon.classList.remove('fa-moon'); |
|
|
icon.classList.add('fa-sun'); |
|
|
} else { |
|
|
icon.classList.remove('fa-sun'); |
|
|
icon.classList.add('fa-moon'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) { |
|
|
|
|
|
console.log('Load more content...'); |
|
|
} |
|
|
}); |
|
|
</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=Laayal/polycode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
