Modèle HTML pour jeux vidéo : Site web de style cyberpunk

267 USA_Games

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML pour jeux vidéo : Site web de style cyberpunk

Recommandé

28 May 2025

Formulaire de connexion futuriste

28 June 2025

Modèle HTML de page d'erreur 404

27 March 2026

Polytrack Game Loader et proxy de travailleur

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CYBER-REALM | Ultimate Gaming Experience</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #00f2ff;
            --secondary: #7000ff;
            --bg-dark: #050505;
            --card-bg: #111;
            --text: #ffffff;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Rajdhani', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text);
            overflow-x: hidden;
        }

/* Navigation */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 5%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            position: fixed;
            width: 100%;
            z-index: 1000;
            border-bottom: 1px solid rgba(0, 242, 255, 0.2);
        }

.logo {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }

.nav-links a {
            text-decoration: none;
            color: white;
            font-weight: 500;
            transition: 0.3s;
            text-transform: uppercase;
        }

.nav-links a:hover {
            color: var(--primary);
            text-shadow: 0 0 10px var(--primary);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.4)), 
                        url('https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
        }

.hero h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(3rem, 10vw, 6rem);
            margin-bottom: 20px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 15px rgba(0, 242, 255, 0.5));
        }

.hero p {
            font-size: 1.5rem;
            max-width: 600px;
            margin-bottom: 30px;
            color: #ccc;
        }

.btn {
            padding: 15px 40px;
            font-family: 'Orbitron', sans-serif;
            font-size: 1rem;
            text-decoration: none;
            color: white;
            background: transparent;
            border: 2px solid var(--primary);
            position: relative;
            transition: 0.3s;
            overflow: hidden;
            cursor: pointer;
        }

.btn:hover {
            background: var(--primary);
            color: black;
            box-shadow: 0 0 30px var(--primary);
        }

/* Featured Games */
        .section {
            padding: 100px 5%;
        }

.section-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            margin-bottom: 50px;
            text-align: center;
            border-left: 5px solid var(--primary);
            padding-left: 15px;
            display: inline-block;
        }

.grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.card {
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #333;
            transition: 0.4s;
        }

.card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
        }

.card-img {
            width: 100%;
            height: 200px;
            background-color: #222;
            object-fit: cover;
        }

.card-content {
            padding: 20px;
        }

.card-content h3 {
            margin-bottom: 10px;
            color: var(--primary);
        }

/* Stats Section */
        .stats-bar {
            display: flex;
            justify-content: space-around;
            padding: 50px 0;
            background: linear-gradient(90deg, var(--secondary), #220044);
            flex-wrap: wrap;
            gap: 20px;
        }

.stat-item {
            text-align: center;
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            display: block;
        }

/* Footer */
        footer {
            padding: 50px 5%;
            background: #000;
            border-top: 1px solid #222;
            text-align: center;
        }

.socials {
            margin-bottom: 20px;
        }

.socials a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-size: 1.2rem;
        }

.socials a:hover {
            color: var(--primary);
        }

@media (max-width: 768px) {
            .nav-links { display: none; }
        }
    </style>
</head>
<body>

<nav>
        <div class="logo">CYBER-REALM</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Games</a></li>
            <li><a href="#">Tournaments</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Community</a></li>
        </ul>
        <a href="#" class="btn" style="padding: 8px 20px;">Join Now</a>
    </nav>

<header class="hero">
        <h1>UNLEASH THE POWER</h1>
        <p>Join millions of players in the most immersive competitive gaming ecosystem ever created.</p>
        <div class="hero-btns">
            <a href="#" class="btn">PLAY FREE</a>
        </div>
    </header>

<div class="stats-bar">
        <div class="stat-item">
            <span class="stat-number">2.5M+</span>
            <span>Active Players</span>
        </div>
        <div class="stat-item">
            <span class="stat-number">500+</span>
            <span>Tournaments</span>
        </div>
        <div class="stat-item">
            <span class="stat-number">$1.2M</span>
            <span>Prize Pools</span>
        </div>
        <div class="stat-item">
            <span class="stat-number">99.9%</span>
            <span>Server Uptime</span>
        </div>
    </div>

<section class="section">
        <h2 class="section-title">FEATURED REALMS</h2>
        <div class="grid">
            <div class="card">
                <img src="https://images.unsplash.com/photo-1552824236-ad6844635ff2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Game 1" class="card-img">
                <div class="card-content">
                    <h3>Neon Strike</h3>
                    <p>Tactical shooter set in a dystopian 2099. Dominate the streets.</p>
                </div>
            </div>
            <div class="card">
                <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Game 2" class="card-img">
                <div class="card-content">
                    <h3>Void Walker</h3>
                    <p>Explore infinite dimensions in this open-world RPG adventure.</p>
                </div>
            </div>
            <div class="card">
                <img src="https://images.unsplash.com/photo-1542751110-97427bbecf20?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Game 3" class="card-img">
                <div class="card-content">
                    <h3>Velocity X</h3>
                    <p>High-octane racing with weaponized vehicles and gravity physics.</p>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="socials">
            <a href="#">Discord</a>
            <a href="#">Twitter</a>
            <a href="#">Twitch</a>
            <a href="#">YouTube</a>
        </div>
        <p>© 2023 CYBER-REALM ENTERTAINMENT. ALL RIGHTS RESERVED.</p>
    </footer>

CSS