Changed port to development 8080
HW4 Step 0:
The very first step towards a responsive design is
the inclusion of the viewport tag and
the bootstrap-responsive css file (in the <head>).
In this case, bootstrap-responsive is included in
bootstrap-combined-no-icons.min.css
Then, within the body, we use row-fluid classes
within the container class.
1) twitter.github.io/bootstrap/
scaffolding.html#responsive
2) blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap
3) stackoverflow.com/a/12270322
HW4 Step 1:
The navbar is a bit magical. If you notice, in the
mobile view it collapses into a dropdown menu!
We adapt this from one of the examples in the
starter-template, with one twist: we use a media
query for browsers with less than 980px width to
fix an issue where the navbar is pushed too far
down on mobile browsers.
1) http://twitter.github.io/bootstrap/examples/
starter-template.html
2) https://developer.mozilla.org/en-US/docs/
Web/Guide/CSS/Media_queries
HW4 Step 2:
For the .heading and .subheading class, we use
the built-in p.lead from Bootstrap and also
import and use paired Google Fonts to make the
style look a little less default.
1) www.google.com/fonts/specimen/Ubuntu
2) www.google.com/fonts/specimen/
Ubuntu#pairings
3) http://twitter.github.io/bootstrap/basecss.html#typography
HW4 Step 3:
For the video placeholder, we make use of
placehold.it, which is great for quick mockups.
we also use an offset of one column in the grid
to indent the video from the side ("span5
offset1").
1) http://twitter.github.io/bootstrap/
scaffolding.html#gridSystem
Style changes to .video etc for step 3
HW4 Step 4:
This one is a little tricky. First, we create a new 12
column grid within the enclosing span8 and split
it into three span4's. Then we style them in such
a way that the big number is up top in an h3, and
the small descriptor is underneath in a p. Finally,
we use linediv-l and linediv-c in an interesting
way with the media queries, to give vertical lines
when these spans are laid out horizontally (in a
desktop view) and horizontal lines when laid out
vertically (in a mobile view).

http://twitter.github.io/bootstrap/
scaffolding.html#gridSystem

https://developer.mozilla.org/en-US/docs/Web/
CSS/border
HW4 Step 5:
The thermometer is straightforward. We just use
the Bootstrap progress bar:

http://twitter.github.io/bootstrap/
components.html#progress
HW4 Step 6:
The main Preorder button is straightforward; we
use the built in Bootstrap button class. For the
social buttons we need to use bootstrap-socialbuttons and this forces a FontAwesome import
as well (both of which are in the <head>).
http://twitter.github.io/bootstrap/basecss.html#buttons
http://noizwaves.github.io/bootstrap-socialbuttons
Removed remaining styling from initial index.html
HW4 Step 7:
The marketing copy uses the text-align CSS
property to justify the text and the img-polaroid
Bootstrap class to style the images, but is
otherwise fairly straightforward. As with the
content further up the page, the overall content
is structured as two five column spans, each
offset 1 span from the side

https://developer.mozilla.org/en-US/docs/Web/
CSS/text-align
http://twitter.github.io/bootstrap/basecss.html#images
http://placehold.it
HW4 Step 8:
To get the accordion effect for the FAQ, we
introduce a little JS from the Bootstrap
framework. We need to import jquery.js for
bootstrap.js to work, so both of those go in the
<head>. Then we use the built-in code from
Bootstrap to add an accordion:
http://twitter.github.io/bootstrap/
javascript.html#collapse
HW4 Part 9:
Finally, we do a little styling of the footer using
the font color property. We keep it light but just
barely readable, so as not to attract attention.

https://developer.mozilla.org/en-US/docs/Web/
CSS/color
Remove obsolete first version body content
Bug fixes