need help to implement it
https://codepen.io/etrbbr/pen/VYZNyxM
The question is how to make it look like in the picture, where there is a large gray background section in the header, and this section overlaps part of the cards. How can this be done?
7 Replies
the easiest way is to fake it. You can set a linear gradient on the first element below the header that transitions abruptly somewhere in the gradient from the header background color to the color used by the rest of the page
in this case, there's an even easier (though not as responsive) method, because it's just working with the header color. You just set the gradient on the background: https://codepen.io/jochemm/pen/MYgRrPY
I wouldn't actually use the second option, cause if the header ever changes size, it could cause issues
What if I just apply this to the entire body?
body {
background: linear-gradient(to bottom, rgb(254, 250, 250) 25%, white 10%);
height: 100vh;
}
Of course, I'll need to adjust it with media queries when resizing the screen, but... I don't know, this should work too, right? It even looks better this way.
that's what I did in the second link
and yeah, using mediaqueries can be a decent solution, it's just not as responsive by default
thankts for the tips ! appreciate it