Hi there,
I’m curious about the separation line between the presentation and the challenge on every FCC challenge:
How is it done ? (Especially the changing thickness)
Thanks!
It could be done in multiple ways:
- An
<hr>tag (probably this way) - A
<div>element with a width, height and background color - A
border-bottom
Thanks @b3u, I should have mentioned that this is the changing thickness which makes me curious.
1 Like
I think you can put an absolute div above a hr (or probably a css :after selector) with a gradient that goes from full opaque in the left to full transparent in the center and back to full opaque in the right. Just guessing though, you can take a look at your browser inspect element to see how it is done.
You’re absolutely right @ghukahr, I’ve found this in the source
background-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.7),hsla(0,0%,100%,0))
Thanks!