Comparaison de la mise en page HTML de Roblox et Fortnite

626 k1830947

Ouvrir dans l'éditeur Publiez votre code

Comparaison de la mise en page HTML de Roblox et Fortnite

Recommandé

5 June 2025

Un code par sofiane.blida09

24 June 2025

Modèle HTML pour agence numérique | Tailwind CSS

3 October 2025

Extrait d'animation de chargement 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 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