Stats preview card component

Hi, @PiwkoO.

I agree with @pRicard0, your project is almost perfect.

Here are some quick tips.

• For the mobile version, the .card class has 327px in the design file. Maybe you can try 327px instead of 400px. And you don't need any padding values in your body. You've already centered your main class inside of the body. You can use this method for your nested elements, and they will be more responsive, but it will take a little time.

• Don't use only the width property as px or em/rem etc., it will cause some problems. You can use max-width instead. And you can declare width:100%. This will allow your browser to do more calculations.

• You can use the px unit to reach your first solution. However, you need to update this measurement unit to more responsive ones like rem or em. I highly recommend using rem. It gives you more control over your code.

• You don't need to use the height property for your content area. They should take their height values from their content. I think you missed some line-height values and that's why your content area height didn't match the image area height.

I hope these will help you. Keep coding and have a wonderful day.

Some HTML tips

• You can use the <em> tag instead of span. The <em> tag is used to define emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress. But I think you just need to use span for the text below the numbers.

If you want to improve accessibility, I think you need to learn ARIA

I don't know what else I can say, your project is almost perfect.