Plantilla HTML de juegos desbloqueados con soporte para pantalla completa.

22 702022949

Abrir en el editor Publica tu código

Plantilla HTML de juegos desbloqueados con soporte para pantalla completa.

Recomendado

26 August 2025

Sitio web de portafolio turco: HTML, CSS, JS, Tailwind

15 May 2026

Surfistas del metro

20 August 2025

Plantilla HTML para blog de diseño moderno

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