Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Component

auriga 210

@auriga2124

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Dear all, This is my first time using BEM.

Community feedback

Lucas 👾 104,440

@correlucas

Posted

👾Hello @auriga2124, Congratulations on completing this challenge!

Your solution its almost done and I’ve some tips to help you to improve it:

1.The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

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

2.Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

To save your time you can code you whole page using px and then in the end use a VsCode plugin called px to rem heres the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

✌️ I hope this helps you and happy coding!

Marked as helpful

0

auriga 210

@auriga2124

Posted

@correlucas I just tried your tip about mix-blend-mode CSS property at my local house, it's work well. Thanks a lot Lucas.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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