rewrite docs homepage, new graphics

1 files changed, 53 insertions, 46 deletions

diff --git a/docs/index.html b/docs/index.html
index f2b6c35d7..1789a507c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -81,7 +81,12 @@
   <div class="bs-docs-container">
     <h1>Bootstrap</h1>
     <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
-    <a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">Download Bootstrap <small>(v2.1.0)</small></a>
+    <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">Download Bootstrap</a></p>
+    <ul class="jumbo-links">
+      <li><a href="#">Customize</a></li>
+      <li><a href="#">GitHub project</a></li>
+      <li>Version 2.1.0</li>
+    </ul>
   </div>
 </div>
 
@@ -125,31 +130,30 @@
   </div>
 </header>
 
-<hr class="soften">
-
 <div class="marketing">
-  <h1>Designed for everyone, everywhere.</h1>
+
+  <h1>Introducing Bootstrap.</h1>
   <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
-  <div class="row">
-    <div class="span5">
-      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
-      <h2>Built for and by nerds</h2>
-      <p>We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.</p>
-
-      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
-      <h2>Cross-everything</h2>
-      <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
-
-      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
-      <h2>12-column grid</h2>
-      <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
-
-      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
-      <h2>Responsive design</h2>
-      <p>Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p>
+
+  <div class="row-fluid">
+    <div class="span4">
+      <img src="assets/img/bs-docs-twitter-github.png">
+      <h2>Built by nerds, for nerds.</h2>
+      <p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
     </div>
-    <div class="span5">
-      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
+    <div class="span4">
+      <img src="assets/img/bs-docs-responsive-illustrations.png">
+      <h2>Designed for everyone.</h2>
+      <p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p>
+    </div>
+    <div class="span4">
+      <img src="assets/img/bs-docs-bootstrap-features.png">
+      <h2>Packed with features.</h2>
+      <p>Utilize the 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./download.html">web-based Customizer</a> to make Bootstrap your own.</p>
+    </div>
+  </div>
+
+<!--       <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
       <h2>Living, coded examples</h2>
       <p>Bootstrap was designed first and foremost as a way to document not only the code of our components, but the visual and interaction design through live examples.</p>
 
@@ -165,34 +169,37 @@
       <h2>Built on LESS</h2>
       <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
     </div>
-  </div><!--/row-->
+  </div>
+-->
 
   <hr class="soften">
 
   <h1>Built with Bootstrap.</h1>
   <p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p>
-  <ul class="thumbnails example-sites">
-    <li class="span3">
-      <a class="thumbnail" href="http://soundready.fm/" target="_blank">
-        <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
-      </a>
-    </li>
-    <li class="span3">
-      <a class="thumbnail" href="http://kippt.com/" target="_blank">
-        <img src="assets/img/example-sites/kippt.png" alt="Kippt">
-      </a>
-    </li>
-    <li class="span3">
-      <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
-        <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
-      </a>
-    </li>
-<!--     <li class="span2">
-      <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
-        <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
-      </a>
-    </li>
- -->  </ul>
+  <div class="row-fluid">
+    <ul class="thumbnails example-sites">
+      <li class="span3">
+        <a class="thumbnail" href="http://soundready.fm/" target="_blank">
+          <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
+        </a>
+      </li>
+      <li class="span3">
+        <a class="thumbnail" href="http://kippt.com/" target="_blank">
+          <img src="assets/img/example-sites/kippt.png" alt="Kippt">
+        </a>
+      </li>
+      <li class="span3">
+        <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
+          <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
+        </a>
+      </li>
+      <li class="span3">
+        <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
+          <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
+        </a>
+      </li>
+    </ul>
+   </div>
 
 </div><!-- /.marketing -->