Add install_modules.sh.
Change listening port to 8080.
Include bootstrap-responsive.

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. See also:

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
Add comment.
Implement navbar.

￼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.

See also:

1. http://twitter.github.io/bootstrap/examples/ starter-template.html2. https://developer.mozilla.org/en-US/docs/ Web/Guide/CSS/Media_queries
Style heading and subheading.

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.

See also:1. www.google.com/fonts/specimen/Ubuntu
2. www.google.com/fonts/specimen/ Ubuntu#pairings3. http://twitter.github.io/bootstrap/base- css.html#typography
Set font size and line height for paragraphs.
Add video placeholder.

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"). See also:
    http://twitter.github.io/bootstrap/ scaffolding.html#gridSystem
Add action block.

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). See also:
    http://twitter.github.io/bootstrap/ scaffolding.html#gridSystem    https://developer.mozilla.org/en-US/docs/Web/ CSS/border
Add the thermometer.

The thermometer is straightforward. We just use the Bootstrap progress bar:
    http://twitter.github.io/bootstrap/ components.html#progress
Add pre-order button and social icons.

The main Preorder button is straightforward; we use the built in Bootstrap button class. For the social buttons we need to use bootstrap-social- buttons and this forces a FontAwesome import as well (both of which are in the <head>). See also:
    http://twitter.github.io/bootstrap/base- css.html#buttons    http://noizwaves.github.io/bootstrap-social- buttons
Add marketing copy.

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. See also:
    https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
    http://twitter.github.io/bootstrap/base-css.html#images    http://placehold.it
Add FAQ section.

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
Add footer.

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. See also:
    https://developer.mozilla.org/en-US/docs/Web/ CSS/color
Center headings.