Plantilla HTML de juegos desbloqueados con soporte para pantalla completa.

316 702022949

Abrir en el editor Publica tu código

Plantilla HTML de juegos desbloqueados con soporte para pantalla completa.

Recomendado

28 May 2025

Un código de alejandrob.f2012

28 May 2025

Un código de Metehan

14 June 2025

Un código de Metehan

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