My website for the 'Build a Tribute Page'

My website for the 'Build a Tribute Page'
0

#1

Just thought I’d post my website for the Tribute Page. I based it on Elon Musk as I am a huge fan of his achievements and his work on creating a better future.

Here’s a link to the codepen: https://codepen.io/jshelley/full/ZJNLye/

Any feedback would be great :slight_smile:


#2

Design looks fantastic, really nice use and customization of Bootstrap.

Couple of things you could improve:

  • Your nav bar obscures the top of the sections linked to, so you don’t see the section headings. There are pure CSS hacks to fix this (IIRC it involves negative margin-top, position: relative, and positive top values, or something similar).
  • Your nav items responsively collapse to a hamburger menu when you resize the window small enough, but it’s non-functional (clicking it does nothing).
  • You haven’t always used the bootstrap classes semantically (e.g. -success and -danger). To be honest, this doesn’t really matter, especially on a small personal project (getting the HTML semantics right is important, but bootstrap classes are meaningless to the browser anyway). Still, it’s probably a habit best avoided if possible. In this case, you could customize the colors on :nth-child() elements to get a similar alternating color effect.

#3

Very nice project, good usage of Bootstrap; I agree with @lionel-rowe.

As for this, yeah. You’ll basically just need a negative margin-top and positive padding-top of the same value for your sections, and that should solve the issue.

So, for your case, it would be something like this:

#About, #Projects, #Philanthropy {
  padding-top:55px;
  margin-top:-55px;
}

#4

Thanks a lot for the feedback guys, appreciate your responses :slight_smile: