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

665 muthavan000

Abrir en el editor Publica tu código

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

Recomendado

6 January 2026

Formulario HTML para crear una cuenta con entrada de búsqueda

23 September 2025

Fragmento HTML de animación de carga CSS

15 August 2024

Un hermoso control deslizante

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