Skip to content
Submitted over 2 years ago

Stats Preview Card Component

Shashree Samuel•9,260
@shashreesamuel
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

Feel free to leave any feedback on my solution. It is greatly appreciated.

Thank you in advance

Community feedback

  • Ayush Nath•360
    @Beats-AyushPosted over 2 years ago

    Nice attempt at this challenge. Some issues-

    • Use flexbox instead of grid for 1-dimensional layouts.
    • Use linear-gradient for the overlay on the image with appropriate filter.
    • Make it responsive by using media-queries.
    • Try to center the card.

    Hope this helps.

    2
    Benjamin Thorpe•280
    @sparrowslPosted over 2 years ago

    @Beats-Ayush to back this up, he can also use the ::before and ::after pseudo class in CSS for the overlay, while playing with the opacity or the alpha value.

    1

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