Plantilla HTML de página de destino de Roblox

416 jb557134

Abrir en el editor Publica tu código

Plantilla HTML de página de destino de Roblox

Recomendado

15 December 2023

Juego de Pilas en JavaScript

13 January 2026

HTML de Cyberpunk Form: Efecto de falla, seguimiento ocular

4 September 2025

Fragmento HTML de animación de puerta de habitación CSS

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