Skip to content
Submitted over 3 years ago

Responsive stats preview card using CSS GRIDS - 1 hour challenge

Jonny Ngo Luong•80
@Shirajuki
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello! 👋

This is my 5th solution on Frontend Mentor, built using static HTML5, CSS3 and vanilla javascript as always. 🙂

This challenge solution was built in 1 hour (+2 minutes) due to little time on the weekend, and the html/css code is thus not beautiful to look at (possibly lots of bad code habits). Due to the little time measuring was done by the eye (no tools) and the design is possibly far from "pixel correct" as desired.

I had trouble getting the image to look crispy dark as in design, I've tried "multiple" techniques and all such but to no avail, so any feedback on how it could be done would be appreciated. Any other feedback from the community, pointing on my mistakes and bad habits, would also be greatly appreciated!

I'll hopefully be back for another challenge next week, see you all again then! 🙂

  • Shirajuki

Community feedback

  • Rafal•1,395
    @grizhlieCodesPosted over 3 years ago

    Hi Shirajuki,

    Thanks for sharing your solution, had a peak at the code and I have a few observations:

    1. Super well done on completing this in 1 hour?? I consider myself slow and would have probably stretched this another 20-30 minutes. So for this amount of time your code is awesome.

    2. Background images: The images 'stretch' (between mob-tablet I think, without being ultra specific) at the moment and this provides for what I think is a rather un-intended visual effect. In your .right-img::after consider trying background-size: cover or simply changing it from background-size: 100% 100%; to background-size: 100%. Have a try and let me know what you think.

    3. **Font sizes: ** I'm always rather careful with this one. Traverse the responsiveness and see if you're happy with the font-sizes. I think some readers with crappy eyes (such as myself) would appreciate a few more pixels, especially for the paragraph. 😁

    Overall awesome job and easy-to-read code, keep it up :)

    0

Please log in to post a comment

Log in with GitHub

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