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

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 March 2025

Code HTML du bouton de déconnexion

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>

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

Recommandé

Lampes d'étude

Jeu de Toast Catcher

Code HTML du bouton de déconnexion

HTML

CSS

JS

Recommandé

Lampes d'étude

Jeu de Toast Catcher

Code HTML du bouton de déconnexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS