Profile card using flexbox and grid

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE 📸:

• Looks like the background images has not been properly set yet, this is due to the usage of img elements and absolute positioned div. Actually there's a better approach to handle this problem.

• So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design.

• Add the following style rule to your css, after completing these steps you can experience the changes.

body {
  background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  background-repeat: no-repeat, no-repeat;
  background-color: hsl(185deg, 75%, 39%);
}

• Now you can remove these elements from your html file

<div class="back_ground_top">
    <img src="bg-pattern-top.svg" alt="">
</div>
<div class="back_ground_bottom">
    <img src="bg-pattern-bottom.svg" alt="">
</div>

• Tip, Don't forget to generate a new screenshot after editing the css file

• If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!