SKIP TO CONTENT

Faça o Prompt de uma Landing Page

beginner~10 min0/4 etapas

Construa Sua Primeira Hero Section

A hero section é a parte mais importante de uma landing page de portfólio — é a primeira coisa que os visitantes veem. Nesta lição, você vai criar uma hero section profissional que captura a atenção e faz os visitantes quererem saber mais sobre você.

Você vai começar com HTML básico e adicionar estilos com Tailwind CSS para criar uma hero moderna, com fundo em gradiente, um título marcante, um subtítulo e um botão de call-to-action. Essa é a base de todo grande site de portfólio.

Instruções

1

Adicione uma div contêiner para a hero com min-h-screen, fundo em gradiente (from-purple-900 até gray-900) e centralização com flex

Dica: Use: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — isso cria uma seção de altura total com o seu gradiente

2

Dentro da hero, adicione um título h1 com o seu nome e um subtítulo p com o seu cargo/função

3

Adicione um parágrafo descritivo (tag p) com uma frase sobre o que você faz (máx. 300 caracteres)

4

Adicione um botão de CTA com estilo em gradiente e efeitos de hover

Seu Código

html
13 linhas
1
2
3
4
5
6
7
8
9
10
11
12
13

Pré-visualização ao Vivo

Pré-visualização ao Vivo