Ejemplo de página de inicio HTML para War Thunder Mobile

36 9009382

Abrir en el editor Publica tu código

Ejemplo de página de inicio HTML para War Thunder Mobile

Recomendado

14 May 2025

Formulario de inicio de sesión de degradado HTML CSS

24 August 2025

InspireX: Tema web moderno (Tailwind, vídeo, galería)

16 January 2026

FNF Shaggy x Matt Mod HTML5 Juego incrustado

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