Stats Preview Card Component using HTML and CSS

Solution retrospective
It was harder for me than I expected! It is not responsive and doesn't have mobile version yet. I will later add these features. If you have any suggestions to improve my code, please feel free to share!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @IsraelPina32
Good job !
- @eniskrt
Well done. In addition to others, you can use bootstrap classes for responsive design.
- @amirhossein-peyvand
Hey, well done :) You can use mobile-first approach. Using this method will be easier for you to style your project. First you style for mobile devices, then for larger devices. Use main tag for your card, then inside of it, use two divs, one for the content and the other div for your image container. Use display="flex", flex-direction="column" for mobile devices, and flex-direction="row" for large devices.
<main> <div class="content"> // your content </div> <div class="image-container"> // your image element </div> </main> - @kimodev1990
-
You could insert your image inside a div, give the div width 50% of the container ( in your case main tag ) and the width of image 100%,so you can have responsive design.
-
You could clamp ( ) method in your coding ( font-size, width, etc ... ) ,so your design will change according to the viewport dimensions and will be suitable for any device layout.
-
Keep going on & nice work.
-
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord