Exemple de page d'accueil HTML pour War Thunder Mobile

443 9009382

Ouvrir dans l'éditeur Publiez votre code

Exemple de page d'accueil HTML pour War Thunder Mobile

Recommandé

15 October 2025

Barre latérale Glassmorphism HTML CSS Style Apple

15 October 2025

Animation de chargement CSS Structure HTML

4 February 2026

Five Nights at Candy's 1 Jeu HTML5

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>War Thunder Mobile | Combat Reimagined</title>
    <style>
        :root {
            --wt-gold: #f39c12;
            --wt-dark: #121212;
            --wt-gray: #2c3e50;
            --wt-accent: #e74c3c;
        }

body, html {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--wt-dark);
            color: white;
            overflow-x: hidden;
        }

header {
            background: rgba(0, 0, 0, 0.8);
            padding: 15px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-sizing: border-box;
            border-bottom: 2px solid var(--wt-gold);
        }

.logo {
            font-size: 1.5rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--wt-gold);
        }

nav a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            font-size: 0.9rem;
            text-transform: uppercase;
            transition: color 0.3s;
        }

nav a:hover {
            color: var(--wt-gold);
        }

.hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                        url('https://images.unsplash.com/photo-1507646227500-4d389b0012be?auto=format&fit=crop&q=80&w=1920') no-repeat center center/cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 10px;
            text-transform: uppercase;
            text-shadow: 3px 3px 10px rgba(0,0,0,0.8);
        }

.hero p {
            font-size: 1.2rem;
            max-width: 600px;
            margin-bottom: 30px;
            color: #ddd;
        }

.cta-button {
            background: linear-gradient(to bottom, #f1c40f, #d35400);
            color: white;
            padding: 15px 40px;
            font-size: 1.2rem;
            font-weight: bold;
            text-decoration: none;
            border-radius: 5px;
            text-transform: uppercase;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: transform 0.2s, box-shadow 0.2s;
            border: 1px solid #000;
        }

.cta-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
        }

.features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 50px 5%;
            background: #1a1a1a;
        }

.feature-card {
            background: #222;
            padding: 20px;
            border-left: 4px solid var(--wt-gold);
            transition: background 0.3s;
        }

.feature-card:hover {
            background: #2a2a2a;
        }

.feature-card h3 {
            color: var(--wt-gold);
            margin-top: 0;
        }

footer {
            padding: 40px 5%;
            text-align: center;
            background: #0a0a0a;
            font-size: 0.8rem;
            color: #666;
            border-top: 1px solid #222;
        }

@media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            nav { display: none; }
        }
    </style>
</head>
<body>

<header>
        <div class="logo">War Thunder Mobile</div>
        <nav>
            <a href="#">Vehicles</a>
            <a href="#">News</a>
            <a href="#">Wiki</a>
            <a href="#">Support</a>
        </nav>
    </header>

<section class="hero">
        <h1>Greatness on Mobile</h1>
        <p>Experience the legendary WWII and Cold War combat game on your mobile device. Tanks, planes, and ships in one massive battlefield.</p>
        <a href="#" class="cta-button">Download for Free</a>
    </section>

<section class="features">
        <div class="feature-card">
            <h3>Realistic Graphics</h3>
            <p>Stunning visual effects and detailed vehicle models optimized for high-end mobile hardware.</p>
        </div>
        <div class="feature-card">
            <h3>Combined Arms</h3>
            <p>Switch between ground, air, and sea units in a single match for ultimate tactical depth.</p>
        </div>
        <div class="feature-card">
            <h3>Global Servers</h3>
            <p>Join millions of players worldwide in fast-paced, cross-platform competitive matches.</p>
        </div>
    </section>

<footer>
        <p>© 2023 Gaijin Distribution KFT. All rights reserved. All trademarks are the property of their respective owners.</p>
        <p>Available on iOS and Android devices.</p>
    </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>Live HTML Editor</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            font-family: sans-serif;
        }
        .header {
            background: #333;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        textarea {
            flex: 1;
            padding: 15px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
            border: none;
            outline: none;
            background: #1e1e1e;
            color: #d4d4d4;
            resize: none;
        }
        iframe {
            flex: 1;
            border: none;
            background: white;
        }
        .label {
            background: #444;
            color: #ddd;
            padding: 5px 10px;
            font-size: 12px;
            text-transform: uppercase;
        }
    </style>
</head>
<body>

<div class="header">
        <span>HTML Real-Time Editor</span>
        <small>Type in the left pane to see results</small>
    </div>

<div class="container">
        <input id="html-code" placeholder="Write your HTML/CSS/JS here..."<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding-top: 50px; }
    h1 { color: #4CAF50; }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Edit this code to see changes instantly.</p>
</body>
</html>/>
        <iframe id="output"></iframe>
    </div>

function update() {
            const doc = output.contentDocument || output.contentWindow.document;
            doc.open();
            doc.write(editor.value);
            doc.close();
        }

editor.addEventListener('input', update);
        
        // Initial render
        update();
    </script>
</body>
</html>

CSS