Plantilla HTML de página de destino de Roblox

880 jb557134

Abrir en el editor Publica tu código

Plantilla HTML de página de destino de Roblox

Recomendado

11 June 2025

Un código de alejandrokundrah

7 September 2024

Descubre el mensaje de la carta de amor

18 September 2025

Animación CSS: Efecto de fragmento de memoria fantasma

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