Stats preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Chetana,

  You did excellent work on this one . For your question , I may suggest to :

  1- Give the card-img a background-color: hsl(277deg 64% 61%);, also give it display: block; that removes the little gap under the image.

  2- Use the mix-blend-mode: multiply instead of filter.

  That would help to look quite similar to the challenge

  Best practices:

  • It's better to use single class selector to style the HTML element to reduce specificity.

  One more thing, use CSS reset in each project that makes browsers render all elements more consistently.

  Aside these, your solution is great.

  Marked as helpful

  0

  ---

  

  Chetana•60

  @Chetana-047Posted over 2 years ago

  @PhoenixDev22 Thanks, Ill apply the same and update my solution. Also, every time I get to learn new from your feedback, thanks for that too. :)

  0
• 

  Leonard Appelgryn•320

  @KaptainCS3Posted over 2 years ago

  In order to color the images use background-repeat: no-repeat; top: 0; background-blend-mode: multiply; background: hsl(277, 64%, 61%); hope this helps you

  0

  ---

  

  Chetana•60

  @Chetana-047Posted over 2 years ago

  @KaptainCS3 Hey Thanks for the suggestion, but in the solution, I have passed an image URL in HTML code and not in the CSS as a background, so the above solution will work in case of CSS(as a background image) , I assume.

  0

  

  Leonard Appelgryn•320

  @KaptainCS3Posted over 2 years ago

  @Chetana-047 Alright

  0