Design comparison
Solution retrospective
Dear all, This is my first time using BEM.
Community feedback
- @correlucasPosted about 2 years ago
👾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 theimg
orpicture
selector:img { mix-blend-mode: multiply; opacity: 75%;}
2.Use units as
rem
orem
instead ofpx
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 helpful0@auriga2124Posted about 2 years ago@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 GitHubJoin 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