Sebilicq/pixelpulse-playground
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>PixelPulse Playground | Ultimate Gaming Hub</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: {18 500: '#9147ff',19 600: '#772ce8'20 },21 secondary: {22 500: '#00b5ad',23 600: '#008f86'24 }25 }26 }27 }28 }29 </script>30</head>31<body class="bg-gray-900 text-gray-100 min-h-screen">32 <custom-navbar></custom-navbar>33 34 <main class="container mx-auto px-4 py-8">35 <!-- Hero Section -->36 <section class="hero bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl p-8 mb-12">37 <div class="flex flex-col md:flex-row items-center">38 <div class="md:w-1/2 mb-8 md:mb-0">39 <h1 class="text-4xl md:text-5xl font-bold mb-4">Welcome to PixelPulse Playground</h1>40 <p class="text-xl mb-6">Your ultimate gaming hub with trending games, esports news, and community features.</p>41 <a href="#trending" class="bg-white text-primary-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-200 inline-block">42 Explore Games43 </a>44 </div>45 <div class="md:w-1/2 flex justify-center">46 <img src="http://static.photos/gaming/640x360/42" alt="Gaming scene" class="rounded-xl shadow-2xl max-w-full h-auto">47 </div>48 </div>49 </section>50 51 <!-- Trending Games -->52 <section id="trending" class="mb-16">53 <h2 class="text-3xl font-bold mb-8 flex items-center">54 <i data-feather="trending-up" class="mr-2"></i> Trending Games55 </h2>56 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">57 <!-- Game cards will be populated by JavaScript -->58 </div>59 </section>60 61 <!-- News Section -->62 <section class="mb-16">63 <h2 class="text-3xl font-bold mb-8 flex items-center">64 <i data-feather="book-open" class="mr-2"></i> Gaming News65 </h2>66 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">67 <!-- News cards will be populated by JavaScript -->68 </div>69 </section>70 71 <!-- Community Spotlight -->72 <section>73 <h2 class="text-3xl font-bold mb-8 flex items-center">74 <i data-feather="users" class="mr-2"></i> Community Spotlight75 </h2>76 <div class="bg-gray-800 rounded-2xl p-8">77 <div class="flex flex-col md:flex-row items-center">78 <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center">79 <img src="http://static.photos/people/320x240/7" alt="Community member" class="rounded-full w-40 h-40 object-cover border-4 border-secondary-500">80 </div>81 <div class="md:w-2/3 md:pl-8">82 <h3 class="text-2xl font-bold mb-2">Featured Streamer</h3>83 <p class="text-secondary-400 font-semibold mb-4">@GameMasterSeb</p>84 <p class="mb-4">"Join me every Friday night for epic gaming marathons and giveaways! This community has been amazing and I can't wait to share more gaming moments with all of you."</p>85 <a href="#" class="text-primary-400 hover:text-primary-300 font-semibold flex items-center">86 View Channel <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>87 </a>88 </div>89 </div>90 </div>91 </section>92 </main>93 94 <custom-footer></custom-footer>95 96 <!-- Components -->97 <script src="components/navbar.js"></script>98 <script src="components/footer.js"></script>99 100 <script src="script.js"></script>101 <script>102 feather.replace();103 </script>104<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>105</body>106</html>