Stats preview card

Greeting Jay, Congratulation on completing another frontend mentor project . Your solution looks nice.`

• There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution). -You're misusing section element, section is for a bigger chunk of content often titled by <h2> .Just a main element for the component and a footer for the attributionread more about sections.Instead, make the card a main and use`< div>``s for the two halves inside it

• Numbers don't make sense as <h2>s.

• The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. (You can set those to be display block via a class).

• You can apply border radius, display flex and overflow hidden to the component. It would be column-reverse for mobile and row for desktop.

• Don’t do widths in % or you will lose control of the layout. . Instead use max width in rem consider using max-width. That will let the component grow up to a point and be limited.

• Use an unordered list<ul> with 3 items for the stats.

• Use min height on the background image half.

Hopefully this feedback helps. Keep coding !

Hi Jay,

Great solution, well done!

Regarding your comment, I quite like the challenge of trying to match the design from a jpeg. And I think with any creative endeavour there is some creative license and what looks good to you. Although the figma/sketch files are really useful and for a larger portfolio worthy project it would be a sound investment and prepare you even more for a real life scenario as a developer.

Having said that there are certain expected sizes, i'd recommend this RWD course from free code camp and have a search online there is a lot of guidance for css unit best practice.

Some minor feedback:

• try background-blend-mode: multiply and remove the opacity on .hero to closer match the design of the purple image

Hope that helps!

Hi Jay, I don't have the pro version either, but there is a plece where you can look to get a reference regarding the font size. After you downloaded the project files, in the file that gives you info about the style there is a section about the body font size. Plus, you can guess the size based out of the image reference. For example, the design shows that the title wraps after the word "help" and in your solution warps after the word "your".

Hope that this information was usefull. Enjoy coding!