Saturday Night Live Logo - challenge

So I’m watching SNL and the logo pops up and I start wondering if I can recreate it. I have the basic structure of the logo down using bootstrap columns, but this doesn’t allow me to use background picture/color. Is there any other way other than bootstrap columns to get “Saturday Night Live” where “Night” is on the line below so that I can get a background picture?

Saturday Night Live Logox768

Open the codepen in a new screen to see it fully laidout

All you need is:

  color: dodgerblue;
  vertical-align: -0.7em;

No divs, no bootstrap columns, just wrap “NIGHT” in a <span class="drop" />.

-0.7em seems to be just about right, and will scale correctly with the text. You might need to change it if you change the font, though.

1 Like

Perfect! Thanks Lionel! I knew it was easier than I was making it out to be.

Also, try adding the following property after the background property:


Your “NIGHT” isn’t properly wrapped, which is why you’ve needed to add a wrapper to “LIVE” to nudge it back up to baseline. Make sure to close all your tags!

Also, I’m not sure how much of a perfectionist you want to be about this, but the original SNL logo actually has the “N” of “NIGHT” begin just before the right hand edge of the “Y” of “SATURDAY”. My own CSS skills aren’t up to the task of making this happen, but I’d be interested to know if there’s a way of doing so without breaking the semantics… perhaps some friendly experts will chime in on this one?