Profile Card Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  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!

  Marked as helpful

  4
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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 .

  ---

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

  • 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!

  Marked as helpful

  1