| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RetroGame Reviews - Nostalgie Gaming</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=Press+Start+2P&family=VT323&display=swap'); |
| |
| .pixel-font { |
| font-family: 'Press Start 2P', cursive; |
| } |
| |
| .retro-font { |
| font-family: 'VT323', monospace; |
| } |
| |
| .game-card { |
| transition: transform 0.3s, box-shadow 0.3s; |
| background: linear-gradient(145deg, #1a1a2e, #16213e); |
| } |
| |
| .game-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3); |
| } |
| |
| .pixel-border { |
| border: 4px solid #00ffff; |
| box-shadow: 8px 8px 0 rgba(0, 255, 255, 0.2); |
| } |
| |
| .scanlines { |
| position: relative; |
| } |
| |
| .scanlines:after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| to bottom, |
| rgba(0, 0, 0, 0) 50%, |
| rgba(0, 0, 0, 0.2) 51% |
| ); |
| background-size: 100% 4px; |
| pointer-events: none; |
| } |
| |
| .rating-pixel { |
| display: inline-block; |
| width: 16px; |
| height: 16px; |
| margin-right: 2px; |
| background-color: #333; |
| position: relative; |
| } |
| |
| .rating-pixel.filled { |
| background-color: #ff0; |
| } |
| |
| @keyframes flicker { |
| 0% { opacity: 0.8; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.8; } |
| } |
| |
| .flicker { |
| animation: flicker 3s infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white retro-font"> |
| |
| <header class="pixel-border bg-gray-800 mb-8 scanlines"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i class="fas fa-gamepad text-4xl text-cyan-400 mr-3"></i> |
| <h1 class="pixel-font text-3xl md:text-4xl text-cyan-400 flicker">RetroGame<span class="text-white">Reviews</span></h1> |
| </div> |
| <nav class="flex space-x-1 md:space-x-4 text-lg"> |
| <a href="#" class="px-3 py-2 hover:bg-cyan-900 hover:text-cyan-400 rounded transition">Accueil</a> |
| <a href="#" class="px-3 py-2 hover:bg-cyan-900 hover:text-cyan-400 rounded transition">Reviews</a> |
| <a href="#" class="px-3 py-2 hover:bg-cyan-900 hover:text-cyan-400 rounded transition">Top 10</a> |
| <a href="#" class="px-3 py-2 hover:bg-cyan-900 hover:text-cyan-400 rounded transition">À propos</a> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative overflow-hidden mb-12 h-96 flex items-center justify-center scanlines"> |
| <div class="absolute inset-0 bg-gradient-to-r from-cyan-900 to-pur |
| <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=Invader1/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
