Metrics Card with Image - Html & Sass

Hey, awesome work on this one. Layout seems great on desktop layout however there is no mobile state which shouldn't be the case.

It is fine that you time your project creation, but it is more important to make sure to deliver a responsive website than being fast.

Some other suggestions would be:

• Do not set a height on the body tag, as this limits the element's height based on the viewport/screen's remaining height. Use min-height: 100vh to take full height and this allows the element to expand if needed.
• Instead of using margin: 0 auto on the main element, since you are using display: flex on the body tag, use justify-content: center and flex-direction: column this way, you won't need that margin and you could let now the .attribution to be in the flow, meaning you could now remove the position: absolute.
• The .countersBox could have used ul element, since the content inside it are "list" of information about the company website.
• The text inside the .counter should not use a heading tag, using heading tag on the 10k+ does not make sense at all since it doesn't defined anything in the section. If a design has bold text, it doesn't always mean that it is a heading tag.
• Also, wrap the text below each highlighted text on the bottom part with p tag, do not just use span, make sure to wrap text content inside a meaningful element.
• header is not needed on the main especially if you are using it just for background-image holder, you can just use div on that one.
• There is an extra not used selector which is the .overlay

Aside from those, great work. But make sure to always have the mobile breakpoint:>