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.
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').
Add other media query for landscape phones
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).
The thermometer is straightforward. We just use the Bootstrap progress bar
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>).
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
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
Finally, we do a little styling of the footer using the font color property, and removing old markup. We keep it light but just barely readable, so as not to attract attention
Fix JS/CSS resources URL