Frontend Mentor - Stats preview card component solution

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Prajwol,

  Nice work on this one, well done!

  You should add display: block; to @media (min-width: 1024px) .imgContainer > img to get rid of the little gap appearing at the bottom.

  As an alternative option to the overlay approach you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); to help you match the image colour.

  You would also need to explore background-blend-mode (multiply usually does the trick)

  All the best!

  Marked as helpful

  1
• 

  judith•130

  @judithasitiolPosted almost 3 years ago

  Hey ! Nice work on the challenge :) I'm trying to figure out how to colour the image too.. Noticed your font was different.

  @font-face { font-family: Inter; src: url("Inter/Inter-VariableFont_slnt,wght.ttf"); }

  Hope this helps !

  Marked as helpful

  1
• 

  Alexei•831

  @Batareika007Posted almost 3 years ago

  Hi @Prajwol-Shrestha, you can try to use filter for your image tag filter: invert(10%) sepia(80%) saturate(400%) hue-rotate(250deg) brightness(100%) contrast(100%); - it's not perfect but you can play whit it to get perfect result.

  or you make background image to imgContainer and add css background-blend-mode: multiply.

  hope it will help

  Marked as helpful

  1