Webleb - UI Elements - Roblox vs Fortnite HTML Comparison Layout

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roblox vs Fortnite</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #121212;
            color: white;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        header {
            background: linear-gradient(90deg, #e2231a 50%, #0078d4 50%);
            width: 100%;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        h1 {
            margin: 0;
            font-size: 3rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        .container {
            display: flex;
            justify-content: space-around;
            width: 90%;
            max-width: 1200px;
            margin-top: 50px;
            gap: 20px;
        }
        .card {
            background-color: #1e1e1e;
            border-radius: 15px;
            padding: 20px;
            width: 45%;
            transition: transform 0.3s ease;
            border: 2px solid transparent;
        }
        .roblox {
            border-color: #e2231a;
        }
        .fortnite {
            border-color: #0078d4;
        }
        .card:hover {
            transform: translateY(-10px);
        }
        .card img {
            width: 100%;
            border-radius: 10px;
            height: 200px;
            object-fit: cover;
        }
        .card h2 {
            font-size: 2rem;
            margin: 15px 0;
        }
        .btn {
            display: inline-block;
            padding: 10px 25px;
            border-radius: 5px;
            text-decoration: none;
            color: white;
            font-weight: bold;
            margin-top: 15px;
        }
        .btn-roblox { background-color: #e2231a; }
        .btn-fortnite { background-color: #0078d4; }
        footer {
            margin-top: 50px;
            padding: 20px;
            font-size: 0.9rem;
            color: #888;
        }
    </style>
</head>
<body>

<header>
        <h1>ROBLOX & FORTNITE</h1>
    </header>

<div class="container">
        
        <div class="card roblox">
            <img src="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?auto=format&fit=crop&q=80&w=1000" alt="Roblox Placeholder">
            <h2>Roblox</h2>
            <p>Powering Imagination. Roblox is an ultimate virtual universe that lets you create, share experiences with friends, and be anything you can imagine.</p>
            <ul>
                <li>User-generated content</li>
                <li>LUA Scripting</li>
                <li>Millions of unique worlds</li>
            </ul>
            <a href="#" class="btn btn-roblox">Play Roblox</a>
        </div>

<div class="card fortnite">
            <img src="https://images.unsplash.com/photo-1589241062272-c0a000072dfa?auto=format&fit=crop&q=80&w=1000" alt="Fortnite Placeholder">
            <h2>Fortnite</h2>
            <p>Battle. Build. Create. Fortnite is a world of many experiences. Drop onto the Island and compete to be the last player — or team — standing.</p>
            <ul>
                <li>Battle Royale mode</li>
                <li>Unreal Engine 5 Graphics</li>
                <li>Creative 2.0 (UEFN)</li>
            </ul>
            <a href="#" class="btn btn-fortnite">Play Fortnite</a>
        </div>
    </div>

<footer>
        © 2023 Gaming Universe Hub - Comparing the Giants
    </footer>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Games Portal</title>
    <style>
        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #0f172a;
            color: #f8fafc;
            margin: 0;
            padding: 20px;
        }

header {
            text-align: center;
            padding: 40px 0;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-bottom: 2px solid #38bdf8;
            margin-bottom: 30px;
            border-radius: 0 0 20px 20px;
        }

h1 {
            margin: 0;
            font-size: 2.5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #38bdf8;
            text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
        }

.game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

.game-card {
            background-color: #1e293b;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid #334155;
            position: relative;
        }

.game-card:hover {
            transform: translateY(-10px);
            border-color: #38bdf8;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

.thumbnail {
            width: 100%;
            height: 180px;
            background-color: #334155;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #94a3b8;
            font-size: 1.2rem;
            background-image: linear-gradient(45deg, #1e293b, #334155);
        }

.game-details {
            padding: 20px;
        }

.category {
            font-size: 0.75rem;
            color: #38bdf8;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 8px;
            display: block;
        }

.game-title {
            font-size: 1.4rem;
            margin: 0 0 15px 0;
            color: #f1f5f9;
        }

.play-button {
            display: inline-block;
            width: 100%;
            padding: 12px 0;
            background-color: #38bdf8;
            color: #0f172a;
            text-align: center;
            text-decoration: none;
            font-weight: bold;
            border-radius: 8px;
            transition: background-color 0.2s;
        }

.play-button:hover {
            background-color: #7dd3fc;
        }

.search-bar {
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            display: block;
            padding: 12px 20px;
            border-radius: 25px;
            border: 1px solid #334155;
            background-color: #1e293b;
            color: white;
            font-size: 1rem;
        }
    </style>
</head>
<body>

<header>
        <h1>All Games</h1>
        <input type="text" class="search-bar" placeholder="Search for games...">
    </header>

<div class="container">
        <div class="game-grid">
            
            
            <div class="game-card">
                <div class="thumbnail">ACTION</div>
                <div class="game-details">
                    <span class="category">Shooter</span>
                    <h3 class="game-title">Cyber Strike</h3>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="thumbnail">RACING</div>
                <div class="game-details">
                    <span class="category">Sports</span>
                    <h3 class="game-title">Neon Velocity</h3>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="thumbnail">PUZZLE</div>
                <div class="game-details">
                    <span class="category">Logic</span>
                    <h3 class="game-title">Quantum Cube</h3>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="thumbnail">RPG</div>
                <div class="game-details">
                    <span class="category">Adventure</span>
                    <h3 class="game-title">Shadow Realm</h3>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="thumbnail">ARCADE</div>
                <div class="game-details">
                    <span class="category">Classic</span>
                    <h3 class="game-title">Pixel Jump</h3>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="thumbnail">STRATEGY</div>
                <div class="game-details">
                    <span class="category">Tactical</span>
                    <h3 class="game-title">Galactic Command</h3>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

</div>
    </div>

</body>
</html>

Preview

Open Advanced Editor Full Screen

HTML CSS JS

<header>
        <h1>ROBLOX & FORTNITE</h1>
    </header>

</body>
</html>

.container {
            max-width: 1200px;
            margin: 0 auto;
        }

.game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

.game-card:hover {
            transform: translateY(-10px);
            border-color: #38bdf8;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

.game-details {
            padding: 20px;
        }

.game-title {
            font-size: 1.4rem;
            margin: 0 0 15px 0;
            color: #f1f5f9;
        }

.play-button:hover {
            background-color: #7dd3fc;
        }

<header>
        <h1>All Games</h1>
        <input type="text" class="search-bar" placeholder="Search for games...">
    </header>

</div>
    </div>

</body>
</html>

Preview

Validating your code, please wait...