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

Profile Card Component

Samuel M. Setiawanโ€ข 200

@samuelms21

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 was hard positioning the background images, because you have two seperate design element files in the folder. I got some help from those who have done this challenge beforehand. It helps so much. I've also learned that you can actually have multiple background images at once. This challenge so far has taught me the most about vanilla CSS positioning.

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello again Samuel, Congratulations on completing this challenge!

The box-shadow is a bit too evident, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

If youโ€™re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

โœŒ๏ธ I hope this helps you and happy coding!

Marked as helpful

0

Samuel M. Setiawanโ€ข 200

@samuelms21

Posted

@correlucas Hello again, haven't even finished your recent suggestion yet lol. But, again, thank you for the suggestion. I did realize earlier today that the box-shadow is kindof a bit intense.

1
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

@samuelms21 I've other suggestions for you previous solutions, if for you is okay I can left you some feedback. Have a nice day Samuel.

0
Samuel M. Setiawanโ€ข 200

@samuelms21

Posted

@correlucas thank you. It's completely okay, thanks for the help.

0
scarydeveloperโ€ข 130

@snake321

Posted

It is also hard for me to set the background so that's why I took the help from your code I learnt that we apply percentages on background position and veiw_port widht

0

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