Stats Preview Card Using HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • To recreate the exact purple color of the image you can do the following:

  .picture {
  ‎ ‎ ‎ background-color: rgb(171, 92, 219);
  }
  
  .work-photo {
  ‎ ‎ . . .
     display: block;  /* <----  Add this to remove the space created below the image*/
  ‎ ‎ ‎ ‎/* opacity: 0.4; <---- Update this*/
     /* background-color: hsl(277, 64%, 61%);  <---- Remove this*/
  ‎ ‎ ‎ ‎opacity: 0.75;    
  ‎ ‎ ‎ ‎mix-blend-mode: multiply;
  }
  

  • The second style applies a blending effect to the image by setting the mix-blend-mode property to multiply. This means that the image will blend with the background color in a way that multiplies the color values of each pixel.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1