Submitted almost 2 years ago

stats preview card using css grid

Ian Rioba• 450

@Rioba-Ian

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

It was my first time using grid and I got this slight challenge in my desktop design

When one sets the main as grid and reverses the grid row order right to left as I have done below

display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; direction: rtl;

What happens is that the fullstops(.) in my text go to the begining. As you will see in my live site. I had also set text-align for the h1 and p to text-align: left.

This is not part of the challenge but what are some of the resources that beginners in css animations can start with? A bit of animation would make my solution livelier than it currently is.

I would appreciate any feedback. It's been great learning.

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @Rioba-Ian, congratulations on your solution!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

img {
mix-blend-mode: multiply;
opacity: 80%;
}

Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

✌️ I hope this helps you and happy coding!

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