Profile Card Component Using FLexbox

Good effort Fauzan. However I think you should try using bg-pattern-top, bg-pattern-bottom and bg-pattern-card as backgrounds instead of images. There are different background properties like background: url();, background-attachment, background-size and background-position that can be useful for those and make them more responsive. Also for the profile image you can use negative margin-top to displace it from its normal position to the top without having to worry about moving away from the center. However, if you must use position:absolute; try making the parent container *position:relative; * so it doesn't displace too far away from it's parent element and you can easily place it where you want. Check out my solution here to see how I made it responsive. I also made a github repositiory for it, let me know if you have any questions I will be glad to clearify and you can give me a feedback on my solution too. Keep Coding! you got this.

Hello there, Fauzan Reza! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this one! 🙌

I just suggest following GoldenAceTech's helpful suggestions to improve the positioning of the background images, and you should be good to go! 👍

Keep coding (and happy coding, too)! 😁