Replacing multiple IDs with a single reusable div. Using data-ui-component to keep sections sensible.

# Front-end code fix

## Replacing 3 IDs with a single div.
I thought it would be a better idea to have one reusable class for the style rules shared among three IDs. Part of #hero was replaced into .content__header and the rest of #hero, #features, and #mission was replaced into the .content object. Generally, IDs aren't reusable and should be used only for hooking JS into a site.
#hero --> .content__header
#hero, #mission, #features --> .content

## How has describing the site's content changed?
The ID names seemed sensible enough. #features had content describing the features, and #mission had the mission statement.  To not lose this sensibility while reading the code, I used the data-ui-component="" attribute. Example, data-ui-component="features". 

## What's next?
There are still changes that can be made with the same mindset.  Styling elements can lead to be hazardous as a site grows. We can change this by making more sensible, abstract, loosely coupled classes and only using IDs for JavaScript hooking.  However, I believe this was a good start. I'd also like to see if we can find a better responsive web design solution for smaller screen sizes.

*Hopefully this makes sense, didn't break anything, and you enjoy these ideas, Cheers!*