Submitted about 2 years ago

Stats Preview Card Component Using CSS Flex 💪 and Grid🌐

Fahim Hossain• 290

@Mr-NotSoCreative

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello Everyone!! 👋 This is my solution to the Stats Preview Card Component Challenge. I've used CSS display Flex property to horizontally and vertically align the card center, and used CSS display Grid property to design the card component. I'm concerned about the overlay color on the image. I don't know if I chose the color right or wrong. Here's the CSS rule for the overlay selector:

.violet-overlay {
  background-color: hsla(277, 89%, 48%, 0.445);
}

Feedback is welcome ☺️

Community feedback

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

Hello Fahim!

Congratulations for your new solution!

Nice work building the component, I've used the same approach with grid and flex.

To have the exact color as the challenge, use mix-blend-mode: multiply and opacity: 85%. Add this to the img selector and you'll see the difference.

Then say me if works 👍

Marked as helpful

Fahim Hossain• 290

@Mr-NotSoCreative

Posted about 2 years ago

@correlucas Working on it...

Fahim Hossain• 290

@Mr-NotSoCreative

Posted about 2 years ago

@correlucas It worked. Thanks for the tips 👍.

Adriano• 34,090

@AdrianoEscarabote

Posted about 2 years ago

Hi Fahim Hossain, how are you?

You did a great job on this challenge, but I have a few tips I think you'll like:

I noticed that the font you used is not the same as the example layout, if you had any difficulty finding the font that is in the example layout, when you download the files to create the project, there is a file called style-guide .md in it has some information about the colors and fonts used in the development of the project!

The rest is great! Hope it helps... 👍

Fahim Hossain• 290

@Mr-NotSoCreative

Posted about 2 years ago

@AdrianoEscarabote I've fixed the fonts. Did use the fonts right this time?

Adriano• 34,090

@AdrianoEscarabote

Posted about 2 years ago

@Mr-NotSoCreative yea!! congratulations on the result!

Fahim Hossain• 290

@Mr-NotSoCreative

Posted about 2 years ago

@AdrianoEscarabote Thanks!

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