Skip to content
Submitted over 3 years ago

Stat card preview with html and css

Anthony Idoko•10
@anthonyidoko
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

my image is in black and white. what should I have done differently? And please point out my errors overall.

Community feedback

  • Sebastien•290
    @SebystienPosted over 3 years ago

    Hi Anthony, Here's a couple of things you might like to try. For the width of the card, you can use a max-width to adjust the size of the card on bigger screen. You don't want it to get too big.

    For the img, there are several way you can get it done. For me, I set up a div and use the background: linear-gradient( rgba(color and alpha), rgba(color and alpha)), url(img link)

    and you can use a mix-blend-mode. and don't forget to change the font-family and you can add a little bit of padding :)

    Enjoy!

    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