Fix image paths and carousel controls for carousel example

carousel.html

@@ -55,12 +55,6 @@ body {
   padding: 15px 20px;
 }
 
-/* Offset the responsive button for proper vertical alignment */
-.navbar .navbar-toggle {
-  margin-top: 10px;
-}
-
-
 
 /* CUSTOMIZE THE CAROUSEL
 -------------------------------------------------- */
@@ -75,16 +69,6 @@ body {
   z-index: 9;
 }
 
-.carousel-control {
-  height: 80px;
-  margin-top: 0;
-  font-size: 120px;
-  text-shadow: 0 1px 1px rgba(0,0,0,.4);
-  background-color: transparent;
-  border: 0;
-  z-index: 10;
-}
-
 .carousel .item {
   height: 500px;
 }
@@ -252,25 +236,21 @@ body {
 <!-- NAVBAR
 ================================================== -->
 <div class="navbar-wrapper">
-  <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
   <div class="container">
 
     <div class="navbar navbar-inverse">
-      <div class="navbar-inner">
+      <div class="container">
-        <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+	    <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+	      <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
+	      <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
+	      <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
+	    </a>
-        </button>
         <a class="navbar-brand" href="#">Project name</a>
-        <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
         <div class="nav-collapse collapse">
           <ul class="nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
-            <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu">
@@ -284,13 +264,12 @@ body {
               </ul>
             </li>
           </ul>
-        </div><!--/.nav-collapse -->
+        </div>
-      </div><!-- /.navbar-inner -->
+      </div>
-    </div><!-- /.navbar -->
+    </div>
-
-  </div> <!-- /.container -->
-</div><!-- /.navbar-wrapper -->
 
+  </div>
+</div>
 
 
 <!-- Carousel
@@ -298,7 +277,7 @@ body {
 <div id="myCarousel" class="carousel slide">
   <div class="carousel-inner">
     <div class="item active">
-      <img src="../assets/img/examples/slide-01.jpg" alt="">
+      <img src="../../assets/img/examples/slide-01.jpg" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Example headline.</h1>
@@ -308,7 +287,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../assets/img/examples/slide-02.jpg" alt="">
+      <img src="../../assets/img/examples/slide-02.jpg" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Another example headline.</h1>
@@ -318,7 +297,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../assets/img/examples/slide-03.jpg" alt="">
+      <img src="../../assets/img/examples/slide-03.jpg" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>One more for good measure.</h1>
@@ -328,8 +307,8 @@ body {
       </div>
     </div>
   </div>
-  <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
-  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
+  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div><!-- /.carousel -->
 
 
@@ -368,7 +347,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
+    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-chrome.png">
     <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -376,7 +355,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
+    <img class="featurette-image pull-left" src="../../assets/img/examples/browser-icon-firefox.png">
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -384,7 +363,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
+    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-safari.png">
     <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>