Submitted almost 3 years ago

Responsive Stats Card with Sass

Yunus Alif• 150

@frontendnus

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

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

@FahimMahmudJoy

Posted almost 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.

Yunus Alif• 150

@frontendnus

Posted almost 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.

Fidel Lim• 2,775

@fidellim

Posted almost 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 :)

Yunus Alif• 150

@frontendnus

Posted almost 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

Fidel Lim• 2,775

@fidellim

Posted almost 3 years ago

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

Chamu• 12,970

@ChamuMutezva

Posted almost 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

vishal wankhade• 495

@Vishal-wankhade

Posted almost 3 years ago

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

Please log in to post a comment

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