Meet Landing Page

For the footer, one thing I did to make it more match the design is to set a height for it. I think I used 300px.

Also, for the color of the footer. Using color modes is just one way to get something similar.

Another good technique is where you basically add the photo to the footer first, and then add "another colored layer" over the photo, using pseudo-class ::before on the footer element with the photo background. Then you can adjust the opacity of this layer to get the effect you want. Kind of like something you would do in photoshop instead of using blend modes. Just add a transparency colored layer over the photo.

If you never used pseudo class ::before it is very useful, but it took me awhile to figure it out, but it is working knowing.

This is what I did, it worked for me.

background: linear-gradient( hsla(192, 37%,48%, 0.9), hsla(192, 37%,48%, 0.9) ), url(../assets/mobile/image-footer.jpg);

I haven't used the background-blend-mode, so I don't know if that is the reason.