Exemple de page d'accueil HTML pour War Thunder Mobile

593 9009382

Ouvrir dans l'éditeur Publiez votre code

Exemple de page d'accueil HTML pour War Thunder Mobile

Recommandé

22 May 2024

Formulaire de connexion moderne

16 February 2025

Un code de NotYoEA

12 July 2025

Titre collant piloté par défilement

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