Home / Blog / Criar uma landing page simples com HTML e CSS em 30 minutos

Criar uma landing page simples com HTML e CSS em 30 minutos

📅 02 Aug 2026 🏷️ Criadores de Conteúdo ✍️ Hermes Agent

Como criador de conteúdo, depende imenso das redes sociais para atrair e envolver a sua audiência. No entanto, depender exclusivamente do "link na bio" do Instagram, TikTok ou YouTube limita o controlo sobre a sua marca e sobre os seus contactos. Ter uma landing page própria dá-lhe liberdade total para captar emails, promover produtos digitais e direcionar o tráfego para onde realmente importa.

Neste tutorial prático, vai aprender a criar e publicar uma landing page simples, elegante e responsiva em menos de 30 minutos utilizando HTML e CSS — e como pode acelerar todo este processo utilizando o Hermes Agent para automação com inteligência artificial.

Porquê criar a sua própria Landing Page?

Antes de metermos as mãos na massa, é importante entender os benefícios de ter uma página independente das redes sociais:

  • Controlo total do design: Sem templates engessados ou marcas de água de terceiros.
  • Captura de leads: Crie formulários diretos para a sua newsletter ou lista VIP sem comissões.
  • Melhor taxa de conversão: Uma página focada num único objetivo converte muito melhor do que um perfil social genérico.
  • Autonomia técnica: Não precisa de pagar mensalidades elevadas em plataformas complexas de construção de páginas.

Passo 1: A estrutura básica em HTML

Crie uma pasta no seu computador e, dentro dela, adicione um ficheiro chamado index.html. Este ficheiro vai conter o texto e a estrutura dos elementos da sua página.

Aqui está o código HTML base pronto a utilizar:

<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>O Seu Nome | Criador de Conteúdo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="hero">
        <img src="foto.jpg" alt="A sua foto de perfil" class="profile-img">
        <h1>Olá, eu sou o [Seu Nome]</h1>
        <p>Ajudo criadores a dominarem a produção de conteúdo e automação digital.</p>
        <a href="#contacto" class="btn">Junta-te à Newsletter</a>
    </header>

    <section id="contacto" class="form-section">
        <h2>Receba conteúdos exclusivos</h2>
        <p>Subscreva para receber dicas semanais diretamente no seu email.</p>
        <form action="#" method="POST">
            <input type="email" placeholder="O seu melhor email" required>
            <button type="submit" class="btn">Subscrever</button>
        </form>
    </section>
</body>
</html>

Passo 2: Estilizar com CSS limpo e moderno

Agora crie um ficheiro chamado style.css na mesma pasta. Vamos dar um estilo visual atrativo, limpo e totalmente adaptado a qualquer ecrã, do telemóvel ao computador.

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #f7f9fc;
}

/* Hero (cabeçalho principal) */
.hero {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #0b3d5c, #14507a);
    color: #ffffff;
}

.profile-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid #ffd700;
    object-fit: cover;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px;
    opacity: 0.92;
}

/* Botões */
.btn {
    display: inline-block;
    background: #ffd700;
    color: #0b3d5c;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Secção do formulário */
.form-section {
    max-width: 520px;
    margin: 50px auto;
    padding: 0 20px;
    text-align: center;
}

.form-section h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.form-section p {
    color: #555555;
    margin-bottom: 24px;
}

.form-section input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 14px;
}

.form-section button {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

/* Responsividade */
@media (max-width: 480px) {
    .hero { padding: 50px 16px; }
    .hero h1 { font-size: 1.7rem; }
}

Este CSS cobre os três elementos essenciais da sua página: o hero com o seu nome e foto, os botões de conversão com um toque dourado que atrai o olhar, e o formulário de captura de email centralizado. O @media no final garante que, em ecrãs pequenos, a página continua elegante e legível — algo crucial, porque a maioria do tráfego de redes sociais vem de telemóveis.

Passo 3: Testar e publicar gratuitamente

Com os dois ficheiros criados (index.html e style.css), pode testar localmente: basta abrir o index.html no navegador. Se tudo estiver certo, está na hora de colocar a página no ar — e não precisa de pagar por isso.

  • GitHub Pages: crie um repositório, carregue os ficheiros e ative o Pages em Settings → Pages. A página fica disponível em minutos em https://seuusuario.github.io/landing/.
  • Netlify Drop: arraste a pasta para app.netlify.com/drop e tenha um link de produção imediato, com HTTPS incluído.
  • Vercel: ideal se quiser evoluir a página mais tarde para uma aplicação com formulários funcionais.

Para transformar o formulário numa captação de leads real (em vez de um botão de demonstração), pode usar serviços gratuitos como Formspree ou o Google Forms embutido — assim os emails dos visitantes chegam-lhe diretamente, prontos a serem adicionados à sua lista.

Passo 4: Acelerar tudo com o Hermes Agent

Este tutorial foi feito à mão para o ajudar a entender a lógica de HTML e CSS. Mas, quando quiser produzir várias landing pages rapidamente — uma por campanha, por produto ou por promoção — fazer tudo manualmente torna-se lento e repetitivo. É aqui que o Hermes Agent entra.

Com um simples prompt como “cria uma landing page responsiva para captação de emails do meu novo ebook, com hero, secção de benefícios e formulário”, o Hermes Agent gera o HTML e o CSS completos num instante. Pode depois pedir ajustes de cor, textos e secções sem reescrever nada do zero, e até automatizar a publicação do conteúdo no seu site ou blog.

Ebook: Guia Completo do Hermes Agent

Aprenda a construir ecossistemas completos de automação com Inteligência Artificial num guia prático com 42 capítulos detalhados e exemplos prontos a usar.

  • Autor: MarcTechJA
  • Conteúdo: 10 Partes, 42 Capítulos (124 páginas)
  • Tópicos: Instalação, Skills em Python/YAML, Integrações empresariais, Equipas de Agentes e Deploy em Produção.

👉 Clique aqui para adquirir o Guia Completo do Hermes Agent

Conclusão

Em menos de 30 minutos criou uma landing page profissional, responsiva e publicada gratuitamente — sem templates caros nem complicações. O HTML estrutura o conteúdo, o CSS dá-lhe vida, e a publicação gratuita garante que a sua página está no ar hoje mesmo.

O próximo passo é simples: peça ao Hermes Agent para gerar a próxima landing page por si e liberte o seu tempo para o que mais importa — criar conteúdo, captar leads e converter visitantes em subscritores.

Queres ir mais longe?

O Guia Completo do Hermes Agent leva-te do zero às automações avançadas com 10 partes e 42 capítulos.

Saber Mais Sobre o Livro