Skip to content
Submitted over 2 years ago

Stats-Preview-Card-Component Solution

POTB•330
@Peteonthebeat
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

Difficult Challenging Part

Probably, the most difficult part was fine-tuning the the filter property's colour knob, opacity, brightness, and contrast so the image looks maximally close to the example; hopefully it really does.

Areas I'm Unsure of Maybe the <li> tags might look a bit better when the width is about 1024...

Questions about best Practices: I'd be happy to know whether the approach I took to colorise the image is a good practice. I find it somewhat more intuitive than using a <div class="overlay></div>, so I used it.

Regards!

Community feedback

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

    Hey Pete! Nice solution there, congrats on completing it.

    Firstly - for your question: I personally feel like using an outside div with a class named overlay is the best way we can tackle the image coloring part. If you want something closer to the design file, I can suggest you to look at the CSS properties named mix-blend-mode (as someone else have suggested that to me before on my own solution) - which is much easier to remember and implement.

    Lastly, I did notice that we have a few imperfections when adjusting the screen width to test the responsiveness of the card. For example - when I line up my screen width to exactly 1440px, I can see that the image and the content card are misaligned - which is a bit unfortunate. It should be much better if you can use the browser's DevTools (F12 key) to test things out first, and make sure that we don't have any elements anomalys.

    Give these ideas a try and let me know if that helps you out :D Cheers!

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