Submitted over 3 years ago

Profile Card with pseudo elements

Szymon Rojek• 4,540

@SzymonRojek

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, there, Szymon Rojek! 👋

Nice work on this challenge! 👏 The background SVG circles are definitely tricky to place in this challenge, but I think you've a rather good job on them! 👍

Like, karimseh mentioned, using pseudo-elements is a good way to add the SVGs to the page. You can also add them as CSS background images and use viewport units to position them so that they remain in their place even when the screen is resized. 😉

Keep coding (and happy coding, too)! 😁

Szymon Rojek• 4,540

@SzymonRojek

Posted over 3 years ago

Hey @ApplePieGiraffe,

Thank you so much for your feedback. I really appreciate it. I will check bc-image definitely in another solution with the vport.

Have a nice coding too! :D

Karim• 210

@karimseh

Posted over 3 years ago

Hi Szymon,

I really liked your solution, very clean code, Circles, were also tricky for me, pseudo elements are a great implementation I think, however, I managed to solve it in another way.. don't hesitate to check my solution.

Happy Coding!

Karim

Szymon Rojek• 4,540

@SzymonRojek

Posted over 3 years ago

Hi @karimseh

Karim, thank you so much for your feedback. I will check your solution definitely.

Happy <coding> too! :D

Please log in to post a comment

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