index.html

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Um bot que irá moderar e deixar a sua comunidade segura de um jeito fácil">
    <title>Balle Bot - Modere a sua comunidade do Discord</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header class="cabecalho">
        <img class="cabecalho-imagem" src="logo.svg" alt="Logo da Comunidade Ballerini">
        <nav class="cabecalho-menu">
            <a class="cabecalho-menu-item" href="https://discord.com/invite/wagxzStdcR">Comunidade Ballerini</a>
            <a class="cabecalho-menu-item">Tutorial</a>
            <a class="cabecalho-menu-item">Open Source</a>
            <a class="cabecalho-menu-item">Comandos</a>
        </nav>
    </header>

    <main class="conteudo">
        <section class="conteudo-principal">
            <div class="conteudo-principal-escrito">
                <h1 class="conteudo-principal-escrito-titulo">Balle Bot</h1>
                <h2 class="conteudo-principal-escrito-subtitulo">Deixe a sua comunidade segura de um jeito fácil </h2>
                <button class="conteudo-principal-escrito-botao">Me adicione!</button>
            </div>
            <img class="conteudo-principal-imagem" src="ballebot.svg" alt="Imagem da Balle Bot">
        </section>

        <section class="conteudo-secundario">
            <h3 class="conteudo-secundario-titulo">O que ela faz por você?</h3>
            <p class="conteudo-secundario-paragrafo">1. Cria um <strong>sistema de verificação capcha</strong> para novos membros garantirem que não são robôs</p>
            <p class="conteudo-secundario-paragrafo">2. Possui um <strong>sistema de banimento automático</strong> para links suspeitos que forem enviados na comunidade</p>
            <p class="conteudo-secundario-paragrafo">3. <strong>Sistema de avisos e banimento manual</strong>, para pessoas administradoras utilizarem</p>
        </section>
    </main>

    <footer class="rodape">
        <img class="rodape-imagem" src="ballerini.svg">
    </footer>
</body>

</html>