Skip to content
Submitted over 3 years ago

Responsive Stats Card with Sass

Yunus Alif•150
@frontendnus
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

Why i can't use background-image: linear-gradient( rgba(var.$soft-violet, 0.5) ), url(url image); to overlay color on the image? I have to use absolute position to display colors and images.

The responsive image is very trick for me. Any feedback for me?

Community feedback

  • Fahim Mahmud•165
    @FahimMahmudJoyPosted over 3 years ago
    • I don't know about sass. However, what I did was I simply put the image inside a div, set the background-color of that div to the required color. Then, I used mix-blend-mode: multiply on that image, and it gave me the exact color.
    • And to position the card exactly at the center, you could set a min-height of 100vh to the body and display it as flex. Then using justify-content and align-items to center, the card will be centered in no time. Hope that helps a bit.
    1
    Yunus Alif•150
    @frontendnusPosted over 3 years ago

    @FahimMahmudJoy well that's right, I forgot to use flex to center the card. This project is also a bit tricky because I didn't see the design in figma so just guessing for each element size.

    0
  • Fidel Lim•2,775
    @fidellimPosted over 3 years ago

    Hi, have you tried using background instead of background-image? This is what I've done for this challenge. You can have a look at my live site here: https://stats-preview-card-component-fidel.netlify.app/. Then this is the link for the code: https://github.com/fidellim/Stats-Preview-Card-Component/blob/main/index.css . Let me know if it works :)

    1
    Yunus Alif•150
    @frontendnusPosted over 3 years ago

    @fidellim Hello, your project is very good. I haven't tried it. I used bg-image because I studied it on online course and it works. And I'll try to use a background later, thanks for the feedback

    0
    Fidel Lim•2,775
    @fidellimPosted over 3 years ago

    @frontendnus no worries! Good luck on learning frontend :)

    0
  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    The answer to your question - for the overlay since the image is a background image use background-blend-mode. For a detailed explanation see this article exploring Blend modes

    0
  • vishal wankhade•495
    @Vishal-wankhadePosted over 3 years ago

    Your image is not looking completely fit like as shown in the design apart from that everything is good.

    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