Comparaison de la mise en page HTML de Roblox et Fortnite

63 k1830947

Ouvrir dans l'éditeur Publiez votre code

Comparaison de la mise en page HTML de Roblox et Fortnite

Recommandé

31 March 2024

Carrousel de cartes JavaScript

7 May 2025

Un code de Developer7

30 November 2025

Je ne sais pas encore.

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