4.7: wells, assignment content.

css/main.css

@@ -10,4 +10,68 @@
 .features .glyphicon {
     font-size: 32px;
     text-shadow: 1px 1px 5px #ccc;
+}
+
+.features .glyphicon {
+    font-size: 32px;
+}
+
+/*
+html {
+    position: relative;
+    zoom: 60%;
+    -ms-zoom: 60%;
+    -moz-transform: scale(0.6);
+    -moz-transform-origin: center top 0px;
+    -o-transform: scale(60%);
+    -o-transform-origin: center top 0px;
+    -webkit-transform: scale(60%);
+    -webkit-transform-origin: center top 0px;
+
+
+    !*-moz-transform:  scale(0.6,0.6);*!
+    !*-moz-transform-origin: left center;*!
+}
+*/
+
+body {
+    /*margin-left: -25%;*/
+}
+.footer {
+    bottom: 0;
+    width: 100%;
+    /* Set the fixed height of the footer here */
+    height: 200px;
+}
+.footer {
+    color: #efefef;
+    background-color: #333;
+}
+.footer a {
+    color: #9af7fe;
+}
+
+.footer .glyphicon {
+    font-size: 14px;
+}
+
+.quote {
+    background-color: #444;
+    color: #e1e1e1;
+    margin: 2em 0;
+}
+.quote blockquote {
+    border: none;
+    margin: 0;
+}
+.quote footer {
+    color: #c1c1c1;
+}
+
+
+.transport-systems .row {
+    margin-bottom: 2em;
+}
+.transport-systems .glyphicon {
+    font-size: 14px;
 }

index.html

@@ -15,13 +15,13 @@
         <h1>Blasting off with Boostrap</h1>
       </div>
 
-      <div class="row">
+      <div class="row well well-lg">
         <div class="col-xs-12 col-md-6">
           <h2>The fastest way to space</h2>images
           <p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
 
-          <button>Take the tour</button>
-          <button>Book Tickets now</button>
+          <button type="button" class="btn btn-lg btn-default">Take the tour</button>
+          <button type="button" class="btn btn-lg btn-primary">Book Tickets now</button>
         </div>
 
         <div class="visible-md visible-lg col-sm-6">
@@ -50,53 +50,97 @@
           <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on
             your wallet, and easiest way to make friends.</p>
         </div>
-
       </div>
+    </div>
 
-      <div class="footer row">
-        <div class="col-sm-3 text-justify">
-          <h4>Who we are</h4>
-          <p><em>Blasting off with Bootstrap</em> is the fastest way to space.
-            If you want to travel to stars,
-            <a href="http://www.codeschool.com">book your ticket today</a>!</em></p>
+    <div class="quote">
+      <div class="container">
+        <blockquote>
+          <p>Any sufficiently advanced technology is indistinguishable from magic.</p>
+          <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>
+        </blockquote>
+      </div>
+    </div>
 
-          <p><a href="http://www.codeshool.com">More About Us
-            <i class="glyphicon glyphicon-arrow-right"></i></a>
-          </p>
+    <div class="container transport-systems">
+      <div class='row'>
+        <div class='col-md-10 col-md-offset-1'>
+          <h2>Our Transport Systems</h2>
+          <p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p>
         </div>
+      </div>
 
-        <div class="col-sm-2 col-sm-offset-1">
-          <h4>Links</h4>
+      <div class='row text-center'>
+        <div class='transporter col-md-3 col-md-offset-1 well'>
+          <h3>Transporter</h3>
           <ul class="list-unstyled">
-            <li><a href="index.html">Home</a></li>
-            <li><a href="tickets.html">Tickets</a></li>
-            <li><a href="stations.html">Stations</a></li>
+            <li>8 second travel time</li>
+            <li>Chance of death only 1 in 7,593</li>
+            <li>Low price of only $15.99!</li>
           </ul>
+          <p><button class="btn btn-info"><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>
         </div>
-
-        <div class="col-sm-3">
-          <h4>Reach out</h4>
+        <div class='space-elevator col-md-3 col-md-offset-1 well'>
+          <h3>Space Elevator</h3>
           <ul class="list-unstyled">
-            <li><a href="#">About</a></li>
-            <li><a href="#">Contact us</a></li>
-            <li><a href="#">Blog</a></li>
-            <li><a href="#">Twitter</a></li>
-            <li><a href="#">Facebook</a></li>
+            <li>8 hour scenic ride</li>
+            <li>Only 1 horrific death per 12,456</li>
+            <li>Only $45.99 if you book today!</li>
           </ul>
+          <p><button class="btn btn-info"><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>
         </div>
-
-        <div class="col-sm-3">
-          <h4>Get in touch</h4></h3>
-          <p>Want to get in touch with us?<br />
-            There's a few easy ways.</p>
+        <div class='rocketbus col-md-3 col-md-offset-1 well'>
+          <h3>RocketBus</h3>
           <ul class="list-unstyled">
-            <li><i class="glyphicon glyphicon-globe"></i> Orlando, FL</li>
-            <li><i class="glyphicon glyphicon-phone"></i> 1-555-blast-off</li>
-            <li><i class="glyphicon glyphicon-envelope"></i> <a href="mailto:blastingoff@codeshool.com">blastingoff@codeshool.com</a></li>
+            <li>8 minute scenic ride</li>
+            <li>Plunging death rate of under 1/100k</li>
+            <li>$74.99 lets you blast off today!</li>
           </ul>
+          <p><button class="btn btn-info"><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>
+        </div>
+      </div>
+    </div>
+
+    <div class='footer'>
+      <div class='container'>
+        <div class='row'>
+          <div class='col-md-3 col-sm-4 col-xs-6'>
+            <h4>Who We Are</h4>
+            <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
+            <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
+          </div>
+
+          <div class='col-md-offset-1 col-sm-2 col-xs-6'>
+            <h4>Links</h4>
+            <ul class='list-unstyled'>
+              <li><a href='/'>Home</a></li>
+              <li><a href='tickets.html'>Tickets</a></li>
+              <li><a href='stations.html'>Stations</a></li>
+            </ul>
+          </div>
 
-          <p>Blasting Off With Bootstrap<br />
-          &copy;2214.</p>
+          <div class='clearfix visible-xs'></div>
+
+          <div class='col-sm-2 col-xs-6'>
+            <h4>Stay in Touch</h4>
+            <ul class='list-unstyled'>
+              <li><a href='about.html'>About</a></li>
+              <li><a href='contact.html'>Contact Us</a></li>
+              <li><a href='/blog'>Blog</a></li>
+              <li><a href='http://twitter.com/codeschool'>Twitter</a></li>
+              <li><a href='http://facebook.com/codeschool'>Facebook</a></li>
+            </ul>
+          </div>
+
+          <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>
+            <h4>Contact Us</h4>
+            <ul class='list-unstyled'>
+              <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>
+              <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>
+              <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>
+            </ul>
+            <p>Blasting Off With Bootstrap &copy;2214.</p>
+          </div>
         </div>
       </div>
     </div>