Submitted about 2 years ago

NFT Preview Card Component

Gustavo de Camargo Campos• 200

@themegazord

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Uma observação: Como o próprio fontend mentor já deu uma imagem do avatar circular em png, não consegui colocar o border e border-radius colado a foto. Aceito informações

Community feedback

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

Fala Gustavo, parabéns pelo desafio!

Na minha solução eu consegui assim

.creator img { 
   width: 32px; 
   height: 32px; 
   margin-right: 12px; 
   border: 1px solid var(--n-white); 
   border-radius: 50px; 
 }

Link da minha solução https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

Depois me diz se funcionou

Gustavo de Camargo Campos• 200

@themegazord

Posted about 2 years ago

@correlucas Tentei aqui, e não deu certo, quando fui verificar também, a minha relação de tamanho ficou muuuito diferente, não sou a melhor pessoa quando o assunto é relação de tamanho kkkkkk, mas obrigado galera.

Adriano• 34,090

@AdrianoEscarabote

Posted about 2 years ago

@themegazord Fiz algumas mudanças no código pelo inspecionar do google e parece que consegui resolver o seu problema:

.creation__profile img { width: 2rem; padding: 0; border: 1px solid #fff; border-radius: 50px; }

Você pode ajustar o tamanho do jeito que você preferir.

Mano uma dica valiosa para você: TIRA O SEU ENDEREÇO DO PERFIL auhauauahuauua

Gustavo de Camargo Campos• 200

@themegazord

Posted about 2 years ago

@AdrianoEscarabote Valeu mano, ele pegou o endereço do GitHub kkkkkkkkkk

Pedro Souza• 150

@pedrohsouza

Posted about 2 years ago

Olá, Gustavo, parabéns por concluir o desafio. Quanto a sua dúvida, você pode fazer o seguinte:

border: 1px solid var(--white);
border-radius: 50%;

A primeira linha seta a espessura, o estilo e a cor da borda do elemento, mas a borda ainda vai ser quadrada. Na linha seguinte o border-radius faz com que a borda fique arredondada.

Gustavo de Camargo Campos• 200

@themegazord

Posted about 2 years ago

@pedrohsouza Oii, então, eu tentei fazer isso antes, porém, fica assim: https://prnt.sc/Rti8JzE__7dk, justamente pela imagem não ser quadrada.

Pedro Souza• 150

@pedrohsouza

Posted about 2 years ago

@themegazord Dei uma olhada no seu código e pelo visto o <img> herdou um padding de algum outro ponto do código. Você pode contornar isso colocando um padding: 0 no elemento. Daí é só diminuir um pouco a largura pra imagem não ficar muito grande.

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

@pedrohsouza verdade eu nem me atentei a isso porque eu uso reset css pra tirar as margins e padding default de tudo 😂

Pedro Souza• 150

@pedrohsouza

Posted about 2 years ago

@correlucas eu também kkkk, mas nesse caso o padding veio da imagem principal. O inspecionar elemento salva vidas.

Gustavo de Camargo Campos• 200

@themegazord

Posted about 2 years ago

@pedrohsouza Fiz aqui e deu certo, valeu gente. Meu erro além disso, foi não ter classificado as imagens. Vou me atentar a isso nas próximas :-)

Please log in to post a comment

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