Skip to content
Submitted over 1 year ago

Using Vanilla HTML/SCSS for Stats Preview Card

ilyemm•140
@ilyemm
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

Learning how to do the hover overlay from the NFT card definitely helped me learned how to do the overlay for this component. It definitely feels like I'm getting a little better.

I didn't have any trouble with this! I've been practicing the syntax for SCSS/SASS. Any feedback on my SCSS/SASS code would be appreciated. Thanks!

Community feedback

  • Shahzaman Abbasi•170
    @Shazee17Posted over 1 year ago

    Great job on the solution!

    I noticed that you have reduced the opacity on your 'purple img overlay' class to get that effect. That does seem like a reasonable option. However, to get it to look even closer to the design, I would recommend using the CSS property: mix-blend-mode: multiply; on your img overlay class.

    But again, that's just a suggestion. Learning different blend-modes could be fun.

    Happy Coding!

    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