Skip to content
Submitted about 4 years ago

Stats Preview Card Component with HTML and CSS

Sebastien•55
@SebastienPJ
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

All feedbacks are welcomed. This was my very first project without instructions and, although I am elated at what I came up with, I know it it full of errors. Had a very hard time with the positioning at first but started clicking and things started moving relatively to where I wanted them to. Will keep trying for better next time.

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, good work on this one and congrats to your first solution here! The layout in desktop is though, though I had to zoom out or used the scrollbar at the bottom and as I can see you did not make any mobile breakpoint.

    Suggestions would be that:

    • As you can see, there is this white space in around the content right. You could remove this by adding margin: 0 in your body tag.

    • There is this scrollbar at the bottom which we really want to avoid whenever we design something. This was caused by the width: 1440px on the .main-background selector, for some users who have wide screen this won't occur, but for others like me, it will. To fix, simply remove the width: 1440px declaration on it, then you could just add that as a max-width.

    • You could make use of h1 on your "Get insights that help your business grow." title since it make sense to make it a heading right. Just for making more semantic markup.

    Only those, but please consider making the mobile layout okay. Whenever we submit solution, always consider submit it full. So that we, other FEM lovers, could give you more feedbacks about the overall layout.

    But still, great work on your first solution here^

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