Geometry Lite PC : Jouer en ligne - Modèle de jeu HTML

150 muthavan000

Ouvrir dans l'éditeur Video Publiez votre code

Geometry Lite PC : Jouer en ligne - Modèle de jeu HTML

Recommandé

24 September 2025

Code graphique interactif SVG Dragon

10 July 2025

Exemple d'écran de chargement animé CSS HTML

19 November 2025

Formulaire d'inscription HTML animé avec style CSS

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>

Recommandé

Code graphique interactif SVG Dragon

Exemple d'écran de chargement animé CSS HTML

Formulaire d'inscription HTML animé avec style CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS