#stats preview card component project

4 messages · Page 1 of 1 (latest)

sonic glade
#

I've started doing the stats preview card component project - https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62

  1. there's a small gap below the image as specified in below picture, how can I fix it?
  2. images are not being deployed on the web page with GitHub Pages, how can I fix it? It's fine in netlify.
  3. Is this fine or How can I improve the code?
  4. How to add the colour on the image as given in the design?https://github.com/venkat2305/stats-preview-card-component/blob/main/design/desktop-design.jpg
    GitHub LINK:https://github.com/venkat2305/stats-preview-card-component
    LIVE URL
  5. GITHUB PAGES - https://venkat2305.github.io/stats-preview-card-component/
  6. NETLIFY - https://sparkling-hotteok-328369.netlify.app/
unknown.png
golden void
golden void
# sonic glade I've started doing the stats preview card component project - https://www.fronte...

But since we're already here, i'll be happy to answer your question.

  1. You can fix the gap by adding height: 100% to the img tag styling
  2. Images are not seen in Github pages because you're missing a dot in your file path. It should be srcset="./images/[...] instead of srcset="/images/[...] (do the same in your <img> tag if you decide to stick with it as well)
  3. Personally i think the easiest way for you to do that is to use a background-image instead of an image tag, and then take advantage of the background-blend-mode feature. I created a simple demo for you here: https://codepen.io/fancybaguette/pen/rNKjbPP
    If you decide to stick with the image tag you can use the Just9krish's method.
sweet imp
#

To add color on image use height: 100%; width: 100%; mix-blend-mode: multiply; background-color: blue;