finish exercise

Author: HelloListen

index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width;initial-scale=1"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="description"
-          content="Project management software to keep your team in sync and focused, so you can get back to work">
+    <meta name="description" content="Project management software to keep your team in sync and focused, so you can get back to work">
     <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"/>
     <link href="style.css" rel="stylesheet"/>
     <script src="listen.js"></script>
@@ -30,6 +29,7 @@
         </div>
     </div>
 </header>
+<!--end of header-->
 <div class="jumbotron">
     <div class="container">
         <div class="row">
@@ -62,6 +62,7 @@ <h2>Beautiful Easy <br>Project Management</h2>
         </div>
     </div>
 </div>
+<!--end of jumbotron-->
 <div class="container">
     <div class="row tab">
         <div class="col-md-4 spotlight tab-title">
@@ -250,18 +251,48 @@ <h1><span class="icon-pro-large"></span>$0<small>PER MONTH</small></h1>
     </div>
 </div>
 <div class="container contact">
-    <div class="row">
-        <div class="col-md-10 col-md-offset-3">
+    <div class="row contact-row">
+        <div class="col-md-9 col-md-offset-2">
             <span>Get started in 30 seconds</span>
             <a href="javascript:void(0);" class="btn btn-success btn-lg">Get Started Free</a>
             <span>Questions?<a href="javascript:void(0);">CONTACT US</a></span>
         </div>
     </div>
 </div>
-<footer class="container">
+<footer class="container-fluid">
     <div class="row">
-        <div class="col-md-6">
-
+        <div class="col-md-6 col-md-offset-1">
+            <div class="row">
+                <div class="col-md-3">
+                    <ul>
+                        <li><a href="javascript:void(0);">Blog</a></li>
+                        <li><a href="javascript:void(0);">Live support chat</a></li>
+                        <li><a href="javascript:void(0);">Develop API</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-3">
+                    <ul>
+                        <li><a href="javascript:void(0);">Contact us</a></li>
+                        <li><a href="javascript:void(0);">Privacy policy</a></li>
+                        <li><a href="javascript:void(0);">Terms of services</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-3">
+                    <ul>
+                        <li><a href="javascript:void(0);">Twitter</a></li>
+                        <li><a href="javascript:void(0);">Facebook</a></li>
+                        <li><a href="javascript:void(0);">Google Plus</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row" id="blimp-crew">
+        <div class="col-md-7 col-md-offset-1" >
+            <span>Made by the </span><a href="#">Blimp Crew </a><span>in </span><a href="#">San Juan, Puerto Rico</a>
+        </div>
+        <div class="col-md-4 fbg pull-right">
+            <span class="copyright">&copy; 2012-2014 Blimp LLC.</span>
         </div>
     </div>
 </footer>

myjs.js

@@ -6,21 +6,39 @@ function slideshow(){
     var ol=document.getElementById("dot");
     var olis=ol.getElementsByTagName("li");
     //console.log(olis);
+    autoPlay(0);
     for(var i=0;i<olis.length;i++){
         olis[i].index=i;
         olis[i].onmouseover=function(){
+            clearInterval(timer);
             for(j=0;j<olis.length;j++){
                 olis[j].className="";
                 ulis[j].className="";
-                ulis[this.index].style.transition="all 2s ease 0.2s"
             }
             this.className="olActive";
             ulis[this.index].className="liActive";
-            ulis[this.index].style.transition="all 2s ease 0.2s"
+        }
+        olis[i].onmouseout=function(){
+            autoPlay(this.index);
         }
     }
+    function autoPlay(_index){
+         timer=setInterval(function(){
+            for(var k=0;k<olis.length;k++){
+                olis[k].className="";
+                ulis[k].className="";
+            }
+            ulis[_index].className="liActive";
+            olis[_index].className="olActive";
+             _index++;
+            if(_index==olis.length){
+                _index=0;
+            }
+        },2000);
+    }
 }
 
+
 function tabNews(){
     var titles=document.getElementsByClassName("tab-title");
     //console.log(titles);
@@ -53,7 +71,7 @@ function blockQuote(){
     //console.log(left);
     var timer=setInterval(function(){
         wrapcontent.style.left=left+"px";
-        left=left-1100;
+        left-=1100;
         if(left<-1100){
             left=0;
         }

style.css

@@ -192,3 +192,23 @@ div.contact{
     padding: 40px 0;
     font-size: 20px;
 }
+div.contact-row{
+    text-align: center;
+}
+footer.container-fluid{
+    background: #3f3f3f;
+    padding: 50px 0;
+    position: relative;
+    color: gray;
+}
+footer.container-fluid a{
+    color: gray;
+}
+div.fbg span.copyright{
+    color: gray;
+}
+#blimp-crew{
+    margin-top: 40px;
+    margin-left: -33px;
+    padding-left: 63px;
+}