Passo 4: Formulário e revisão final
Falta estilizar o formulário de contato e garantir que a página inteira se comporte bem numa tela estreita. Hora de fechar o projeto.
Estudar esta lição interativa →O formulário de contato ganha display: flex; flex-direction: column; para empilhar os campos verticalmente, com gap entre eles, e o botão de envio reaproveita a cor de marca com :hover e transition, os mesmos padrões dos Módulos 5 e 8. O HTML deste passo é o do projeto final do curso de HTML, com os campos required e autocomplete do Módulo 8 daquele curso, e o CSS ganha o que os módulos 8 a 11 ensinaram: o contorno de foco com :focus-visible (Módulo 8), o título fluido com clamp() (Módulo 9), a borda de erro só depois de a pessoa mexer no campo, com :user-invalid (Módulo 10), e uma animação de entrada dos cartões que só roda para quem não pediu menos movimento, com @keyframes e prefers-reduced-motion (Módulo 11). A responsividade segue o raciocínio mobile-first do Módulo 7: o estilo base já é o da tela estreita, e a @media (min-width: 561px) do passo anterior só acrescenta o que muda quando há espaço.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. A página de perfil completa e estilizada: header, sobre mim, projetos em grid, formulário, foco visível, animação respeitando reduced-motion e layout mobile-first.
Campos de formulário (input, textarea, button) não herdam a fonte do body por padrão: o navegador aplica uma fonte própria a eles. Por isso o projeto usa font: inherit nos campos: a palavra-chave inherit manda o elemento copiar o valor da propriedade do pai. Existem duas irmãs: initial volta ao valor inicial definido pela especificação do CSS (não ao do navegador) e unset age como inherit nas propriedades que herdam por natureza (como color) e como initial nas que não herdam (como border).
Base (M1-M4)
Variáveis de cor, box-sizing: border-box, tipografia herdada pelo body, cascata organizada.
Header e nav (M5)
Flexbox com justify-content: space-between e align-items: center.
Projetos (M6)
Grid com auto-fit, reacomodando os cartões sem precisar de media query.
Formulário (M5)
Flex-direction: column, campos empilhados com gap.
Responsividade (M7)
Mobile-first: o estilo base é o da tela estreita e uma media query min-width acrescenta o layout largo; o header quebra de linha com flex-wrap.
Estados e foco (M8)
Hover e transition nos links, cartões e no botão de envio, mais um contorno de foco visível com :focus-visible.
Variáveis e clamp (M9)
Tokens por papel (--cor-superficie, --cor-header) e o título do header fluido com clamp().
Seletores (M10)
Borda de erro com :user-invalid, que só aparece depois que a pessoa interage com o campo.
Animação (M11)
@keyframes de entrada nos cartões, dentro de prefers-reduced-motion: no-preference.
Compare esta página com a versão puramente estrutural do fim do curso de HTML: mesmo HTML, mesma semântica, mesma acessibilidade, mas agora com uma identidade visual de verdade por cima. É exatamente essa a divisão de responsabilidades que os dois cursos ensinaram: o HTML garante que a página funcione e faça sentido para qualquer pessoa (inclusive com tecnologia assistiva); o CSS garante que ela também seja agradável de usar.
A página agora é bonita, mas ainda é estática: nada acontece quando alguém clica no menu, escolhe um tema ou envia o formulário. Dar esse comportamento à mesma página, com um botão de tema claro e escuro, validação do formulário e a lista de projetos vinda de dados, é o assunto do curso de JavaScript (o módulo Ponte, no fim dele). Os tokens por papel de cor que você viu aqui existem justamente para esse tema escuro funcionar sem quebrar a barra do topo.