Submitted over 3 years ago

Profile card component

INexplicableName• 40

@TheLiberal

Preview site View code

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

As many people have already mentioned, getting the double background image to work was super hard (impossible for me), so I copied the solution from @ApplePieGiraffe. I really have no idea how to approach this and why doesn't it just work when I set them to stick to the borders. Aside from that, the rest was fairly simple.

Community feedback

Abhik• 4,840

@abhik-b

Posted over 3 years ago

Hi Blazeg 👋

Your card is awesome , just make it a bit less wider for iphoneX and iphone5 will make it nicer 👌💯

About the background-images , what APG's code does is (Just guessing) :

it positions the top svg on bottom right of the viewport with the viewport units
and the bottom svg is positioned on top left of the viewport with the viewport units
the measurements I guess he got after a lot of trial and error , at least that's how I got 😅

Hope this helps 🚀 and Happy Coding 😇

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