Stats preview card component using html, css grid and flebox

Hey, great work on this one .The desktop layout seems great it is responsive and the mobile state looks great.

Others already gave their feedbacks which is really nice, just going to add some suggestions:

• On the body avoid using % or vh unit on the height as this is relative to the viewport if you are using on the body tag, this makes it's height limited. Use min-height: 100vh instead so that it will allow the element to expand.
• Add an extra aria-hidden="true" on the img so that it will be completely hidden for all users along with its alt="'.
• Your .details could have used ul since those are "list" of information about the company website rather than using p tag for every column of it.

Aside from those, great work again on this one.

Great work Martha on this challenge. Nicely done and responsive. For the overlay you can take a look at css blend modes as another option.

Happy coding

Hey Martha, this looks really good and I like how it's responsive

• Something I did a bit differently was instead of adding a ::before pseudo element to add another shape and change the opacity, I used background-blend mode and set my image as a background image:

<div class="image"></div>

.image {
    background-image: url(../images/image-header-desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
    background-color: rgb(112, 51, 142);
}