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 Component

@jewelsonmyjeans

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


Any tips on how I can write cleaner or better code will be appreciated.

Also got really confused for the top and bottom background circles, don't know how I would've achieved the mobile design for those.

Community feedback

C4rlos 410

@solracss

Posted

You do not need to target f.e avatar using main .avatar. Only name of the class is sufficient .avatar. Also main .card-header p:first-of-type would be much easier to add a class for this paragraph like f.e. .autor-name, like you have used for location.

For stats it's nice to use list, and name this section not a footer but profile-stats or sth that reflect what is there.

Regarding bubbles you can check mine solution or visit Grace .

Overall nice job! I like your solution. Keep coding.

Marked as helpful

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