Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive profile card page, using HTML, CSS

@alenavershinina

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Adarsh Pratap 5,515

@adarshcodes

Posted

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
Discord logo

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