Looking to hire developers?
Stats preview card was done using flex-box to center the container, first time usage of CSS variables for my colors, the purple gradient overlay for the picture is slightly off as it was my first time doing it so if anyone has any pointers that would be awesome. Notes for future to change, use relatives units such as; rem and em, instead of fixed units like px to make it more responsive. Let me know how I did!
@correlucas
Posted
👾Hello Tom, congratulations for your solution!
You did good using the gradients to create the overlay effect, if you want a quick way to apply that, just insert the image in the html using the <img> tag and apply mix-blend-modes to reach the purple overlay effect.
img {
display: block;
width: 100%;
mix-blend-mode: multiply;
opacity: 0.7;
}
Hope it helps, congrats!
Marked as helpful
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
