Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card with html/css

@Rexbrainz

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi. Please go through, your feedback is appreciated. I struggles with background image positioning. please help explain how to fix it to fit. Thank you.

Community feedback

@LucasNCosta

Posted

primeiramente, meus parabéns por concluir o desafio! agora vamos as dicas:

"Body" é toda a área do site, "Main" é onde o conteúdo principal ficará, o fundo de circulos você deve aplicar no "body", recomendo usar "div" pra cada uma das imagens, não aplique dois "backgrounds" na mesma área pois fica difícil para posicionar. Pode deixar apenas o perfil dentro do "main".

O nome você pode aplicar em um "h1" e a idade em um "p", juntamente com "display: inline-block;" nos dois parâmetros. irá facilitar na identificação (caso tenha problema no posicionamento pode usar "top" e "left" aplicando um "position: absolute;", pra funcionar tem que aplicar "position: relative;" no "body")

A mesma técnica pode aplicar no restante do código.

Pode usar o pacote inicial que o Frontend Mentor disponibiliza, lá tem instruções de fonte, cor, tamanho de fonte e tamanho de conteúdo.

Tente usar outros parâmetros além de "p" e "span", também tente treinar posicionamento, isso ajudará bastante.

Boa sorte e continue os estudos!

Para aconcelhamento entre em: https://github.com/LucasNCosta/html-css/tree/main/treinar/profile-card

0

@Rexbrainz

Posted

@LucasNCosta muito obrigado Lucas

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord