Responsive stats preview card component

Hi Simon,

This is an excellent result for a first project - well done.

There are a few tweaks you could consider to more closely match the design:

1. Changing the width of your .main-container to around 75% should adjust your card length and the surrounding space to more closely resemble the design.

2. Increase your body font-size to 17px.

3. Increase you h1 font size to around 40px.

4. Adding some padding-right to your <p> element, perhaps around 50px or so, should create a similar rag to the one on the copy in the design. You can do the same with your stats.

If any of these changes distort the size ratio between your image and copy sections, just play around with adjusting the image section size until you find a size that looks correct.

Be sure to recheck your media queries against any changes maid to your main styling, incase they need adjusting to compensate.

It may also be advantageous to make a habit of considering your HTML semantically. This resource really helped me: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Good luck with the adjustments. I hope my advice comes in handy and I look forward to seeing your future projects.

Hi, Simon!

I'm a beginner of coding, so i chose to try this challenge too. This is my second one. I did almost everything except a color of this image. I had no idea how to mix it even if i learnt something about filters in CSS. Thanks to your solution now i know how to do it very easy.

I haven't published my solution yet, but i will soon.