body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #222;
background-color: #f5f7fb;
}
.hero {
background: linear-gradient(135deg, #4c6fff, #6a9bff);
color: #fff;
padding: 60px 20px 80px 20px;
text-align: center;
}
.hero-inner {
max-width: 900px;
margin: 0 auto;
}
.hero-logo {
font-weight: 700;
letter-spacing: 1px;
font-size: 22px;
margin-bottom: 30px;
}
.hero h1 {
font-size: 40px;
margin: 0 0 20px 0;
}
.hero p.subtitle {
font-size: 18px;
margin: 0 0 30px 0;
opacity: 0.95;
}
.hero-cta {
margin-top: 10px;
}
.btn-primary {
display: inline-block;
padding: 14px 28px;
border-radius: 6px;
border: none;
background-color: #ffffff;
color: #2950ff;
font-weight: 600;
font-size: 15px;
cursor: pointer;
text-decoration: none;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.btn-secondary {
display: inline-block;
padding: 12px 22px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.7);
background-color: transparent;
color: #ffffff;
font-weight: 500;
font-size: 14px;
cursor: pointer;
text-decoration: none;
margin-left: 10px;
}
.hero-note {
margin-top: 18px;
font-size: 13px;
opacity: 0.9;
}
.section {
padding: 50px 20px;
}
.section.light {
background-color: #ffffff;
}
.section-title {
text-align: center;
font-size: 26px;
margin-bottom: 10px;
}
.section-subtitle {
text-align: center;
font-size: 15px;
color: #555;
margin-bottom: 40px;
}
.features {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 25px;
justify-content: center;
}
.feature-card {
background-color: #f8f9ff;
border-radius: 10px;
padding: 22px 20px;
flex: 1 1 260px;
max-width: 310px;
box-shadow: 0 4px 12px rgba(22,34,86,0.06);
}
.feature-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.feature-text {
font-size: 14px;
color: #555;
line-height: 1.6;
}
.badge {
display: inline-block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 9px;
border-radius: 999px;
background-color: rgba(76,111,255,0.1);
color: #2950ff;
margin-bottom: 10px;
}
.grid-2 {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
}
.col {
flex: 1 1 300px;
}
.mockup-box {
background-color: #0f172a;
border-radius: 14px;
padding: 18px;
color: #e5e7eb;
box-shadow: 0 18px 40px rgba(15,23,42,0.7);
}
.mockup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
font-size: 12px;
}
.mockup-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background-color: #f87171;
display: inline-block;
margin-right: 4px;
}
.mockup-dot.yellow {
background-color: #facc15;
}
.mockup-dot.green {
background-color: #4ade80;
}
.mockup-code {
background-color: #020617;
border-radius: 10px;
padding: 14px;
font-family: "Courier New", monospace;
font-size: 11px;
line-height: 1.7;
overflow-x: auto;
white-space: pre;
}
.highlight {
color: #4ade80;
}
.cta-section {
background: linear-gradient(135deg, #111827, #1f2937);
color: #f9fafb;
text-align: center;
padding: 50px 20px 60px 20px;
}
.cta-inner {
max-width: 620px;
margin: 0 auto;
}
.cta-inner h2 {
font-size: 26px;
margin-bottom: 12px;
}
.cta-inner p {
font-size: 15px;
color: #e5e7eb;
margin-bottom: 25px;
}
.cta-small {
font-size: 12px;
color: #9ca3af;
margin-top: 14px;
}
footer {
text-align: center;
padding: 18px 10px 26px 10px;
font-size: 12px;
color: #6b7280;
background-color: #f3f4f6;
}
footer a {
color: #4b6bfb;
text-decoration: none;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 30px;
}
.hero p.subtitle {
font-size: 16px;
}
.grid-2 {
flex-direction: column;
}
.btn-secondary {
margin-top: 10px;
margin-left: 0;
display: block;
}
}
Descreva o seu produto em poucas linhas e receba um HTML completo, responsivo
e pronto para publicar. Sem código complexo, sem dependências externas.
Nenhuma instalação necessária. Apenas copie e cole o código gerado.
Pensado para empreendedores, agências e criadores que precisam lançar rápido
sem abrir mão de qualidade.
Código completo com ,
Sem JavaScript, sem arquivos externos, sem dependência de frameworks.
Ideal para e-mails, construtores simples e hospedagens limitadas.
Seções otimizadas para apresentar proposta de valor, benefícios e
chamadas para ação, ajudando você a transformar visitantes em clientes.
Edite textos, cores e estilos diretamente no HTML. Ajuste ao seu
branding em minutos, sem precisar de ferramentas avançadas.
Você só precisa descrever o objetivo da sua página: lançar um curso,
validar um produto, capturar leads ou apresentar um serviço.
Em seguida, o LandingBuilder devolve um código HTML pronto, com seções
de herói, benefícios, prova social e chamada para ação.
Copie, cole no seu editor ou CMS favorito e publique em poucos minutos,
sem depender de desenvolvedores ou templates genéricos.
Escreva uma descrição como: “Quero uma página para vender um curso online
de fotografia para iniciantes, com destaque para bônus e garantia”.
Em seguida, peça o HTML e cole no seu editor.
Crie Landing Pages profissionais usando apenas texto.
Por que usar o LandingBuilder?
De uma ideia em texto para uma página pronta em um passo.
Lance seu produto em dias, não meses.
Quero testar
Pronto para gerar sua próxima Landing Page?