Skip to content
Submitted over 2 years ago

Stats preview card done w/ flex

Tom Golding•250
@ComanderPotato
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

Stats preview card was done using flex-box to center the container, first time usage of CSS variables for my colors, the purple gradient overlay for the picture is slightly off as it was my first time doing it so if anyone has any pointers that would be awesome. Notes for future to change, use relatives units such as; rem and em, instead of fixed units like px to make it more responsive. Let me know how I did!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Tom, congratulations for your solution!

    You did good using the gradients to create the overlay effect, if you want a quick way to apply that, just insert the image in the html using the <img> tag and apply mix-blend-modes to reach the purple overlay effect.

    img {
display: block;
width: 100%;
    mix-blend-mode: multiply;
    opacity: 0.7;
}

    Hope it helps, congrats!

    Marked as helpful
    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