Comparaison de la mise en page HTML de Roblox et Fortnite

488 k1830947

Ouvrir dans l'éditeur Publiez votre code

Comparaison de la mise en page HTML de Roblox et Fortnite

Recommandé

1 April 2026

GN-Math : Jeux débloqués, recherche, tri et zones de jeu

22 November 2025

Metehan

16 October 2025

Animation de code CSS : sable, erreurs et développement

HTML

<!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>

CSS