Modèle HTML de jeux débloqués avec prise en charge du plein écran

21 702022949

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de jeux débloqués avec prise en charge du plein écran

Recommandé

2 August 2025

piège du tutoriel

2 March 2024

Formulaire de contact HTML-CSS

30 August 2024

Effet de survol de carte 3D

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus Games | Unblocked</title>
    <style>
        :root {
            --primary: #00ff88;
            --bg: #0f172a;
            --card-bg: #1e293b;
            --text: #f8fafc;
            --accent: #3b82f6;
        }

body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

header {
            width: 100%;
            padding: 2rem 0;
            text-align: center;
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            border-bottom: 3px solid var(--primary);
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

h1 {
            margin: 0;
            font-size: 3rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: var(--primary);
            text-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
        }

.container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

.game-card {
            background: var(--card-bg);
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

.game-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 136, 0.3);
            border-color: var(--primary);
        }

.game-thumb {
            width: 100%;
            height: 180px;
            background: linear-gradient(45deg, #1e293b, #334155);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

.game-info {
            padding: 20px;
            background: var(--card-bg);
        }

.game-info h3 {
            margin: 0;
            font-size: 1.25rem;
            color: #fff;
        }

.game-info p {
            font-size: 0.9rem;
            color: #94a3b8;
            margin-top: 8px;
        }

/* Fullscreen Overlay */
        #game-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.98);
            z-index: 9999;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

#game-frame {
            width: 90%;
            height: 85%;
            border: 2px solid var(--primary);
            border-radius: 10px;
            background: #000;
        }

.controls {
            width: 90%;
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
        }

.btn {
            background: var(--primary);
            color: var(--bg);
            border: none;
            padding: 10px 25px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.2s;
        }

.btn:hover {
            opacity: 0.8;
        }

.close-btn {
            background: #ef4444;
            color: white;
        }
    </style>
</head>
<body>

<header>
    <h1>NEXUS GAMES</h1>
    <p>Premium Unblocked Web Experience</p>
</header>

<div class="container">
    
    <div class="game-card" onclick="launchGame('https://www.google.com/logos/2010/pacman10-i.html')">
        <div class="game-thumb">PAC-MAN</div>
        <div class="game-info">
            <h3>Pac-Man</h3>
            <p>The classic arcade experience, unblocked.</p>
        </div>
    </div>

<div class="game-card" onclick="launchGame('https://playtictactoe.org/')">
        <div class="game-thumb">TIC-TAC-TOE</div>
        <div class="game-info">
            <h3>Tic-Tac-Toe</h3>
            <p>Simple, clean, and impossible to beat.</p>
        </div>
    </div>

<div class="game-card" onclick="launchGame('https://2048game.com/')">
        <div class="game-thumb">2048</div>
        <div class="game-info">
            <h3>2048</h3>
            <p>Join the numbers and get to the 2048 tile!</p>
        </div>
    </div>

<div class="game-card" onclick="launchGame('https://hexgl.bkcore.com/play/')">
        <div class="game-thumb">HEXGL</div>
        <div class="game-info">
            <h3>HexGL</h3>
            <p>Fast-paced futuristic racing game.</p>
        </div>
    </div>
</div>

<div id="game-overlay">
    <div class="controls">
        <button class="btn" onclick="toggleFullscreen()">Fullscreen</button>
        <button class="btn close-btn" onclick="closeGame()">Close Game</button>
    </div>
    <iframe id="game-frame" src="" frameborder="0" allowfullscreen></iframe>
</div>

function launchGame(url) {
        frame.src = url;
        overlay.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

function closeGame() {
        overlay.style.display = 'none';
        frame.src = '';
        document.body.style.overflow = 'auto';
    }

</body>
</html>

CSS