stats-preview-card-component-main

Hey there, design looks good and it's responsive. Excellent work as your first solution!

• You should provide the images file. background-image: url(images/image-header-mobile.jpg); here it looks for the file but doesn't exist.
• After deploying the image, that approach still wouldn't work to change the background color of image. You can use combination of mix-blend-mode and opacity with a container div and placing image inside it like:

HTML

<div class="img-container">
      <img src="images/image-header-mobile.jpg" alt="people working in office">
</div>

CSS

.img-container {
  background-color: hsl(277, 64%, 61%);
}

img {
    display: block;
    width: 100%;
    opacity: .7;
    mix-blend-mode: multiply;
}

• Lastly, you can remove max-width from @media (min-width:415px) and (max-width: 1440px) {..} Because it'll return the mobile design when it's wider than 1440px. Excellent work again and happy coding :)

Hello Sohaib, congratulations for your solution!

You've a litte issue with the image import you forgot to indicate the correct path for the image indicating with . / the folder. Here's the correct import:

 background-image: url(./images/image-header-mobile.jpg);

See if works now

Hope this helps, happy coding!