Modèle HTML de page d'accueil Roblox

609 jb557134

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 May 2025

Un code de Mete

18 May 2025

Un code par youssefdahroug2005

20 June 2025

Métavers déconstruit

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roblox - Powering Imagination</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f2f4f5;
            color: #393b3d;
        }

header {
            background-color: #000;
            color: white;
            padding: 15px 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

.logo {
            font-size: 24px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }

.hero h1 {
            font-size: 48px;
            margin-bottom: 10px;
        }

.btn-play {
            background-color: #00b06f;
            color: white;
            padding: 15px 40px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            font-size: 18px;
            transition: background 0.3s;
        }

.btn-play:hover {
            background-color: #008a57;
        }

.container {
            max-width: 1000px;
            margin: 40px auto;
            padding: 0 20px;
        }

.grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

.card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

.card h3 {
            color: #e2231a;
            margin-top: 0;
        }

footer {
            text-align: center;
            padding: 40px;
            background-color: #232527;
            color: #adb0b1;
            margin-top: 50px;
        }
    </style>
</head>
<body>

<header>
        <div class="logo">ROBLOX</div>
        <nav>
            <small>Discover | Avatar Shop | Create | Robux</small>
        </nav>
    </header>

<section class="hero">
        <h1>Powering Imagination</h1>
        <p>The ultimate virtual universe where you can create, share experiences, and be anything you can imagine.</p>
        <a href="#" class="btn-play">Play Now</a>
    </section>

<div class="container">
        <div class="grid">
            <div class="card">
                <h3>Millions of Worlds</h3>
                <p>Explore an infinite variety of immersive experiences created by a global community. Whether it's an epic RPG or a competitive racing game, there's always something new.</p>
            </div>
            <div class="card">
                <h3>Create Anything</h3>
                <p>Use the free Roblox Studio to build your own games. Roblox's proprietary engine allows you to code in Lua and publish to mobile, console, and PC instantly.</p>
            </div>
            <div class="card">
                <h3>Socialize</h3>
                <p>Hang out with friends using chat features, private servers, and community groups. Customize your avatar with thousands of different hats, shirts, and gear.</p>
            </div>
        </div>
    </div>

<footer>
        <p>© 2023 Roblox Corporation. Roblox, the Roblox logo and Powering Imagination are among our registered and unregistered trademarks.</p>
    </footer>

</body>
</html>

CSS