Profile Card Component

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Instead of using two empty divs and "position: absolute" to position your images, use the body element to place the two background images using a single background-image property, and remove the two divs. You will use a lot less code lines using this technique.

  • Note: The comma in the background-image property separates multiple background images that are being applied to the same element.

  Here's an example:

  body {
      /* Your another styles */
      background-color: hsl(185, 75%, 39%);
      background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
      background-repeat: no-repeat, no-repeat;
      background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  }
  
  .background {
      /* position: fixed; */
      /* top: 0; */
      /* left: 0; */
      /* background-color: hsl(185, 75%, 39%); */
      /* width: 100vw; */
      /* height: 100vh; */
      /* z-index: -2; */
      /* margin: 0; */
  }
  
  .background-circle-top {
      /* position: absolute; */
      /* top: 0; */
      /* etc . . . */
  }
  

I hope you find it useful! 😄

Happy coding!

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, they are slightly misplaced due to usage of absolute positioning to position the images .

• 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%);
}

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

.

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

Happy coding!