css Grid

Hello Al-Baraa, Salam.

Great work finishing your first FEM project! I hope you'll continue to build more projects here :) Everything seems fine as it works well for desktop and mobile devices. I just have one suggestion regarding the color overlay of the image. You can remove the ::after selector and add the color within the image tag itself. Have a look at this code:

.container .img {
    background-image: url(images/image-header-desktop.jpg);
    background-color: hsl(277, 64%, 61%);
    background-blend-mode: multiply;
}

This will solve your issue. The trick here is the background-blend mode. This will enable image and color to mix together. Also, blend-mode: multiply, will make the color darker. Hence, it will look like the design made by FEM. You also don't need to add position: relative to your image class.

I hope it helps :)