Stats preview card component

Hello Reza Jaber, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

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

You can read this content which is explaining these effects with mix-blend-mode: click here

To improve the structure of the html document, prefer to wrap all the content with the main tag, since this challenge is just a component, it needs a main tag to know what the main content of the page is!

The remainder is excellent.

I hope it's useful. 👍

Hello there,

You did a very great job as a beginner taking on this challenge.

I'd be glad to share with you some little info that might help you finish this project just in time. What you've done so far is outstanding for a learner (as you've told me).

First of all, you don't need to use the URL() for that hover effect. Create a div element and then make sure the div overlay over the image you want that hover effect to take effect upon. Then set the z-index to -1; it goes back behind the previous image there. So on hover of the main image. Set the image z-index property to -1 or -2 depending on the one you want to be ahead of the other.

Your HTML looks structured well so far that I can tell.

The way you also centred the element is very much valid. You can also use

display: grid;
place-content: centre; // this does the same job as the flexbox command you used

So far that's all I can point out in this project

I hope you understand this better than I wrote it. Keep coding, you're one step away from achieving your goal

Hey, for the image, I did something like this, I hope that helps:

<div class="image-container">
img class="main-image" src="images/image-header-mobile.jpg" alt="">
</div>

.image-container {
  display: inherit;
  position: relative;
  width: 100%;
  border-radius: 0 10px 10px 0;
  background-color: hsl(277, 64%, 61%);
}
.main-image {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  border-radius: 0 10px 10px 0;
  mix-blend-mode: multiply;
  opacity: 0.75;
}

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩