Stats Preview Card - HTML and CSS. (FlexBox and Mobile First)

Replace <div class="preview"> with the main tag and <h2> with <h1> to make the content/page accessible. click here for more on web-accessibility and semantic html

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

For the color of the image, add the background-image with a background-size of cover, background-blend-mode: multiply and opacity:0,8 to .preview-imagebox

.preview-imagebox{
background-image: url();
background-size: cover;
background-color: hsl()
background-blend-mode: multiply;
opacity: 0.8;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Great job 👍, but I have a recommendation!

• Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it.

• Remove width: 100% from the body, body is a block level element which by default takes full width available, so width: 100% does nothing here!