@correlucas
Posted
πΎHello , congratulations on your solution!
Nice code and nice solution! You did a good job here putting everything together. Iβve some suggestions for you:
1.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%;
}
2.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
βοΈ I hope this helps you and happy coding!
Marked as helpful
@chanduKunche
Posted
@correlucas Thank you for the tips. They will help me improve my code.