Skip to content
Submitted over 1 year ago

Stats Preview Card

P
Kamran Kiani•2,780
@kaamiik
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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.
Code

Please log in to post a comment

Log in

Community feedback

  • gfunk77•1,270
    @gfunk77

    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.

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