Stats Preview Card Component

👾Hello @Deolabest, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%, also add to the div containing the background-color: hsl(277, 64%, 61%);` to blend the image + bg color. See the code below:

img {
mix-blend-mode: multiply;
opacity: 82%;}

✌️ I hope this helps you and happy coding!

Hello @Deolabest you did a wonderful job so congrats

• to get the purplish overlay on the image you can use a CSS property called mix-blend-mode and set its value to color

.image {
    display: block;
    height: 450px;
  mix-blend-mode: color;
}

• Also instead of wrapping your solutions ina bunch of div why not use HTML5 semantic tags like section and article

• for example, you can wrap your images in a figure container like so

 <figure class="image">
          <img src="images/image-header-desktop.jpg" alt="Office Staff" class="imagedesktop">
          <img src="images/image-header-mobile.jpg" alt="Office Staff" class="imagemobile">
      </figure>

• you can also wrap your contents in an HTML article tag

I hope this helps