Skip to content
Submitted over 1 year ago

Responsive simple stats preview card component using HTML and CSS

samaelWebDev•240
@samaelwebdev
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

Hello World!!!

Here is the final version of this challenge, huge shout out to all of you for taking the time to help aspiring devs like myself improve every single day through your advice, tips and tricks. I've learned a lot from you guys and continue to do so every single day. one specific thing I could not figure out how to fix is the following .

  1. the purple gradient on top of my image does not cover the entire image.

  2. when viewing from my mobile device the is a scroll bar to go up and down a few pixels and I don't know how to fix it.

thank you so much in advance for all your help.

happy coding!!!

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    "I cannot figure how to add the gradient on top of my image (sad face)"

    Don't be sad, here is a way you can do it :) :

    First, give cardHeader a background color like hsl(277, 64%, 61%),

    Add these

    • mix-blend-mode: multiply;
    • opacity: .75; to headerImg like so: .headerImg { max-width: 100%; max-height: 100%; border-radius: .5rem; mix-blend-mode: multiply; opacity: .75; }

    Hope you find my feedback 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