Skip to content
Submitted over 3 years ago

Using CSS Grid to build this card component

Hugo Lindoso Correia•40
@HugoLc
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

Any feedback will be great!!

I had some trouble with the image. If anyone has a better solution to make it purplish I'd love to know.

Thank you.

Community feedback

  • Precious Olusola•280
    @codepraycodePosted over 3 years ago

    The violent accent color in the style guide is not exactly the kind of overlay that was on the image, I added a little bit of alpha to it and I got pretty much the same overlay color on the image as in the design image. Perhaps you could try it out to see.

    Happy Coding 👩‍💻🙂

    1
  • dewslyse•3,025
    @dewslysePosted over 3 years ago

    Hi @HugoLc 👋! Nice work overall.

    You can try adding a mix-blend-mode property to your img tag. Setting this property to multiply and adjusting the opacity worked for me.

    Also you may want to check the responsiveness of your card. The overflow-x property on your <body> tag is truncating the card elements.

    Hope this helps.

    Happy coding 💻

    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