Frontend Mentor Stats

Community feedback

• 

  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.

  ---

  CSS 🎨:

  • Looks like the image is not blend with the background color properly, this is just because we manually just decreasing the opacity of image.

  ---

  • But actually there's a method which is so efficient and so handy to use, let me introduce the mix-blend-mode property in css.

  ---

  • Just add the following style rules to your css file

  .right-column {
    background: #AA5CDB;   /* The old bg-color is not well declared, so manually overwriting correct color
  }
  
  .right-column img {
    mix-blend-mode: multiply;
    opacity: .75;
  }
  

  • Along with that you want to remove this element from your html file, because it serves no purpose.

  <div class="overlay"></div>
  

  ---

  • Now the component's image is perfectly blended with the background component's primary color in an efficient way

  ---

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

  0