Card Perfil

Fala, @Iago-Marques

Sua solução ficou ótima!

O padrão de fundo com os círculos é um pouco complicado, mas você não precisa de contêineres separados para criá-lo, pois é possível trabalhar com várias imagens de fundo ao mesmo tempo. Você pode fazer isso dessa forma:

📌 Adicione isso ao body:

  background-color: var(--Dark-cyan);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;

Espero que ajude!

Fora isso, você fez um excelente trabalho!

Olá Iago, parabéns pela conclusão desse projeto, e por ter conseguido superar os desafios que ele propunha, e seu design ficou quase semelhante ao proposto. Parabéns.

Gostaria de dar algumas dicas quanto a sua solução, primeiramente que a sua semântica está quase perfeita, você poderia trocar esse trecho <div class="card-informs"> por uma <ul>, isso porque os items dentro dessa parte de informs, são correlacionados um com outros, então o mais correto seria utilizar uma lista não ordenada para deixar mais semântico ainda seu projeto.

Outra dica é quanto as imagens com alt que você colocou, nem todas imagens necessariamente precisam de um alt, por exemplo, esses dois círculos do fundo da tela, são puramente cosméticos e não tem sentido para com o conteúdo principal, então ao invés de ter um alt descritivo, eles poderiam ter um alt vazio. Isso vale para ícones também.

Edit: Seu projeto está quebrando em telas mobile, isso devido ao seu svg-bottom, a margem dele está causando problemas, aumentar ela pra valores positivos altos tende a fazer o responsivo funcionar novamente.

E novamente, parabéns pela conclusão do seu projeto, compartilho o sentimento de se surpreender com esse desafio, fui fazer ele pela primeira vez pensando ser fácil, e sofri, mas bom, aprendi bastante kkkkk. Caso algo que eu tenha dito não tenha ficado claro, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.