Skip to content
Submitted about 2 years ago

Stats card component using HTML/CSS

Bryan•130
@MamieNorris
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

Hey guys,

I've only done the desktop version of the mokup. I didn't really think about the responsivity when I set up the project. So, since all my heights and widths are fixed values it's screws everything up. I'll comeback later to fix it.

I had a tiny issue concerning the image. Oddly, the main container a tiny bit too large on the image' side and I don't know why. I had to shrink the whole container as I wasn't able to make the image fit. Moreover, I used the filter property to turn the image purple (the original is black&white) but I'm not sure if it was the right solution since the color doesn't match the reference.

Thanks for stopping by !

Community feedback

  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Great to see you posting your solution up here, Bryan! And welcome to the frontendmentor.io community as well!

    For coloring the image, instead of using the filter properties, I can suggest you to use the mix-blend-mode with opacity - that should be much easier to remember and to implement as well.

    Plus, the most important key of responsiveness for web pages is to set a dynamic width/height numbers, not fixed ones. You can try max-width and max-height instead of straight on width/height, play around a bit and see if you can match the design better.

    Hope this helps, and happy coding!

    1
    Bryan•130
    @MamieNorrisPosted about 2 years ago

    @NationsAnarchy thanks for your feedback ! I just checked mix-blend-mode on Google and it looks like a banger for this problem. Thabks I'll keep it in a corner of my head for next time !

    Have a good one Scott :D

    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