Devs & IA

Ferramenta

Templates de landing page prontos para copiar

36 modelos de página em HTML, CSS e JavaScript, sem framework. Abra o teste, confira a versão estreita e baixe um HTML completo. Cada categoria explica o que adaptar e validar. Os layouts não incluem serviços de envio, cadastro ou pagamento; os dados e as marcas apresentados são ilustrativos.

Orbit — SaaS

SaaS

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um software com proposta, funcionalidades e planos em uma página.

Integração e checagens

Substitua as promessas pelo que o produto já entrega. Aponte cadastro e login para o aplicativo; planos visuais não implementam cobrança.

Percorra o caminho do plano até o cadastro, confira os preços e remova métricas e logos que não sejam seus.

Baixar .html

Studio Mono — Portfolio

Portfólio

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar trabalhos selecionados com contexto e um caminho direto para contato.

Integração e checagens

Use projetos próprios, explique sua participação e substitua os links de exemplo pelos estudos de caso. Peça permissão antes de expor material de clientes.

Abra cada projeto e o contato. Confira textos alternativos, recorte das imagens e leitura da grade no celular.

Baixar .html

Lista — Captura de E-mail

Captura de e-mail

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um material ou newsletter e a estrutura de inscrição por e-mail.

Integração e checagens

O formulário não entrega material. Configure um destino real, os campos esperados pelo serviço e o aviso de privacidade. Mantenha o aviso de demonstração até integrar o envio.

Teste e-mail inválido, falha de rede e recebimento real. Só mostre sucesso após a confirmação do serviço; não apague os campos em caso de erro.

Baixar .html

Convoca — Evento Online

Evento

HTML/CSS/JS · layout com conteúdo ilustrativo

Organizar programação, palestrantes e acesso à inscrição de um evento.

Integração e checagens

Atualize local, data, fuso e disponibilidade. A contagem regressiva, quando presente, é demonstrativa; configure uma data fixa. Conecte a inscrição a um serviço real.

Confira horários e links de ingresso. Teste o comportamento após a data do evento e remova a urgência quando as inscrições acabarem.

Baixar .html

Aro — Vitrine de Produto

Produto

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um produto com características, benefícios e chamada para conhecer ou comprar.

Integração e checagens

Use imagens e especificações reais. Troque os contatos fictícios e conecte a ação principal ao canal de venda ou demonstração.

Confira cada afirmação, condição comercial e destino de botão. O layout não implementa pedidos, estoque ou pagamento.

Baixar .html

Base — Agência Digital

Agência

HTML/CSS/JS · layout com conteúdo ilustrativo

Organizar serviços, trabalhos e contato de um estúdio ou agência.

Integração e checagens

Substitua cases e números ilustrativos por trabalhos comprováveis. Caso ainda não tenha depoimentos, retire a seção.

Teste o contato e confira se cada case descreve o problema, sua entrega e os resultados que pode demonstrar.

Baixar .html

Fortes & Lima — Consultoria Jurídica

Consultoria

HTML/CSS/JS · layout com conteúdo ilustrativo

Explicar escopo, método de trabalho e próximo passo de um serviço profissional.

Integração e checagens

Descreva serviços realmente prestados. Troque nomes, credenciais e contatos. O template não implementa agenda nem substitui a revisão das regras da sua profissão.

Teste o contato e as perguntas expansíveis, quando presentes. Não publique promessas de resultado ou qualificações fictícias.

Baixar .html

Rota Dev — Curso Online

Curso online

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar uma formação com programa, formato e caminho para matrícula.

Integração e checagens

Informe carga horária, pré-requisitos, responsável, datas e condições reais. A página não inclui área de alunos, pagamento ou emissão de certificado.

Abra a matrícula em um dispositivo móvel e confira o programa. Substitua depoimentos, números de alunos e preços ilustrativos.

Baixar .html

Rumo — App de Hábitos

App

HTML/CSS/JS · layout com conteúdo ilustrativo

Explicar um aplicativo e orientar o visitante até a instalação.

Integração e checagens

Use capturas reais, plataformas suportadas e links oficiais das lojas. Ilustrações de telas não são um aplicativo funcional.

Abra os links no Android e iOS correspondentes. Não mantenha notas, avaliações ou números de usuários fictícios.

Baixar .html

Clube Forja — Comunidade

Comunidade

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar a proposta, as atividades e as condições de participação de uma comunidade.

Integração e checagens

Defina regras, canais, frequência e responsável. Conecte o convite ou a assinatura; o layout não controla acesso de membros.

Teste o convite e explique o que é gratuito ou pago. Substitua membros, relatos e números de exemplo por dados verificáveis.

Baixar .html

Vela 750 — Produto Único

E-commerce

HTML/CSS/JS · layout com conteúdo ilustrativo

Prototipar uma vitrine e avaliar apresentação, hierarquia de preços e ações de compra.

Integração e checagens

O carrinho, quando presente, apenas demonstra a interface. Integre catálogo, estoque, frete e checkout em uma plataforma de comércio antes de vender.

Teste variantes, indisponibilidade, frete e conclusão do pedido em ambiente de teste. Nunca colete cartões neste HTML.

Baixar .html

Fluxo — SaaS

SaaS

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um software com proposta, funcionalidades e planos em uma página.

Integração e checagens

Substitua as promessas pelo que o produto já entrega. Aponte cadastro e login para o aplicativo; planos visuais não implementam cobrança.

Percorra o caminho do plano até o cadastro, confira os preços e remova métricas e logos que não sejam seus.

Baixar .html

Grade — Portfólio

Portfólio

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar trabalhos selecionados com contexto e um caminho direto para contato.

Integração e checagens

Use projetos próprios, explique sua participação e substitua os links de exemplo pelos estudos de caso. Peça permissão antes de expor material de clientes.

Abra cada projeto e o contato. Confira textos alternativos, recorte das imagens e leitura da grade no celular.

Baixar .html

Isca — Captura de e-mail

Captura de e-mail

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um material ou newsletter e a estrutura de inscrição por e-mail.

Integração e checagens

O formulário não entrega material. Configure um destino real, os campos esperados pelo serviço e o aviso de privacidade. Mantenha o aviso de demonstração até integrar o envio.

Teste e-mail inválido, falha de rede e recebimento real. Só mostre sucesso após a confirmação do serviço; não apague os campos em caso de erro.

Baixar .html

Feira — E-commerce

E-commerce

HTML/CSS/JS · layout com conteúdo ilustrativo

Prototipar uma vitrine e avaliar apresentação, hierarquia de preços e ações de compra.

Integração e checagens

O carrinho, quando presente, apenas demonstra a interface. Integre catálogo, estoque, frete e checkout em uma plataforma de comércio antes de vender.

Teste variantes, indisponibilidade, frete e conclusão do pedido em ambiente de teste. Nunca colete cartões neste HTML.

Baixar .html

Cúpula — Evento Presencial

Evento

HTML/CSS/JS · layout com conteúdo ilustrativo

Organizar programação, palestrantes e acesso à inscrição de um evento.

Integração e checagens

Atualize local, data, fuso e disponibilidade. A contagem regressiva, quando presente, é demonstrativa; configure uma data fixa. Conecte a inscrição a um serviço real.

Confira horários e links de ingresso. Teste o comportamento após a data do evento e remova a urgência quando as inscrições acabarem.

Baixar .html

Pulso — Lançamento de Produto

Produto

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um produto com características, benefícios e chamada para conhecer ou comprar.

Integração e checagens

Use imagens e especificações reais. Troque os contatos fictícios e conecte a ação principal ao canal de venda ou demonstração.

Confira cada afirmação, condição comercial e destino de botão. O layout não implementa pedidos, estoque ou pagamento.

Baixar .html

Coletivo — Agência Criativa

Agência

HTML/CSS/JS · layout com conteúdo ilustrativo

Organizar serviços, trabalhos e contato de um estúdio ou agência.

Integração e checagens

Substitua cases e números ilustrativos por trabalhos comprováveis. Caso ainda não tenha depoimentos, retire a seção.

Teste o contato e confira se cada case descreve o problema, sua entrega e os resultados que pode demonstrar.

Baixar .html

Norte & Cia — Consultoria de Negócios

Consultoria

HTML/CSS/JS · layout com conteúdo ilustrativo

Explicar escopo, método de trabalho e próximo passo de um serviço profissional.

Integração e checagens

Descreva serviços realmente prestados. Troque nomes, credenciais e contatos. O template não implementa agenda nem substitui a revisão das regras da sua profissão.

Teste o contato e as perguntas expansíveis, quando presentes. Não publique promessas de resultado ou qualificações fictícias.

Baixar .html

Turma 7 — Curso Online

Curso online

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar uma formação com programa, formato e caminho para matrícula.

Integração e checagens

Informe carga horária, pré-requisitos, responsável, datas e condições reais. A página não inclui área de alunos, pagamento ou emissão de certificado.

Abra a matrícula em um dispositivo móvel e confira o programa. Substitua depoimentos, números de alunos e preços ilustrativos.

Baixar .html

Bolso — App de Finanças

App

HTML/CSS/JS · layout com conteúdo ilustrativo

Explicar um aplicativo e orientar o visitante até a instalação.

Integração e checagens

Use capturas reais, plataformas suportadas e links oficiais das lojas. Ilustrações de telas não são um aplicativo funcional.

Abra os links no Android e iOS correspondentes. Não mantenha notas, avaliações ou números de usuários fictícios.

Baixar .html

Órbita — Comunidade

Comunidade

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar a proposta, as atividades e as condições de participação de uma comunidade.

Integração e checagens

Defina regras, canais, frequência e responsável. Conecte o convite ou a assinatura; o layout não controla acesso de membros.

Teste o convite e explique o que é gratuito ou pago. Substitua membros, relatos e números de exemplo por dados verificáveis.

Baixar .html

Orbita — SaaS

SaaS

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um software com proposta, funcionalidades e planos em uma página.

Integração e checagens

Substitua as promessas pelo que o produto já entrega. Aponte cadastro e login para o aplicativo; planos visuais não implementam cobrança.

Percorra o caminho do plano até o cadastro, confira os preços e remova métricas e logos que não sejam seus.

Baixar .html

Lucas Mello — Portfolio

Portfólio

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar trabalhos selecionados com contexto e um caminho direto para contato.

Integração e checagens

Use projetos próprios, explique sua participação e substitua os links de exemplo pelos estudos de caso. Peça permissão antes de expor material de clientes.

Abra cada projeto e o contato. Confira textos alternativos, recorte das imagens e leitura da grade no celular.

Baixar .html

Norte Digest — Captura de Email

Captura de e-mail

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um material ou newsletter e a estrutura de inscrição por e-mail.

Integração e checagens

O formulário não entrega material. Configure um destino real, os campos esperados pelo serviço e o aviso de privacidade. Mantenha o aviso de demonstração até integrar o envio.

Teste e-mail inválido, falha de rede e recebimento real. Só mostre sucesso após a confirmação do serviço; não apague os campos em caso de erro.

Baixar .html

Kroma Summit 2026 — Evento

Evento

HTML/CSS/JS · layout com conteúdo ilustrativo

Organizar programação, palestrantes e acesso à inscrição de um evento.

Integração e checagens

Atualize local, data, fuso e disponibilidade. A contagem regressiva, quando presente, é demonstrativa; configure uma data fixa. Conecte a inscrição a um serviço real.

Confira horários e links de ingresso. Teste o comportamento após a data do evento e remova a urgência quando as inscrições acabarem.

Baixar .html

Vela Ergo — Produto

Produto

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um produto com características, benefícios e chamada para conhecer ou comprar.

Integração e checagens

Use imagens e especificações reais. Troque os contatos fictícios e conecte a ação principal ao canal de venda ou demonstração.

Confira cada afirmação, condição comercial e destino de botão. O layout não implementa pedidos, estoque ou pagamento.

Baixar .html

Vanguard Studio — Agencia

Agência

HTML/CSS/JS · layout com conteúdo ilustrativo

Organizar serviços, trabalhos e contato de um estúdio ou agência.

Integração e checagens

Substitua cases e números ilustrativos por trabalhos comprováveis. Caso ainda não tenha depoimentos, retire a seção.

Teste o contato e confira se cada case descreve o problema, sua entrega e os resultados que pode demonstrar.

Baixar .html

Apex Cloud — Consultoria

Consultoria

HTML/CSS/JS · layout com conteúdo ilustrativo

Explicar escopo, método de trabalho e próximo passo de um serviço profissional.

Integração e checagens

Descreva serviços realmente prestados. Troque nomes, credenciais e contatos. O template não implementa agenda nem substitui a revisão das regras da sua profissão.

Teste o contato e as perguntas expansíveis, quando presentes. Não publique promessas de resultado ou qualificações fictícias.

Baixar .html

CodeMaster Pro — Curso Online

Curso online

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar uma formação com programa, formato e caminho para matrícula.

Integração e checagens

Informe carga horária, pré-requisitos, responsável, datas e condições reais. A página não inclui área de alunos, pagamento ou emissão de certificado.

Abra a matrícula em um dispositivo móvel e confira o programa. Substitua depoimentos, números de alunos e preços ilustrativos.

Baixar .html

FinTrack — App

App

HTML/CSS/JS · layout com conteúdo ilustrativo

Explicar um aplicativo e orientar o visitante até a instalação.

Integração e checagens

Use capturas reais, plataformas suportadas e links oficiais das lojas. Ilustrações de telas não são um aplicativo funcional.

Abra os links no Android e iOS correspondentes. Não mantenha notas, avaliações ou números de usuários fictícios.

Baixar .html

Guilda Tech — Comunidade

Comunidade

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar a proposta, as atividades e as condições de participação de uma comunidade.

Integração e checagens

Defina regras, canais, frequência e responsável. Conecte o convite ou a assinatura; o layout não controla acesso de membros.

Teste o convite e explique o que é gratuito ou pago. Substitua membros, relatos e números de exemplo por dados verificáveis.

Baixar .html

Kroma Store — E-commerce

E-commerce

HTML/CSS/JS · layout com conteúdo ilustrativo

Prototipar uma vitrine e avaliar apresentação, hierarquia de preços e ações de compra.

Integração e checagens

O carrinho, quando presente, apenas demonstra a interface. Integre catálogo, estoque, frete e checkout em uma plataforma de comércio antes de vender.

Teste variantes, indisponibilidade, frete e conclusão do pedido em ambiente de teste. Nunca colete cartões neste HTML.

Baixar .html

Margem — Consultoria

Consultoria

HTML/CSS/JS · layout com conteúdo ilustrativo

Explicar escopo, método de trabalho e próximo passo de um serviço profissional.

Integração e checagens

Descreva serviços realmente prestados. Troque nomes, credenciais e contatos. O template não implementa agenda nem substitui a revisão das regras da sua profissão.

Teste o contato e as perguntas expansíveis, quando presentes. Não publique promessas de resultado ou qualificações fictícias.

Baixar .html

Linha de Frente — Curso

Curso online

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar uma formação com programa, formato e caminho para matrícula.

Integração e checagens

Informe carga horária, pré-requisitos, responsável, datas e condições reais. A página não inclui área de alunos, pagamento ou emissão de certificado.

Abra a matrícula em um dispositivo móvel e confira o programa. Substitua depoimentos, números de alunos e preços ilustrativos.

Baixar .html

Norte — Produto SaaS

Produto

HTML/CSS/JS · layout com conteúdo ilustrativo

Apresentar um produto com características, benefícios e chamada para conhecer ou comprar.

Integração e checagens

Use imagens e especificações reais. Troque os contatos fictícios e conecte a ação principal ao canal de venda ou demonstração.

Confira cada afirmação, condição comercial e destino de botão. O layout não implementa pedidos, estoque ou pagamento.

Baixar .html

Por que HTML puro, sem framework

Cada template aqui é uma página completa em HTML, CSS e JavaScript sem nenhuma dependência externa — sem React, sem Bootstrap, sem Tailwind, sem fonte remota, sem biblioteca de ícones. Isso é decisão de projeto, não limitação.

O arquivo baixado abre diretamente no navegador. Para levar o layout ao Next.js ou ao WordPress, adapte a marcação e os eventos à plataforma. Ele não é um template de e-mail: clientes de e-mail têm restrições próprias de CSS e JavaScript.

Tem um segundo motivo, menos óbvio: template sem dependência é legível. Você consegue abrir, entender e mudar sem estudar a documentação de ninguém. Para quem está aprendendo, isso vale mais que qualquer conveniência.

O que fazer nos primeiros quinze minutos

Depois de copiar, existe uma ordem que economiza retrabalho:

  1. Troque o conteúdo antes de mexer no visual. Coloque os seus textos, seus preços, seus nomes reais. Layout se avalia com conteúdo verdadeiro — texto de exemplo esconde problema de quebra de linha e de proporção.
  2. Ajuste a paleta em um lugar só. As cores estão declaradas como variáveis no topo do CSS. Mude ali e a página inteira acompanha; sair caçando cor no meio do arquivo é o caminho para a inconsistência.
  3. Corte o que não usa. Um template traz seções genéricas: depoimento, FAQ, planos, estatísticas. Se você não tem depoimento real, apague a seção — não a preencha com texto inventado. Página menor e verdadeira converte melhor que página longa e vazia.
  4. Confira no celular. Todos são responsivos, mas o seu conteúdo é maior que o do exemplo. Título com o dobro de palavras muda tudo.
  5. Ajuste os metadados. Título da aba, descrição e imagem de compartilhamento. É o que aparece no Google e no WhatsApp — e é o que quase todo mundo esquece.

O que uma landing page precisa ter (e o que só atrapalha)

A estrutura dos templates segue uma lógica que vale explicar, porque ela ajuda na hora de cortar:

  • Uma promessa clara acima da dobra. A pessoa precisa entender o que é, para quem é e o que ganha, sem rolar. Se o seu título precisa de explicação, ele ainda não está pronto.
  • Uma ação principal, repetida. Um único tipo de CTA, aparecendo mais de uma vez ao longo da página. Duas ações concorrentes ("comprar" e "saber mais" com o mesmo peso) dividem a atenção e derrubam as duas.
  • Prova concreta. Número real, caso real, print real. Depoimento genérico sem nome nem foto não convence ninguém e ainda levanta suspeita.
  • Tratamento da objeção. É para isso que serve a seção de FAQ — não para repetir o que já foi dito, mas para responder o que faz a pessoa hesitar: preço, prazo, cancelamento, o que acontece se não gostar.

E o que costuma atrapalhar: carrossel automático (ninguém espera o segundo slide), animação de entrada em cada bloco (atrasa a leitura), formulário com mais campos do que o necessário e vídeo que toca sozinho com som.

Antes de publicar: a checagem que ninguém faz

Cinco itens que separam uma página publicada de uma página pronta:

  • Todos os links funcionam? Inclusive os do rodapé e os das redes sociais. Link para # em produção é o erro mais comum e o mais fácil de evitar.
  • O formulário envia para algum lugar? O HTML do template tem a estrutura visual do formulário, mas o envio depende do serviço que você for usar. Teste com um envio real antes de divulgar.
  • As imagens têm texto alternativo? É acessibilidade e é SEO no mesmo atributo.
  • A página abre rápido em conexão ruim? O template é leve; o que costuma pesar é a imagem que você adicionou. Redimensione antes de subir — foto de 4 MB no topo da página é o maior gargalo de qualquer landing.
  • Tem página de privacidade e contato? Se você coleta qualquer dado, precisa. Não é só formalidade: é exigência de lei e requisito de várias plataformas de anúncio.

Como adaptar sem descaracterizar

Um risco de partir de template é o resultado ficar com cara de template. Três ajustes resolvem quase tudo, e nenhum exige ser designer:

  • Troque a tipografia. É a mudança que mais altera a personalidade da página com menos esforço. Uma fonte diferente já tira a semelhança com qualquer outro site que use a mesma base.
  • Use imagens suas. Foto de banco de imagem é o que mais denuncia. Foto real do produto, da equipe ou do processo — mesmo tecnicamente pior — passa muito mais confiança.
  • Escreva com a sua voz. O texto do template é estrutural, feito para ser substituído. Se você mantiver o tom genérico de exemplo, todo o resto do esforço se perde.

Perguntas frequentes

Posso usar estes templates em projeto comercial ou de cliente?
Pode. São criações originais do Devs & IA, liberadas para uso pessoal e comercial, com ou sem alteração. Não é preciso pedir autorização nem dar crédito — embora um link de volta seja sempre bem-vindo.
Preciso instalar alguma coisa para usar?
Não. Use Baixar .html ou salve o código completo em um arquivo .html e abra no navegador. O arquivo contém viewport para celular e um aviso de demonstração. Antes de publicar, substitua o conteúdo ilustrativo, integre os serviços necessários e remova o aviso e a instrução noindex somente quando a página estiver pronta.
Dá para usar dentro de um projeto React, Next.js ou WordPress?
Sim, e é um uso comum. Em React ou Next.js, você porta o HTML para JSX (as principais diferenças são class virando className e as tags precisarem ser fechadas) e move o CSS para o seu arquivo de estilos. No WordPress, o HTML entra num bloco de código personalizado e o CSS no personalizador do tema.
Os templates são responsivos?
Todos foram construídos para funcionar em celular, tablet e desktop. Vale conferir depois de trocar o conteúdo: títulos mais longos e imagens de proporção diferente podem exigir ajuste de tamanho de fonte ou de espaçamento em telas pequenas.
Como faço o formulário de contato realmente enviar?
O template entrega a estrutura visual do formulário. O envio precisa de um destino — um serviço de formulário por e-mail, uma função no seu backend ou a integração da sua plataforma. Depois de configurar, teste com um envio real: formulário que parece funcionar e não entrega é a falha mais cara de uma landing page.
Qual template escolher para o meu caso?
Escolha pela estrutura de conteúdo que você tem, não pela aparência. Se você tem um produto com planos e preços, comece pelo de SaaS. Se tem trabalhos para mostrar, pelo de portfólio. Se o objetivo é capturar contato antes de vender, pelo de captura de e-mail. A cor e a fonte você troca em minutos; a estrutura é o que custa refazer.

Todos os templates desta página são criações originais do Devs & IA, livres para você usar e adaptar em projetos pessoais e comerciais. Feitos em código puro justamente para funcionarem em qualquer stack.