Design comparison
Solution retrospective
I wish for some confirmation with the image whether my solution is correct.
Community feedback
- @Disney-BanjePosted almost 2 years ago
Hello Adriano, I am doing well thanks for asking. Hope you are doing well as well. Thanks for the help with the image. I have to say, that I struggled a lot with that part yet I have realized that it is the same as in photoshop where we use blend mode for such things. And also thanks for the extension that will probably save a lot of time.
Thanks again, for taking the time to review and give me advice on my code
0 - @AdrianoEscarabotePosted almost 2 years ago
Hi Cousnay, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
The hero image has a color slightly different from the Figma design, if you want to match the color you can reach this using
mix-blend-mode
withmix-blend-mode: multiply;
. The multiply will make the image blend the div background and the opacity will make the image less evident and improve the blend between image/purple div. See the code below:img { mix-blend-mode: multiply; opacity: 0.8; }
avoid using
px
, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to remThe rest is great!
I hope it helps... 👍
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