Card Perfil

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  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!

  Marked as helpful

  1

  ---

  

  Iago Marques Viera•100

  @Iago-MarquesPosted 7 months ago

  @danielmrz-dev Meus deus man que dica sensacional, não sabia que conseguia usar várias propriedades na mesma tag da background-image, Ajudou demais fico feliz e sempre aprendendo! OBRIGADO!

  0
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  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.

  Marked as helpful

  1

  ---

  

  Iago Marques Viera•100

  @Iago-MarquesPosted 7 months ago

  @R3ygoski Não sabia que dava pra usar tipo outros elementos dentro de li como p e etc.. Curti demais essa dica meu man, vou colocar na prática agora, estou sempre aprendendo com vcs, obrigado pela humildade de compartilhar seu conhecimento, todo dia é um aprendizado!

  1