@xtirian
Posted
Hey friend! Hope you are doing well.
I don't have suggestion, just want to ask you something. I really liked the way you solved the footer part. Can you explain me what is the logic?
footer::before {
content: '';
position: absolute;
background-color: rgba(77 150 169 / 0.9);
}
Basically you create an empty content before the footer with the background-color, am I right?
But, do you know why this content created before the footer isn't covered by the footer img?
I had to create a div inside the footer to be like a colored glass between the footer img and the content.
@sazzad88
Posted
@xtirian Hi
footer::before {
content: '';
position: absolute;
background-color: rgba(77 150 169 / 0.9);
inset: 0;
z-index: -1;
}
Here the magic happens mainly for position : absolute
which takes this component out of document flow. Then then by using inset
we are covering whole container.
Hope this helps
@sazzad88 thanks for sharing this, I usually used the top, left, right and bottom to cover everything.
This is really cool!