@AdrianoEscarabote
Posted
Hello Marta, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.
native HTML5 reference elements:
<body>
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</body>
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. 👍