
A user profile card with avatar, user-details and socials links
Design comparison
Community feedback
- P@RogeanCostaPosted 2 months ago
Hi! Congratulation for the result! 👏
By the way, it seems that Inter is not being applied. Another sans serif is being used instead. I suggest trying to understand why this is happening and perhaps using the font files provided through @font-face. Using @font-face, you just need use this:
@font-face { font-family: 'Inter'; src: url(../fonts/Inter-VariableFont_slnt_wght.ttf); }
The image also appears to be larger in your result than in the design. It is not common to insert the image dimensions through attributes in the img itself; the recommended method is to inform the dimensions through CSS. In fact, a good code practice is to not insert img elements directly into the HTML, but rather to insert them inside a specific div. Then, with this div, you can limit, restrict the image dimensions. Something like this:
<div class="img-container"> <img class="img" src="assets/images/avatar-jessica.jpeg" alt="Avatar" /> </div>
.img-container { width: 5.5rem; } .img { display: block; max-width: 100%; border-radius: 50%; }
Don't give up, continue your studies, always improving your skills! 😁👋
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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