Submitted almost 3 years ago

NFT Preview Card Component

@themegazord

A solution to the NFT preview card component challenge

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

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 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
Pedro Souza•170
@pedrohsouza
Posted almost 3 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.

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