Geometry Lite para PC: Juega en línea - Plantilla de juego HTML

511 muthavan000

Abrir en el editor Publica tu código

Geometry Lite para PC: Juega en línea - Plantilla de juego HTML

Recomendado

30 July 2025

Plantilla HTML de página de pago de tarjeta Visa

17 November 2023

Inicio de Sesión

10 January 2026

Botón CSS Glassmorphism con animación de brillo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geometry Lite PC | Play Online</title>
    <style>
        :root {
            --bg-color: #0a0a0a;
            --primary-color: #20e3b2;
            --secondary-color: #2d3436;
            --text-color: #ffffff;
            --accent-color: #ff0055;
        }

body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

header {
            width: 100%;
            padding: 20px 0;
            background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
            text-align: center;
            border-bottom: 2px solid var(--primary-color);
            box-shadow: 0 4px 15px rgba(32, 227, 178, 0.2);
        }

h1 {
            margin: 0;
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--primary-color);
            text-shadow: 0 0 10px rgba(32, 227, 178, 0.5);
        }

.game-container {
            width: 90%;
            max-width: 960px;
            aspect-ratio: 16 / 9;
            background-color: #000;
            margin: 40px 0;
            border: 5px solid var(--secondary-color);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
        }

.game-placeholder {
            text-align: center;
        }

.play-button {
            background-color: var(--primary-color);
            color: #000;
            border: none;
            padding: 15px 40px;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 50px;
            transition: transform 0.2s, box-shadow 0.2s;
            text-transform: uppercase;
        }

.play-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px var(--primary-color);
        }

.content-section {
            max-width: 800px;
            padding: 20px;
            line-height: 1.6;
            text-align: center;
        }

.features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

.feature-card {
            background: var(--secondary-color);
            padding: 15px;
            border-radius: 8px;
            border-top: 3px solid var(--accent-color);
        }

footer {
            margin-top: auto;
            padding: 20px;
            font-size: 0.9rem;
            color: #666;
        }

.highlight {
            color: var(--primary-color);
        }
    </style>
</head>
<body>

<header>
        <h1>GEOMETRY LITE PC</h1>
    </header>

<div class="game-container">
        <div class="game-placeholder">
            
            <button class="play-button" onclick="alert('Game Loading...')">Play Now</button>
            <p style="margin-top: 15px; color: #888;">Optimized for Browser & PC</p>
        </div>
    </div>

<main class="content-section">
        <h2>Jump, Fly, and Flip!</h2>
        <p>Welcome to the ultimate <span class="highlight">Geometry Lite PC</span> experience. Push your skills to the limit as you jump, fly and flip your way through dangerous passages and spiky obstacles.</p>
        
        <div class="features">
            <div class="feature-card">
                <h3>Rhythm Based</h3>
                <p>Action-platforming synced to high-energy soundtracks.</p>
            </div>
            <div class="feature-card">
                <h3>Lite Version</h3>
                <p>New levels, achievements, and icons to unlock for free.</p>
            </div>
            <div class="feature-card">
                <h3>PC Controls</h3>
                <p>Use Space, Up Arrow, or Left Click to jump with precision.</p>
            </div>
        </div>
    </main>

</body>
</html>

CSS