Skip to content
Submitted almost 3 years ago

Responsive Stats Preview Card Component using grid and flexbox

Aperlae•80
@Aperlae
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

I was unsure at which point to switch to the desktop image on this one. In the end I decided to go by the width of the mobile image and maintaining its aspect ratio. It came to 836px which is a bit of a weird number but I hope it works. I would appreciate any feedback regarding this and anything else I might have messed up!

Community feedback

  • suresh•0
    @sureshpasham85Posted almost 3 years ago

    So you not using bootstrap5?

    0
    Aperlae•80
    @AperlaePosted almost 3 years ago

    @sureshpasham85 Thanks for your comment :smiley: No, I haven't started using any frameworks yet. Still doing everything from scratch but I will definitely give it a go for my next project. Should make things easier anyway!

    0
    suresh•0
    @sureshpasham85Posted almost 3 years ago

    @Aperlae But you have used flexbox and grid properties in styles I can see and there are no reference links for libraries. :) I it is a silly question may be I am new things Thanks

    0
    Aperlae•80
    @AperlaePosted almost 3 years ago

    @sureshpasham85 sorry for the late reply. Not quite sure if I understood you correctly. I did get my CSS reset from Piccalilly Modern CSS Reset but other than that I wrote the Utility Classes and Custom Properties after watching Kevin Powell. Hope this makes sense and don't worry I'm new to all this too ;) Happy Coding!

    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