Profile card component using flex

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 2 years 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.

  ---

  BG iMAGE 📸:

  • let me explain, How you can easily apply the background color with the svg they provided.

  ---

  • Add the following style rule to your css, and then 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!

  10

  Marked as helpful
• 

  Daniel 👨‍💻•980

  @Daniel-Bilodid

  Posted over 2 years ago

  Hi, my congratulations you did a great job 🎉

  𝐒𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 🛠

  🔹 About images

  You can use possition: absolute and after that z-index to raise the picture above everything

  📚 Absolute

  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

  📚 Z-index

  determines the position of a positioned element and its children or flex elements along the z-axis. Overlapping elements with a higher z-index will overlay elements with a lower z-index.

  I hope it was helpful, you are great, keep up the good work 👍

  10

  Marked as helpful