Desafio final

Para fechar o curso, sua vez de estilizar uma página de perfil sozinho, com a correção automática conferindo cada decisão de layout.

Estudar esta lição interativa →

Chegou a sua vez de aplicar tudo sozinho. No editor abaixo, você encontra o CSS (ainda incompleto) para o mesmo tipo de página de perfil; o HTML dela aparece logo acima, só para leitura. Complete-o para que: o header vire um flex com justify-content: space-between e align-items: center; a lista de projetos (.lista-projetos) vire um display: grid com algum gap; o formulário de contato (dentro de #contato form) vire um flex em coluna; algum elemento clicável tenha uma regra :hover; e a página tenha pelo menos uma @media para telas estreitas. Reveja os quatro passos acima sempre que precisar.

Complete o CSS: header em flex (space-between + center), .lista-projetos em grid com gap, #contato form em flex-direction:column, uma regra :hover em algum elemento, e uma @media para telas estreitas.

header{
  /* seu vez: display flex, justify-content e align-items */
  background: #1e293b;
  color: #fff;
  padding: 16px;
}

.lista-projetos{
  /* sua vez: display grid, com gap */
}
.lista-projetos article{
  background: #f1f5f9;
  padding: 14px;
}

#contato form{
  /* sua vez: display flex, flex-direction column, com gap */
}

/* sua vez: adicione uma regra :hover em algum elemento clicável (link ou botão) */

/* sua vez: adicione uma @media (max-width: ...) que ajuste algo para telas estreitas */

🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.

← Voltar ao índice do curso