Gemini
Criar Site para Força Tática Virtual
Conversa com o Gemini
estou usanddo hostgator quero criar um site para minha companhia de força tática virtual.

Criar um site para o seu clã ou grupo de Força Tática Virtual (seja para jogos como GTA V/MTA, Roblox, FiveM, Arma 3, etc.) é uma ótima ideia para organizar a equipe, postar avisos e receber inscrições de novos membros.

Como você já está dentro do gerenciador de arquivos da HostGator (na pasta correta, que é a public_html), você tem o caminho livre para começar.

Aqui estão as duas melhores opções para criar o seu site a partir daí:

Opção 1: Usar o WordPress (Altamente Recomendado)
O WordPress é a forma mais fácil e profissional. Ele possui milhares de temas gratuitos voltados para jogos e comunidades, além de plugins para formulários de recrutamento.

Em vez de mexer direto no gerenciador de arquivos, você pode instalá-lo automaticamente pelo painel da HostGator:

Acesse o Painel cPanel da HostGator (a aba anterior à que você está agora).

Desça a página até a categoria Softaculous Apps Installer ou pesquise por WordPress.

Clique no ícone do WordPress e depois em Instalar Instante / Install Now.

Configure os detalhes:

Diretório: Deixe em branco para que o site fique direto no seu domínio principal.

Nome/Descrição do Site: Coloque o nome da sua Força Tática Virtual.

Usuário e Senha de Administrador: Crie dados seguros para você logar no painel do site.

Clique em Instalar no final da página.

Pronto! O instalador vai colocar todos os arquivos necessários na sua pasta public_html automaticamente. Para editar o site, basta acessar seudominio.com/wp-admin.

Opção 2: Criar ou Enviar um Site Próprio em HTML/CSS
Se você já tem os arquivos de um site pronto (ou comprou/baixou um template de site tático/gamer), você deve enviá-lo diretamente por essa tela que você me mostrou.

No menu superior da imagem, clique no botão Carregar (ícone de uma seta para cima).

Selecione o arquivo .zip que contém o seu site ou os arquivos soltos.

Se enviar em .zip, clique com o botão direito sobre o arquivo enviado dentro do gerenciador e selecione Extrair.

Regra importante: O arquivo principal da sua página inicial obrigatoriamente deve se chamar index.html ou index.php e estar solto dentro da pasta public_html (não pode ficar escondido dentro de outra subpasta).

O que um bom site de Força Tática Virtual precisa ter?
Independentemente da opção que escolher, tente estruturar o site com:

Página Inicial: Uma apresentação impactante, com fotos ou artes da sua equipe virtual e a missão do grupo.

História/Sobre nós: Explicando as regras, a hierarquia (patentes) e quais jogos vocês atuam.

Alistamento / Recrutamento: Um formulário simples (pode usar o WPForms no WordPress ou um link do Google Forms) para novos membros se candidatarem.

Galeria: Fotos e vídeos de operações, treinamentos e patrulhas virtuais que vocês realizaram.

Se precisar de ajuda para instalar o WordPress ou quiser dicas de temas voltados para esse estilo militar/gamer, é só me dar o comando!

QUERO QUE FAÇA UM HTML

Aqui tem um modelo completo, moderno e profissional de uma Landing Page (Página Única) feito em HTML e CSS.

Este código foi desenhado especificamente para um grupo tático/militar virtual. Ele já inclui um visual escuro operacional (tons de cinza e verde-oliva), uma seção com as diretrizes do grupo, um quadro para exibir as patentes e um formulário funcional para recrutamento/alistamento de novos membros.

O seu ficheiro pronto para download:
Ícone do app HTML
 index 
HTML
Como colocar este site no ar através da HostGator (Passo a Passo)
Como você já está na pasta correta (public_html) na imagem que me enviou, siga estes passos para aplicar este código:

Baixe o arquivo index.html gerado aqui acima para o seu computador.

Na barra superior do seu Gerenciador de Arquivos da HostGator, clique no botão Carregar (ícone com uma seta para cima).

Selecione o ficheiro index.html que descarregou e envie-o.

Pronto! Ao aceder ao seu domínio principal (ex: seudominio.com), o site tático já vai aparecer online de forma imediata.

Caso queira copiar o código diretamente para editar:
Se preferir criar o arquivo manualmente clicando em "+ Arquivo" no seu painel com o nome index.html, o código completo é este:

HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Força Tática Virtual - Alistamento e Operações</title>
    <style>
        /* Reset & Estilos Base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #0b0f12;
            color: #e0e6ed;
            line-height: 1.6;
        }

        /* Cores Temáticas Militar/Tático */
        :root {
            --primary: #1e3a27; /* Verde Oliva Escuro */
            --accent: #4e8a5f;  /* Verde Operacional */
            --highlight: #d4a373; /* Tom Dourado/Militar para Patentes */
            --dark-bg: #11161a;
            --card-bg: #1a2229;
            --text-light: #f1f5f9;
            --text-muted: #94a3b8;
        }

        /* Menu de Navegação */
        header {
            background-color: rgba(17, 22, 26, 0.95);
            border-bottom: 3px solid var(--primary);
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            font-weight: 800;
            font-size: 20px;
            letter-spacing: 2px;
            color: var(--text-light);
            text-transform: uppercase;
        }

        .logo span {
            color: var(--highlight);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        nav a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
            transition: color 0.3s ease;
        }

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

        /* Seção Principal (Hero) */
        .hero {
            margin-top: 60px;
            padding: 120px 20px 80px 20px;
            text-align: center;
            background: linear-gradient(180deg, rgba(30, 58, 39, 0.4) 0%, rgba(11, 15, 18, 1) 100%), 
                        url('https://images.unsplash.com/photo-1579803887192-349c2834b6f1?q=80&w=1200') no-repeat center center/cover;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 42px;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 20px;
            color: var(--text-light);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .hero p {
            font-size: 18px;
            color: var(--text-muted);
            margin-bottom: 40px;
        }

        .btn {
            display: inline-block;
            background-color: var(--primary);
            color: var(--text-light);
            padding: 12px 30px;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 4px;
            border: 2px solid var(--accent);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn:hover {
            background-color: var(--accent);
            box-shadow: 0 0 15px rgba(78, 138, 95, 0.5);
            transform: translateY(-2px);
        }

        /* Container de Conteúdo */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        section {
            padding: 40px 0;
            scroll-margin-top: 80px;
        }

        .section-title {
            font-size: 28px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
            color: var(--text-light);
        }

        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background-color: var(--highlight);
            margin: 10px auto 0 auto;
        }

        /* Diretrizes / Cards */
        .about-card {
            background-color: var(--card-bg);
            border-left: 4px solid var(--accent);
            padding: 25px;
            margin-bottom: 20px;
            border-radius: 0 8px 8px 0;
        }

        .about-card h3 {
            color: var(--highlight);
            margin-bottom: 10px;
            text-transform: uppercase;
            font-size: 18px;
        }

        /* Patentes (Grid) */
        .ranks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .rank-card {
            background-color: var(--card-bg);
            padding: 20px;
            text-align: center;
            border-radius: 6px;
            border: 1px solid #24313c;
            transition: border-color 0.3s;
        }

        .rank-card:hover {
            border-color: var(--highlight);
        }

        .rank-badge {
            width: 60px;
            height: 60px;
            background-color: var(--primary);
            border-radius: 50%;
            margin: 0 auto 15px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--highlight);
            border: 2px solid var(--accent);
        }

        /* Formulário */
        .form-container {
            background-color: var(--card-bg);
            max-width: 700px;
            margin: 0 auto;
            padding: 40px;
            border-radius: 8px;
            border: 1px solid #24313c;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            text-transform: uppercase;
            margin-bottom: 8px;
            color: var(--text-light);
        }

        .form-control {
            width: 100%;
            padding: 12px;
            background-color: var(--dark-bg);
            border: 1px solid #24313c;
            color: var(--text-light);
            border-radius: 4px;
            font-size: 15px;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--accent);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 100px;
        }

        .form-note {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 5px;
        }

        /* Rodapé */
        footer {
            background-color: var(--dark-bg);
            text-align: center;
            padding: 30px 20px;
            border-top: 1px solid #1a2229;
            font-size: 13px;
            color: var(--text-muted);
        }

        footer span {
            color: var(--highlight);
        }

        @media (max-width: 768px) {
            .nav-container { flex-direction: column; gap: 15px; }
            .hero h1 { font-size: 30px; }
            .form-container { padding: 20px; }
        }
    </style>
</head>
<body>

    <header>
        <div class="nav-container">
            <div class="logo">
                ⚡ FORÇA TÁTICA <span>VIRTUAL</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#inicio">Início</a></li>
                    <li><a href="#sobre">Diretrizes</a></li>
                    <li><a href="#patentes">Patentes</a></li>
                    <li><a href="#alistamento">Alistamento</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="inicio" class="hero">
        <div class="hero-content">
            <h1>Disciplina, Honra e Operacionalidade</h1>
            <p>Unidade de elite virtual dedicada a simulações táticas de alta fidelidade, coordenação de patrulhas e operações especiais organizadas.</p>
            <a href="#alistamento" class="btn">Alistar-se Agora</a>
        </div>
    </section>

    <div class="container">

        <section id="sobre">
            <h2 class="section-title">Nossas Diretrizes</h2>
            <div class="about-card">
                <h3>01. Missão da Unidade</h3>
                <p>Garantir o mais alto nível de realismo e simulação em patrulhamentos virtuais, agindo com precisão técnica, respeito aos comandos hierárquicos e foco absoluto no cumprimento dos objetivos da corporação.</p>
            </div>
            <div class="about-card">
                <h3>02. Conduta Operacional</h3>
                <p>Não toleramos comportamentos tóxicos, desrespeito entre membros ou quebra de protocolo durante as operações oficiais. A seriedade e o companheirismo são os pilares do nosso clã.</p>
            </div>
            <div class="about-card">
                <h3>03. Treinamento e Instrução</h3>
                <p>Todos os recém-alistados passam pelo Curso de Formação de Soldados (CFS) virtual, onde aprendem códigos de rádio, formações de combate urbano e abordagem padrão.</p>
            </div>
        </section>

        <section id="patentes">
            <h2 class="section-title">Quadro de Patentes</h2>
            <div class="ranks-grid">
                <div class="rank-card">
                    <div class="rank-badge">CMD</div>
                    <h3>Comando Geral</h3>
                    <p>Responsável pelas diretrizes, alianças e administração geral da Força Tática.</p>
                </div>
                <div class="rank-card">
                    <div class="rank-badge">TEN</div>
                    <h3>Tenente / Oficial</h3>
                    <p>Líder de operações em campo e responsável pelas táticas e estratégias em combate.</p>
                </div>
                <div class="rank-card">
                    <div class="rank-badge">SGT</div>
                    <h3>Sargento / Instrutor</h3>
                    <p>Fiscaliza a tropa, ministra os treinamentos táticos e auxilia na coordenação.</p>
                </div>
                <div class="rank-card">
                    <div class="rank-badge">SD</div>
                    <h3>Soldado</h3>
                    <p>A força operacional em campo, responsável pelo cumprimento ágil das ordens.</p>
                </div>
            </div>
        </section>

        <section id="alistamento">
            <h2 class="section-title">Formulário de Alistamento</h2>
            <div class="form-container">
                <form action="#" method="POST" onsubmit="alert('Candidatura enviada! (Integre este formulário com o Discord ou banco de dados posteriormente).'); return false;">
                    
                    <div class="form-group">
                        <label for="nome">Nome / Nickname Virtual:</label>
                        <input type="text" id="nome" name="nome" class="form-control" placeholder="Ex: Sd_Silva ou Major_Caveira" required>
                    </div>

                    <div class="form-group">
                        <label for="idade">Idade Real:</label>
                        <input type="number" id="idade" name="idade" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="discord">Discord ID / Usuário:</label>
                        <input type="text" id="discord" name="discord" class="form-control" placeholder="Ex: seunomeusuario" required>
                    </div>

                    <div class="form-group">
                        <label for="experiencia">Possui experiência militar/policial em jogos?</label>
                        <select id="experiencia" name="experiencia" class="form-control" required>
                            <option value="">Selecione...</option>
                            <option value="sim">Sim, já participei de outros grupos</option>
                            <option value="nao">Não, esta será minha primeira vez</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="motivo">Por que quer entrar na Força Tática?</label>
                        <textarea id="motivo" name="motivo" class="form-control" placeholder="Explique suas motivações..."></textarea>
                    </div>

                    <div style="text-align: center; margin-top: 30px;">
                        <button type="submit" class="btn">Enviar Candidatura</button>
                    </div>
                </form>
            </div>
        </section>

    </div>

    <footer>
        <p>&copy; 2026 <span>Força Tática Virtual</span>. Todos os direitos reservados.</p>
    </footer>

</body>
</html>
Dica extra: Pode alterar livremente os textos de descrição e os nomes das patentes dentro do código para condizer exatamente com a estrutura do seu jogo ou simulação!





O Gemini não é humano. Ele pode cometer erros. Por isso, é bom checar as respostas.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Força Tática Virtual - Alistamento e Operações</title>
    <style>
        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #0b0f12;
            color: #e0e6ed;
            line-height: 1.6;
        }

        /* Cores Temáticas Militar/Tático */
        :root {
            --primary: #1e3a27; /* Verde Oliva Escuro */
            --accent: #4e8a5f;  /* Verde Operacional */
            --highlight: #d4a373; /* Tom Dourado/Militar para Patentes */
            --dark-bg: #11161a;
            --card-bg: #1a2229;
            --text-light: #f1f5f9;
            --text-muted: #94a3b8;
        }

        /* Header & Navigation */
        header {
            background-color: rgba(17, 22, 26, 0.95);
            border-bottom: 3px solid var(--primary);
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            font-weight: 800;
            font-size: 20px;
            letter-spacing: 2px;
            color: var(--text-light);
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo span {
            color: var(--highlight);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        nav a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
            transition: color 0.3s ease;
        }

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

        /* Hero Section */
        .hero {
            margin-top: 60px;
            padding: 120px 20px 80px 20px;
            text-align: center;
            background: linear-gradient(180deg, rgba(30, 58, 39, 0.4) 0%, rgba(11, 15, 18, 1) 100%), 
                        url('https://images.unsplash.com/photo-1579803887192-349c2834b6f1?q=80&w=1200') no-repeat center center/cover;
            /* Nota: Imagem genérica escura de fundo simula ambiente tático/computador */
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 42px;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 20px;
            color: var(--text-light);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .hero p {
            font-size: 18px;
            color: var(--text-muted);
            margin-bottom: 40px;
        }

        .btn {
            display: inline-block;
            background-color: var(--primary);
            color: var(--text-light);
            padding: 12px 30px;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 4px;
            border: 2px solid var(--accent);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn:hover {
            background-color: var(--accent);
            box-shadow: 0 0 15px rgba(78, 138, 95, 0.5);
            transform: translateY(-2px);
        }

        /* Main Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        section {
            padding: 40px 0;
            scroll-margin-top: 80px;
        }

        .section-title {
            font-size: 28px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
            color: var(--text-light);
        }

        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background-color: var(--highlight);
            margin: 10px auto 0 auto;
        }

        /* Sobre / Missão */
        .about-grid {
            display: block; /* Weasyprint template compatible block structure */
            margin-bottom: 30px;
        }

        .about-card {
            background-color: var(--card-bg);
            border-left: 4px solid var(--accent);
            padding: 25px;
            margin-bottom: 20px;
            border-radius: 0 8px 8px 0;
        }

        .about-card h3 {
            color: var(--highlight);
            margin-bottom: 10px;
            text-transform: uppercase;
            font-size: 18px;
        }

        /* Hierarquia / Patentes */
        .ranks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        /* Fallback for standard display if layout engine needs compatibility */
        .rank-card {
            background-color: var(--card-bg);
            padding: 20px;
            text-align: center;
            border-radius: 6px;
            border: 1px solid #24313c;
            transition: transform 0.3s;
        }

        .rank-card:hover {
            border-color: var(--highlight);
        }

        .rank-badge {
            width: 60px;
            height: 60px;
            background-color: var(--primary);
            border-radius: 50%;
            margin: 0 auto 15px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--highlight);
            border: 2px solid var(--accent);
        }

        .rank-card h3 {
            font-size: 16px;
            text-transform: uppercase;
            color: var(--text-light);
            margin-bottom: 5px;
        }

        .rank-card p {
            font-size: 13px;
            color: var(--text-muted);
        }

        /* Formulário de Alistamento */
        .form-container {
            background-color: var(--card-bg);
            max-width: 700px;
            margin: 0 auto;
            padding: 40px;
            border-radius: 8px;
            border: 1px solid #24313c;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            text-transform: uppercase;
            margin-bottom: 8px;
            color: var(--text-light);
            letter-spacing: 1px;
        }

        .form-control {
            width: 100%;
            padding: 12px;
            background-color: var(--dark-bg);
            border: 1px solid #24313c;
            color: var(--text-light);
            border-radius: 4px;
            font-size: 15px;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--accent);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 100px;
        }

        .form-note {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 5px;
        }

        /* Footer */
        footer {
            background-color: var(--dark-bg);
            text-align: center;
            padding: 30px 20px;
            border-top: 1px solid #1a2229;
            font-size: 13px;
            color: var(--text-muted);
            letter-spacing: 0.5px;
        }

        footer span {
            color: var(--highlight);
        }

        /* Responsividade Básica para Grid */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                gap: 15px;
            }
            .hero h1 {
                font-size: 30px;
            }
            .form-container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>

    <!-- BARRA DE NAVEGAÇÃO -->
    <header>
        <div class="nav-container">
            <div class="logo">
                ⚡ FORÇA TÁTICA <span>VIRTUAL</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#inicio">Início</a></li>
                    <li><a href="#sobre">Diretrizes</a></li>
                    <li><a href="#patentes">Patentes</a></li>
                    <li><a href="#alistamento">Alistamento</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- SEÇÃO HERO (BOAS-VINDAS) -->
    <section id="inicio" class="hero">
        <div class="hero-content">
            <h1>Disciplina, Honra e Operacionalidade</h1>
            <p>Unidade de elite virtual dedicada a simulações táticas de alta fidelidade, coordenação de patrulhas e operações especiais organizadas.</p>
            <a href="#alistamento" class="btn">Alistar-se Agora</a>
        </div>
    </section>

    <!-- CONTEÚDO PRINCIPAL -->
    <div class="container">

        <!-- SEÇÃO SOBRE / DIRETRIZES -->
        <section id="sobre">
            <h2 class="section-title">Nossas Diretrizes</h2>
            <div class="about-grid">
                <div class="about-card">
                    <h3>01. Missão da Unidade</h3>
                    <p>Garantir o mais alto nível de realismo e simulação em patrulhamentos virtuais, agindo com precisão técnica, respeito aos comandos hierárquicos e foco absoluto no cumprimento dos objetivos da corporação.</p>
                </div>
                <div class="about-card">
                    <h3>02. Conduta Operacional</h3>
                    <p>Não toleramos comportamentos tóxicos, desrespeito entre membros ou quebra de protocolo durante as operações oficiais. A seriedade e o companheirismo em ambiente virtual são os pilares do nosso clã.</p>
                </div>
                <div class="about-card">
                    <h3>03. Treinamento e Instrução</h3>
                    <p>Todos os recém-alistados passam pelo Curso de Formação de Soldados (CFS) virtual, onde aprendem códigos de rádio (QAP, QSL, QRV), formações de combate urbano e abordagem tática padrão.</p>
                </div>
            </div>
        </section>

        <!-- SEÇÃO HIERARQUIA / PATENTES -->
        <section id="patentes">
            <h2 class="section-title">Quadro de Patentes</h2>
            <div class="ranks-grid">
                <div class="rank-card">
                    <div class="rank-badge">CMD</div>
                    <h3>Comando Geral</h3>
                    <p>Responsável pelas diretrizes, alianças e administração geral da Força Tática.</p>
                </div>
                <div class="rank-card">
                    <div class="rank-badge">TEN</div>
                    <h3>Tenente / Oficial</h3>
                    <p>Líder de operações em campo e responsável pelas táticas e estratégias em combate.</p>
                </div>
                <div class="rank-card">
                    <div class="rank-badge">SGT</div>
                    <h3>Sargento / Instrutor</h3>
                    <p>Fiscaliza a tropa, ministra os treinamentos táticos e auxilia na coordenação.</p>
                </div>
                <div class="rank-card">
                    <div class="rank-badge">SD</div>
                    <h3>Soldado</h3>
                    <p>A força operacional em campo, responsável pelo cumprimento ágil das ordens.</p>
                </div>
            </div>
        </section>

        <!-- SEÇÃO FORMULÁRIO DE RECRUTAMENTO -->
        <section id="alistamento">
            <h2 class="section-title">Formulário de Alistamento</h2>
            <div class="form-container">
                <!-- Como é um template estático, o formulário está pronto para receber ação posterior -->
                <form action="#" method="POST" onsubmit="alert('Inscrição simulada com sucesso! Conecte este formulário a um serviço ou banco de dados no seu servidor.'); return false;">
                    
                    <div class="form-group">
                        <label for="nome">Nome / Nickname Virtual:</label>
                        <input type="text" id="nome" name="nome" class="form-control" placeholder="Ex: Sd_Silva ou Major_Caveira" required>
                    </div>

                    <div class="form-group">
                        <label for="idade">Idade:</label>
                        <input type="number" id="idade" name="idade" class="form-control" placeholder="Sua idade real" required>
                    </div>

                    <div class="form-group">
                        <label for="discord">Discord ID / Tag:</label>
                        <input type="text" id="discord" name="discord" class="form-control" placeholder="Ex: nomeusuario#0000 ou nomeusuario" required>
                    </div>

                    <div class="form-group">
                        <label for="experiencia">Possui experiência em Clãs ou Grupos Militares Virtuais?</label>
                        <select id="experiencia" name="experiencia" class="form-control" required>
                            <option value="">Selecione uma opção...</option>
                            <option value="sim">Sim, já participei de outras corporações</option>
                            <option value="nao">Não, esta será minha primeira experiência</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="motivo">Por que você deseja se juntar à nossa Força Tática?</label>
                        <textarea id="motivo" name="motivo" class="form-control" placeholder="Explique brevemente as suas motivações para entrar no grupo..."></textarea>
                        <div class="form-note">A sua resposta será avaliada pelo Comando Geral durante a triagem.</div>
                    </div>

                    <div style="text-align: center; margin-top: 30px;">
                        <button type="submit" class="btn">Enviar Candidatura</button>
                    </div>

                </form>
            </div>
        </section>

    </div>

    <!-- RODAPÉ DO SITE -->
    <footer>
        <p>&copy; 2026 <span>Força Tática Virtual</span>. Todos os direitos reservados.</p>
        <p style="font-size: 11px; margin-top: 5px; color: #576574;">Desenvolvido para Simulação e Entretenimento Tático.</p>
    </footer>

</body>
</html>
index.html
Exibindo index.html.