Skip to content
Submitted over 5 years ago

Responsive profile card page, using HTML, CSS

LVL 1
@alenavershinina
A solution to the Profile card component challenge

Solution retrospective


It's my first challenge at Frontmentor :)

  1. It looks so, as the profile card in design has a very light shadow, but I couldn't make the shadow so light. I played with numbers and colors, but it was always too large, too visible. How to make the light almost invisible shadow?

  2. It took a lot of time to put the svg-circles in the background to the right place. First I tried to use percentage values in background-position. It works with images so, that when I write "background-position: 100% 100%", image goes to the right bottom corner. But SVG-files behave in a different way, and I couldn't find out why. When I made browser window smaller (from desktop to tablet/mobile size), the circle moved to the right side (I expected moving to the left side). So I could achieve the goal, using concrete pixel values and media query. But if someone knows, where to read about SVG percentage positioning behaviour, I would be glad to read.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Alena Vershinina’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