add viewport and css for responsive design
add navbar
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.
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").
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).
add the boostrap's progress bar
add preorder button and social buttons
add marketing section

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
add the faq

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
 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.
do not close the meta tag
wrong display for width > 480px
wrong divs