HTML & CSS based on pixspy.com inputs

I am seeing the desktop version and it looks very broken on mobile landscape.

The bigger issues with this though, are with the html.

1. The semantics don’t make sense using h2s for numbers. They need to be in the same semantic element as the word, as both should be read out together. Eg use a list item or a paragraph around both, then use a span or strong tag around the number to target styling

2. you should not have duplicate html. This is bad for search engines, bad for performance, and completely unnecessary. Instead just change the styling with css. All that needs to change in this is a max-width, flex-direction and text alignment in one media query

I hope this helps

For the image colour you can use mix-blend-mode if image is in html, or background blend mode of its a bg image. That set to multiply and a little opacity should do it

For the image overlay, this is what I did:

HTML:

<div class="image">
            <div class="img-cover"></div>

CSS:

.image{
    background-image: url(https://github.com/Cooly-o-Cats/StatsPreviewCard/blob/main/Stats%20Preview%20Card/Assets/img/Assets/image-header-desktop.jpg?raw=true);
    width: 100%;
    height: 100%;
}
.img-cover{
    width: 100%;
    height: 100%;
    background-color: hsla(277, 69%, 35%, 0.73);

}

Like it, but did you do the mobile version? It doesn't seem very responsive.