Projeto CSS: construa um card de landing page

Você chegou ao projeto do curso: um card de landing page que apresenta uma oferta, explica benefícios e oferece uma ação. O resultado reúne as decisões das aulas anteriores. Mais importante, cada decisão terá uma prova observável no navegador, em vez de depender apenas de a página “parecer bonita”.

Uma landing page é uma página criada em torno de um objetivo principal, como inscrição, download ou contato. Pense no balcão de atendimento de um evento: a sinalização diz o que está acontecendo, para quem é e qual é o próximo passo. No card, título, resumo, lista e botão organizam esse percurso. O limite da comparação é que uma interface precisa funcionar com teclado, zoom e telas variadas, não apenas conduzir visualmente uma pessoa.

Comece pela hierarquia do conteúdo

Antes do CSS, confirme que o HTML faz sentido em leitura linear:

<article class="oferta">
  <p class="etiqueta">Aula aberta</p>
  <h1>Construa sua primeira interface</h1>
  <p>Uma prática guiada de HTML e CSS.</p>
  <ul>
    <li>Projeto no navegador</li>
    <li>Passos verificáveis</li>
  </ul>
  <button type="button">Quero participar</button>
</article>

As classes oferecem pontos de seleção, mas os elementos continuam carregando o significado. Se os estilos não carregarem, título, texto, lista e ação ainda aparecem numa ordem compreensível.

Organize o CSS em camadas de decisão

Comece pelo modelo de caixa e por valores compartilhados:

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --marca: #6d28d9;
  --tinta: #1f2937;
}

Uma custom property, como --marca, guarda um valor reutilizável. Ela não é um “apelido mágico”: participa da cascata e pode mudar conforme o elemento em que foi definida. Neste projeto, a raiz funciona como o quadro de referências do tema.

Em seguida, controle largura, interior e contorno:

.oferta {
  width: min(100%, 56rem);
  border: 1px solid #ddd6fe;
  border-radius: 1rem;
  background: #ffffff;
}

.conteudo {
  padding: clamp(1.5rem, 5vw, 3rem);
}

clamp() mantém o padding entre um mínimo e um máximo, usando um valor fluido no intervalo. Em tela estreita, o espaço interno não consome o conteúdo; em tela larga, não cresce sem limite.

Acrescente o segundo arranjo no momento certo

A versão base fica em uma coluna. Quando há espaço para texto e ilustração, uma media query transforma o card em grid:

@media (min-width: 44rem) {
  .oferta {
    display: grid;
    grid-template-columns: 3fr 2fr;
  }
}

Tecnicamente, fr distribui frações do espaço disponível no grid. A primeira coluna recebe três partes e a segunda, duas. O conteúdo HTML não muda; apenas o algoritmo de layout passa a posicionar os filhos em colunas.

Verifique quatro provas antes de concluir

Teste o card com cerca de 360px: não deve existir rolagem horizontal. Teste com 1024px: o card deve respeitar a largura máxima. Navegue com Tab: o botão precisa mostrar foco. Clique: a mensagem deve aparecer sem substituir o documento. Finalmente, desative o CSS nas ferramentas do navegador e confira a ordem do conteúdo.

Repita a navegação sem mouse e aumente o zoom. O foco não deve desaparecer atrás de outro elemento, e o botão precisa continuar com texto completo. Essas provas não garantem toda a acessibilidade, mas revelam problemas concretos de contraste, tamanho e reflow antes da entrega.

No laboratório, personalize primeiro --marca; depois troque o texto sem mudar os seletores. Sua microprática final é registrar as duas larguras testadas e o que aconteceu em cada uma. Se algo quebrar, relacione a falha a uma camada: cascata, unidade, box model ou breakpoint. Esse diagnóstico é o verdadeiro resultado do projeto.