Stats Preview Card

Hello, Samson! 👋

Congratulations on completing this challenge! 🎉 It's great that you have used the landmark elements correctly. Also, it looks good on both mobile portrait and landscape views. Good effort on this challenge! 👍

Regarding your questions,

• When I was doing this challenge, I used mix-blend-mode to create the purple overlay and it looked darker than the design. But, when I gave feedback to @DarrickFauvel that had done this challenge, he took a look at my solution and gave me a suggestion that I should control the opacity as well. So, because you are using the absolute position method then I would recommend trying to use mix-blend-mode and you could see his solution as your reference if you want.
• The sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As frontend developers, we should keep making your website looks good in between those screen sizes. Also, like @GrzywN has said earlier you could make the layout into two columns until it has enough space.

I would recommend using a ul for the stats and wrapping each stats item with li. By doing that you don't need to wrap each text with p, you can just wrap the text with span because the text is already wrapped by li, which is a meaningful element.

That's it! I hope this information is useful! 😁

Hey Samson,

I guess the answer to your first question is this:

img { background-color: hsl(277, 64%, 61%); mix-blend-mode: multiply; }

you should set the background color of your image to the color you want to mix with your image, here it was hsl(277, 64%, 61%). And then set mix-blend-mode to multiply. They will get mixed and give you the color you wanted.

About your second question, I do exactly what you did in your code, except I only specify the size of tablet and mobile, since desktop or bigger are the default design so I don't bother with them.

Hope this helps.

Hey, great job on the challenge!

1. You can try changing overlay to multiply. I think multiply is closer to provided design, but it is still not perfect. As far as I remember I used it in my solution to this challenge, so you can see the screenshot and compare multiply with overlay.
2. It's kind of weird. Widths in style-guide.md mean widths of the design files provided. For example mobile design has width of 375px. So it depends on you and your project what breakpoint you want to determine. It's the best to just change width and observe when the design should change depending on width.

Have a nice day and happy coding!

Hi Samson let me help you a bit

1.-to get the color like the design you just need to use mix blend mode

2.-you dont need to use a breakpoint like the style guide, they put that as a reference, so the idea is to do it completely responsive where the max screen is 1440 and the min is 375, thats mean that you dont have to worry to do the design for 4k screen or bigger than 1440