Add an image carousel to front page

templates/index.html

@@ -1,5 +1,34 @@
 {% extends "master.html" %}
+{% block header %}
+<!--<h1>Welcome</h1>
+<p class="lead">To the Mid-Atlantic Fibershed's fiber directory</p>-->
+{% endblock header %}
 {% block content %}
+<div class="hero-unit">
 <p>Welcome to the Mid-Atlantic Fibershed. This site is inspired by Rebecca Burgess's <a href="http://fibershed.com">Fibershed</a> project, but the specific focus of this site is DC, Maryland, Virginia, Delaware, and Pennsylvania. These states are all reachable within 100 miles of Washington, DC.</p>
-<p>This is a directory of farmers, artisans, and businesses in the region. Have you ever considered a garment made locally from fibers grown locally? If you want to make such a thing happen, you can find locally-grown fibers, weavers or knitters to turn it into fabric, and tailors to sew it.  At least, that's the theory. This site is new, so if you have suggestions for additions to the database, please <a href="/contact/">contact</a> us!</p>
+	<div id="myCarousel" class="carousel span9 offset1">
+		<div class="carousel-inner">
+			<div class="item active">
+				<img src="{{ STATIC_URL}}img/fiber.jpg"/>
+				<div class="carousel-caption">
+					<h4>Local Fiber</h4>
+					<p>Maryland has large breeder associations for both sheep and alpacas.</p>
+				</div>
+			</div>
+			<div class="item">
+				<img src="{{ STATIC_URL}}img/yarn.jpg"/>
+				<div class="carousel-caption">
+					<h4>Handspun Yarn</h4>
+					<p>Some local breeders, farmers, and hobbyists handspin their own yarn.</p>
+				</div>
+			</div>
+		</div>
+		<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+	    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+		</div>
+<p style="clear:both">This is a directory of farmers, artisans, and businesses in the region. Have you ever considered a garment made locally from fibers grown locally? If you want to make such a thing happen, you can find locally-grown fibers, weavers or knitters to turn it into fabric, and tailors to sew it.  At least, that's the theory. This site is new, so if you have suggestions for additions to the database, please <a href="/contact/">contact</a> us!</p>
+<!--
+<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=201893534839897508042.0004b7d6e66eec23c0ac5&amp;ie=UTF8&amp;t=h&amp;ll=39.270537,-77.12677&amp;spn=1.020624,1.757813&amp;z=9&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?msa=0&amp;msid=201893534839897508042.0004b7d6e66eec23c0ac5&amp;ie=UTF8&amp;t=h&amp;ll=39.270537,-77.12677&amp;spn=1.020624,1.757813&amp;z=9&amp;source=embed" style="color:#0000FF;text-align:left">Mid-Atlantic Fibershed</a> in a larger map</small> -->
+</div>
+</div>
 {% endblock %}

templates/master.html

@@ -83,10 +83,8 @@
 		  </div><!--/.well -->
 		</div><!--/span-->
 		<div class="span9">
-		  <div class="hero-unit">
-			{% block content %}
-			{% endblock content%}
-   		  </div>
+		  {% block content %}
+		  {% endblock content%}
 		</div> <!--/span-->
 	    </div><!--/row-->
       <hr>
@@ -106,6 +104,15 @@
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="{{ STATIC_URL }}js/jquery.min.js"></script>
     <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
+	<script type="text/javascript">
+		!function ($) {
+			$(function(){
+				$('.carousel').carousel();
+			})
+
+		}(window.jQuery)
+	</script>
+
 
   </body>
 </html>