Responsive profile card page, using HTML, CSS
Design comparison
Solution retrospective
It's my first challenge at Frontmentor :)
-
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?
-
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.
Community feedback
- @adarshcodesPosted almost 4 years ago
Hi👋 @alenavershinina, First of all, Welcome to this amazing community, and also congratulations on submitting your first solution.
- For the box-shadow use should use colors in rgba() form, so that you can control the opacity. Pro tip: Use an online box-shadow generator, play with it, and use the shadow which looks great to you. You can use one here
- I don't think SVG work differently on the background, you specify the position: 100% 100% which is the first is x-coordinate and the second one is the y-axis that's why it puts it on the right bottom corner.
I hope it will help you. Keep it up👍. Happy Coding😀
2
Please log in to post a comment
Log in with GitHub
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