Submitted almost 3 years ago

STATS PREVIEW CARD COMPONENT

accessibility

Omar Jalal•110

@omar-jalal

A solution to the Stats preview card component challenge

Preview Code

Solution retrospective

What did you find difficult while building the project?
Which areas of your code are you unsure of?
Do you have any questions about best practices?

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hello @tiger8707, congratulations on yoursolution!

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%;
}
```
✌️ I hope this helps you and happy coding!
Marked as helpful

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