Skip to content
Submitted almost 3 years ago

HTML5 CSS Flexbox - Responsive Stats Card Component

Christian Lam•20
@ui-Auxilary
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

  1. How do you recreate the overlay in the example? I tried a multiply blendmode, but couldn't replicate what was shown in the example.

  2. Would it have been better to use an <img > and an alt with an overlay div, instead of using the image as the background image for the aside?

  3. Other feedback and/or suggestions welcomed :)

Community feedback

  • Rohit Kumar•560
    @rohitKumar38344Posted almost 3 years ago

    Yes you can use a div inside the aside to act as an overlay and apply following properties on it: .overlay { position: absolute; background-color: hsla(277, 87%, 32%, 0.58); border-radius: 0px 5px 5px 0px; inset: 0px; /* Here you can use top, left, right, bottom properties also*/ } putting the background image set on aside which you set already.

    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