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

HTML and CSS with flexBox

@StudioWebpic

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,

Second challenge with HTML / CSS abd Flexbox. Not easy to place the circels !

Thx to everybody who let a feedback :)

Community feedback

@KonradOlech

Posted

Hi, my advice is deleting max-width attribute from .container, because it is messing with styling in wider screens (4k displays are more common every year) and it is unecessary.

I would move "circles background" from .container and merge it with body bg. In hypothetical situation when you decide to move/delete/change profile card component your solution will change bg of website.

Third advice - to fix this blue line between img and border (on person photo) add "background: #fff" attribute on img. It is caused by bad anti-aliasing on svg render so this way you cover it.

Anyway - good job, very similar to my solution :D

1

@StudioWebpic

Posted

@KonradOlech Thx you so mutch for your feedback ! really interesting and I will apply this for my next projects :)

0

@SarahHenriette

Posted

Hi Studio Webpic , 🙂

Well done because it's really well done and the visual is almost identical 👍

yes I agree enough to place the circles it is not obvious, I had also had a little trouble especially on the mobile

Good continuation

1

@StudioWebpic

Posted

Hi, Thank you very much ! Your message is very encouraging and motivating :)

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