Skip to content
Submitted almost 2 years ago

Solution Stats preview card component

mbedon•80
@mbedon
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

I didn't find this challenge difficult because my last challenge was the NFT preview card component and it used the image overlay, so making the transparent purple around the image was easy, but I had to check back to my NFT code. I think that having the Figma and design sketches would be more helpful, but for now I have to work with the design pictures. I hope that in the future I'll suscribe to the pro version.

Community feedback

  • Adriano•38,120
    @AdrianoEscarabotePosted almost 2 years ago

    Hi mbedon, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    The hero image has a color slightly different from the Figma design, if you want to match the color you can reach this using mix-blend-mode with mix-blend-mode: multiply;. The multiply will make the image blend the div background and the opacity will make the image less evident and improve the blend between image/purple div. See the code below:

    img { 
    mix-blend-mode: multiply; 
    opacity: 0.8;
}

    The rest is great!

    I hope it helps... 👍

    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