KPC
Kevin Powell - Community•2mo ago
Helgi

need help to understand

i am trying to do it like on screen but honestly i dont understand how to do it my codepen : https://codepen.io/etrbbr/pen/VYwmgZv
df
CodePen
Untitled
...
No description
4 Replies
Helgi
HelgiOP•2mo ago
I managed to place it on the black background, but I’m not entirely sure how to add other content after that.
Helgi
HelgiOP•2mo ago
i cant extend my black div down
No description
Chris Bolson
Chris Bolson•2mo ago
Probably the simplest way to do this would be to use a linear-gradient background "image" rather than having an actual element in the HTML, something like this. 
footer {
  background-image: linear-gradient(to bottom, transparent 50%, var(--alsmostblack) 50%);
}
footer {
  background-image: linear-gradient(to bottom, transparent 50%, var(--alsmostblack) 50%);
}
(you can adjust 50% to the position where you want the color to change from transparent to the dark color - this could also be an exact pixel value if required) Alternatively you could use a pseudo element which, again without having to add anything to the markup: 
footer {
  position: relative;
}
footer::before{
  content: '';
  position: absolute;
  inset: 50% 0 0 0; /* 50% is from the top so adjust the percentage or value to where you want the color change */
  background-color: var(--alsmostblack);
}
footer {
  position: relative;
}
footer::before{
  content: '';
  position: absolute;
  inset: 50% 0 0 0; /* 50% is from the top so adjust the percentage or value to where you want the color change */
  background-color: var(--alsmostblack);
}
Either of these methods will allow the footer to extend downwards according to the content. The only issue you will have is that the 50% value might need to be adjusted to a more precise value if you want the line to be at a specific point behind your cards
Helgi
HelgiOP•2mo ago
thanks a lot, i was thinking about gradient

Did you find this page helpful?