adding image slider

image slider to about page using vanilla js.

about.html

@@ -22,6 +22,8 @@
 
     <!-- Custom styles for this template -->
     <link href="css/clean-blog.min.css" rel="stylesheet">
+    <link href="clean-blog.css" rel="stylesheet">
+
 
   </head>
 
@@ -81,13 +83,30 @@ <h1>About Me</h1>
           <p>"Imagine if..." was my mantra as a child. Imaginitive by nature and my fascination with transfomation kindled this 
              desire to keep imagining new possibilities!
           </p>
-          <p>I'm also an avid sports fan! Here's a trivia question for you. What was one of the first uses of augmented 
-             reality to the masses? Answer: SportsVision in 1998 used the 1st and Ten line in a Football game!
-          </p>
         </div>
       </div>
     </div>
 
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-8 col-md-10 mx-auto">
+            <div class="container">
+                <div class="row">
+                  <div class="col-lg-4">
+                      <p>Things I like to do.</p>
+                      <p>I'm also an avid sports fan!</p>
+                  </div>
+                  <div class="col-lg-8">
+                      <img name="slide" width="400" height="200" />
+                  </div>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+
+
+
     <hr>
 
     <!-- Footer -->
@@ -134,7 +153,7 @@ <h1>About Me</h1>
 
     <!-- Custom scripts for this template -->
     <script src="js/clean-blog.min.js"></script>
-
+    <script src="js/img_slider.js"></script>
   </body>
 
 </html>

clean-blog.css

@@ -157,7 +157,7 @@ header.masthead {
   header.masthead .post-heading,
   header.masthead .site-heading {
     padding: 200px 0 150px;
-    color: #ffffff; }
+    color:#eeeeee;; }
     @media only screen and (min-width: 768px) {
       header.masthead .page-heading,
       header.masthead .post-heading,
@@ -286,7 +286,7 @@ form .form-group:first-child .floating-label-form-group {
   border-top: 1px solid #eeeeee; }
 
 footer {
-  padding: 50px 0 65px; margin-top:40px;}
+  padding: 50px 0 65px; }
   footer .list-inline {
     margin: 0;
     padding: 0; }
@@ -375,15 +375,13 @@ footer {
   opacity: 0;
   transition: .5s ease;
   background-color: #008CBA;
-  height:170px;
 
 }
 
 .contact.git .overlay:hover,
 .contact.ghibli .overlay:hover,
 .contact.huron .overlay:hover,
-.contact.kali .overlay:hover,
-.contact.menu .overlay:hover
+.contact.kali .overlay:hover
  {
   opacity: 0.8;
 }
@@ -392,7 +390,7 @@ footer {
   opacity: 0.8;
 }*/
 
-.wurk{color: white;}
+
 
 
 .text h3 a{
@@ -416,4 +414,10 @@ footer {
   text-decoration: none;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
+}
+
+/**********over-lay***********/
+.row.do {
+  width: 59%;
+  margin-left: 16%;
 }

img_slider.js

@@ -0,0 +1,29 @@
+var i = 0; 			// Start Point
+var images = [];	// Images Array
+var time = 4000;	// Time Between Switch
+
+// Image List
+images[0] = "img/image1.jpg";
+images[1] = "img/image2.jpg";
+images[2] = "img/image3.jpg";
+images[3] = "img/image4.jpg";
+
+// Change Image
+function changeImg(){
+	document.slide.src = images[i];
+
+	// Check If Index Is Under Max
+	if(i < images.length - 1){
+	  // Add 1 to Index
+	  i++; 
+	} else { 
+		// Reset Back To O
+		i = 0;
+	}
+
+	// Run function every x seconds
+	setTimeout("changeImg()", time);
+}
+
+// Run function when page loads
+window.onload=changeImg;