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

Simple Profile Card Component with pure HTML & CSS

@ivaberiashvili

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


Hi everyone! Setting background images exactly as it was in the design was a bit challenging for me and I'd like to hear from you about your approaches to it. Keep in mind that those gradient circles are getting around 2/3 in size on mobile and keeping the exact distance from the card. Happy coding :)

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hi, Iva Beriashvili! 👋

Good work on this challenge! 👍

I'd like to suggest using more semantic HTML elements in your markup, which is important for accessibility and SEO-related reasons. For instance, the card could be an article element, the name inside it could be a heading element, and the list of stats at the bottom of the card could be a ul element. If you’d like to learn more about how to write semantic HTML and why it matters, check out this short, helpful course.

As for the background images in this challenge, they can be tricky to place! I found that using a combination of viewport units and percentages worked well to keep the images more or less in their position as the screen resizes. If you're interested in checking it out for any ideas, you can do so here. 😉

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

1

@ivaberiashvili

Posted

@ApplePieGiraffe Thank you for your feedback,

I'm aware of the importance of SEO but didn't pay much attention to semantics this time.

I checked your solution and the touch of animation is so cool! and the background are also close to design. However I was thinking to bring them as elements and give them absolute positioning related to the card itself, because if you look closely the overlap of those circles are almost identical on desktop and mobile.

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