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

Shola Umakhiheβ€’ 40

@jayumaks

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


  • Couldn't get the images to stay in a fixed position. Need to get better at this kind of placement.
  • More flexbox practice. Also, could this be refactored to use CSS Grid? What are the pros and cons of Flexbox vs CSS Grid? When to use each?

Community feedback

@PersianBlue

Posted

This was a great solution. You've actually shown me how to get the background circles right where they were needed. When I was doing it, I thought to vary the background-position based on % and the background-size based on vw. Now I'm seeing that I didn't have to do anything to the size at all, and the position could have been adjusted: horizontal position with vw, and vertical positioning with vh. I hadn't thought to use vh at all.

Marked as helpful

0

Shola Umakhiheβ€’ 40

@jayumaks

Posted

@PersianBlue Oh, that's nice. I am glad you got something from it.

0
Francisco Carrilloβ€’ 5,540

@frank-itachi

Posted

Hello there πŸ‘‹. You did a good job!

I have some suggestions about your code that might interest you.

HTML πŸ“„:

  • Wrap the page's whole main content in the <main> tag.
  • If your code has different sections that have a specific like a , article, sections or footer, it’s a good practice to enclose those parts with HTML5 landmarks.

I hope you find it useful! 😁😁 Above all, the solution you submitted is greatπŸ‘Œ!

Happy <coding /> 😎!

Marked as helpful

0

Shola Umakhiheβ€’ 40

@jayumaks

Posted

@frank-itachi Thank you so much for this. Noted

0

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