Submitted over 4 years ago

Profile Card with pseudo elements

Szymon Rojek•4,540

@SzymonRojek

A solution to the Profile card component challenge

Preview Code

Solution retrospective

Hi. Please let me know if you have any suggestions - CR.

It was a bit tricky to get the best position of the circles svg as a background, maybe is there a better way to do it?

For this challenge I did:

HTML semantic elements;
Invisible content just for Screen Reader users;
BEM naming;
Pseudo-elements for background images and border;
SASS;
optimal layout for the site depending on device's screen size;

Thanks! :D

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Szymon Rojek's solution.

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