Michael Jackson - Tribute Page

Hi All -
I’ve been working on my tribute page and I would like to know what you all thought!

Like to my tribute page:

Let me know what you think :slight_smile:

Gotta put this out there… AWESOME TOPIC. Course, I’m a fan :slight_smile: but besides that, it looks like a great starting point!

Some quick things: when you scroll to the right, the top headline and the content don’t seem to line up. To help with this a bit, maybe change the width on your .container-fluid and make it a bit more responsive like…

.container-fluid { max-width: 1250px; width: 100%; margin: 0 auto; }

For your font link to the google font yellowtail, you want to declare this in the <head></head> tag rather than the <header></header>. This is a bit tricky in codepen, but click on the gear that appears next to the HTML tab for the settings. Take your code: <link href="https://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet"> and paste it into the box for "Stuff for <head>". That should take care of that. This way you can nest your two header divs inside of the <header></header> tag and take better control of it that way.

Another thing, not sure if you looked into this, but you could also look into making the font a bit more responsive so that it scales. You can do this using a few different techniques via native css or even using javascript. Check these out:


My favorite is to use VW’s where you declare a default font size and a starting vw size, then declare at what media query you want it to start to scale and lastly, what media query you want it to stop scaling. If you use this method, you have to be sure to declare a stopping point or else it will break for mobile devices.

Play around with it a bit to find the right fit when doing Responsive Web Development. It looks like you are on the right track using Bootstrap! Keep working at it :grin: