Skip to content
Submitted about 1 year ago

Stats Preview Component | HTML + CSS

Hardikk Kamboj•190
@hady68
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

These are my questions:

  1. How can I make the responsivity better?
  2. How can I replace the Fixed sizing with dynamic size?
  3. How to style the Overlay properly?

Community feedback

  • Nathan Ray•230
    @NathanRayMPosted about 1 year ago

    Hello,

    Really nice job! I have a suggestion for the image that may be helpful to you. Instead of using the overlay, in CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity.

    Example:

    .image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}
    Marked as helpful
    0
    Hardikk Kamboj•190
    @hady68Posted about 1 year ago

    @NathanRayM Thanks a lot! This property completely skipped my mind!

    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