@AdrianoEscarabote
Posted
Hello Sami NASRI, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
Consider using rem for font size .If your web content font sizes are set in 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. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem
To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:
img {
mix-blend mode: multiply;
opacity: 80%;
}
You can read this content which is explaining these effects with mix-blend-mode: click here
The remainder is excellent.
I hope it's useful. 👍
Marked as helpful
@SilverWings47
Posted
@AdrianoEscarabote Thank you my friend for the helpful feedback. I implemented the mix-blend-mode with the image and it looks great. I also changed the font-size from px to rem.
