@correlucas
Posted
πΎHello @Delteuz, congratulations on your first solution!
Nice code and nice solution! You did a good job here putting everything together. Iβve some suggestions for you:
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%;
}
Use units as rem
or em
instead of px
to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but all sizes as well.
IMPROVE YOUR WORKFLOW
using VSCODE you can code your whole page using px
and then in the end use a plugin called px to rem here's 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
@Delteuz
Posted
@correlucas Thanks a lot Lucas, this suggestion is what I need :D While I try to replicate the overlay effect with my own way, I didn't know I also could use mix-blend-mode here as this is my first time encountering this type of CSS property. I will also incorporate next time the use of rem to improve it's accessibility.