Stat Preview Card

Hello Nien, Congrats on completing this challenge

I like your comments on the CSS custom variable; I'll apply your approach in my upcoming solutions.

I have some recommendations if you don't mind:

It will be better to use landmark tags like <main> and <article> for accessibility instead of a bunch of <div>; More on this topic

It's easier to start with mobile workflow and proceed to the desktop mode. To begin with the mobile-first design, you can use chrome dev tools. This also may help you

Don't put your images in the CSS file; instead, use the below code with the appropriate media value.

<picture>
    <source media="(max-width: 1023px)" srcset="./assets/images/image-header-mobile.jpg" />
    <source media="(min-width: 1024px)" srcset="./assets/images/image-header-desktop.jpg" />
    <img class="" src="./assets/images/image-header-mobile.jpg" alt="" />
</picture>

More on picture tag

I hope this helps you.

That will be great if you come to my solutions page and tell me what you think and which part I must improve.

Happy coding