FCC design question

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)

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