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 with HTML and CSS

@Johndiddles

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


I'd love your feedbacks. If there's anything you think I could have done better, please stone me that feedback 😁

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, John_diddles! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍

The background shapes in your solution seem rather well-placed, but I don't think you need to create two separate <div>s to add both of the shapes. You can simply add and position both of them in the <body> of the page using the regular background, background-size, and background-cover properties but simply separate the different values for each image with commas. See this article for more info. 😉

Hope that helps. 😃

Keep coding (and happy coding, too)! 😁

2

@Johndiddles

Posted

@ApplePieGiraffe Thanks. Thanks and Thanks. 🤗

1
P

@claire-ca

Posted

Your solution looks great! Very close to the original design - well done! Maybe add a box-shadow on the profile card to make it even closer. Great work!

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