Browse Source

A better static footer than .navbar-fixed-bottom ?

Frederic G. MARAND 9 years ago
parent
commit
fc3c5dbc62
2 changed files with 26 additions and 203 deletions
  1. 26 67
      css/main.css
  2. 0 136
      index.html

+ 26 - 67
css/main.css

@@ -1,81 +1,40 @@
-/*body {*/
-    /*padding-top: 70px;*/
-/*}*/
+/* Sticky footer styles: unneeded with .navbar-fixed-bottom */
 
-.footer {
-    background: #887;
-    color: white;
-}
-
-.footer a {
-    color: #c0fff0;
-}
-
-.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;*!
+  min-height: 100%;
+  position: relative;
 }
-*/
 
 body {
-    /*margin-left: -25%;*/
-}
-.footer {
-    bottom: 0;
-    width: 100%;
-    /* Set the fixed height of the footer here */
-    height: 200px;
+  /* Margin bottom by footer height */
+  margin-bottom: 220px;
 }
+
 .footer {
-    color: #efefef;
-    background-color: #333;
-}
-.footer a {
-    color: #9af7fe;
-}
+  bottom: 0;
 
-.footer .glyphicon {
-    font-size: 14px;
-}
+  /* Set the fixed height of the footer here */
+  height: 220px;
 
-.quote {
-    background-color: #444;
-    color: #e1e1e1;
-    margin: 2em 0;
+  position: absolute;
+  width: 100%;
 }
-.quote blockquote {
-    border: none;
-    margin: 0;
-}
-.quote footer {
-    color: #c1c1c1;
+
+@media only screen and (max-width: 768px) {
+  body {
+    margin-bottom: 400px;
+  }
+
+  .footer {
+    height: 400px;
+  }
 }
 
+/* Other styles */
 
-.transport-systems .row {
-    margin-bottom: 2em;
+.footer {
+  background-color: #333;
+  color: #efefef;
+  padding: 30px 0;
 }
-.transport-systems .glyphicon {
-    font-size: 14px;
-}
+

+ 0 - 136
index.html

@@ -96,142 +96,6 @@
       </div>
     </div>
 
-    <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>
-
-    <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='row text-center'>
-        <div class='transporter col-md-3 col-md-offset-1 well'>
-          <h3>Transporter</h3>
-          <ul class="list-unstyled">
-            <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='space-elevator col-md-3 col-md-offset-1 well'>
-          <h3>Space Elevator</h3>
-          <ul class="list-unstyled">
-            <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='rocketbus col-md-3 col-md-offset-1 well'>
-          <h3>RocketBus</h3>
-          <ul class="list-unstyled">
-            <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='quote'>
-      <div class='container'>
-        <blockquote>
-          <p>A dream that became a reality and spread throughout the stars.</p>
-          <footer>Captain Kirk in <cite title="Source Title">Whom Gods Destroy</cite></footer>
-        </blockquote>
-      </div>
-    </div>
-
-    <div class='container'>
-      <div class='row'>
-        <div class='col-md-8'>
-          <h2>Plan Your Trip Today!</h2>
-
-          <ul class='nav nav-tabs'>
-            <li class='active'><a href='#time'>Todays Times</a></li>
-            <li><a href='#deals'>Hot Deals</a></li>
-            <li><a href='#forecast'>Forecast</a></li>
-          </ul>
-
-          <div class='tab-content'>
-            <div class='tab-pane fade active' id='time'>
-              <p>Todays Time here</p>
-            </div>
-            <div class='tab-pane fade' id='deals'>
-              <p>Deals here</p>
-            </div>
-            <div class='tab-pane fade' id='forecast'>
-              <p>Forecast</p>
-            </div>
-          </div>
-        </div>
-
-        <div class='col-md-3 col-md-offset-1'>
-          <div class='panel-group'>
-            <div class='panel panel-success'>
-              <div class='panel-heading'>
-                <h4 class='panel-title'>
-                  <a href='#systemsOperational' data-toggle="collapse" data-parent='.panel-group'>All Systems Operational</a>
-                </h4>
-              </div>
-              <div id='systemsOperational' class='panel-collapse collapse in'>
-                <div class='panel-body'>
-                  <p>All systems are operational</p>
-                  <ul class='list-unstyled'>
-                    <li><i class='glyphicon glyphicon-ok'></i>  Transporters</li>
-                    <li><i class='glyphicon glyphicon-ok'></i>  Space Elevator</li>
-                    <li><i class='glyphicon glyphicon-ok'></i>  RocketBus</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            <div class='panel panel-warning'>
-              <div class='panel-heading'>
-                <h4 class='panel-title'>
-                  <a href='#weatherAlert' data-toggle="collapse" data-parent='.panel-group'>Weather Alert</a>
-                </h4>
-              </div>
-              <div id='weatherAlert' class='panel-collapse collapse'>
-                <div class='panel-body'>
-                  <p>The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:</p>
-                  <ul class='list-unstyled'>
-                    <li><strong>February 9th, 21:43</strong></li>
-                    <li><strong>May 18, 19:82</strong></li>
-                    <li><strong>July 4, 08:42</strong></li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            <div class='panel panel-danger'>
-              <div class='panel-heading'>
-                <h4 class='panel-title'>
-                  <a href='#transportationWarning' data-toggle="collapse" data-parent='.panel-group'>Transportation Generals Warning: Transporters</a>
-                </h4>
-              </div>
-              <div id='transportationWarning' class='panel-collapse collapse'>
-                <div class='panel-body'>
-                  <p>Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <div class='footer'>
       <div class='container'>
         <div class='row'>