Geometry Lite PC: Play Online - HTML Game Template

Open In Editor Video Publish Your Code

<!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>

Geometry Lite PC: Play Online - HTML Game Template

Recommended

Movie Website HTML Template

3D Rotating Login Signup Form HTML CSS

Parking Fury Game HTML Embed Code

HTML

CSS

JS

Recommended

Movie Website HTML Template

3D Rotating Login Signup Form HTML CSS

Parking Fury Game HTML Embed Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS