Skip to content
Submitted 10 months ago

Stats Preview Card

Kamran Kiani•1,280
@kaamiik
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

  • Is the img setting in mobile and desktop mode in ‍css correct? Do I need to make changes to it?
  • Is my overall css structure correct? I used the mix-blend-mode property to change the color of image to purple. Did I use it correctly?
  • If you see any other problems in my ‍css and html, please give me feedback. Your feedback helps me a lot.

Community feedback

  • gfunk77•1,200
    @gfunk77Posted 10 months ago

    Hi! I think your solution looks great! Very well done. To answer your specific questions

    • For the img, I’d use max-width: 100%.
    • Yes, you used mix-blend-mode correctly. Well done.

    I’d offer some suggestions on your css reset to consolidate a few things. Based on what you have already I think the following would suffice and you could remove everything else:

    *, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    If you want to remove margins on specific heading that’s fine like your h1, p etc…

    I think the above will keep your project working exactly the same and clear out a lot of unnecessary code.

    Well done. I hope these suggestions help.

    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