Minor css fixes & GA & formspree

css/style.css

@@ -473,13 +473,13 @@ body.second .navbar
 	/*transition: all 0.3s ease-in-out;*/
 }
 .owl-page.active{
-	height: 8px !important;
+	height: 4px !important;
 }
 .owl-controls .owl-page {
     cursor: pointer;
     background: #000;
     width: 12%;
-    height: 2px;
+    height: 1px;
     display: inline-block;
     margin: 0;
 }
@@ -771,7 +771,7 @@ footer .back-to-top{
 	    margin-left: 0;
 	}
 	.carousel-indicators .active {
-	    height: 8px !important;
+	    height: 4px !important;
 	    margin: 0 -2px;
 	}
 	.carousel-indicators li,.carousel-indicators .active {

index.html

@@ -479,24 +479,42 @@
     <div class="container">
       <div class="row">
         <div class="col-md-8 col-md-offset-2">
-          <form>
+
+          <!-- NEW FORM -->
+          <form method="POST" id="contact-form">
+
+          </form>
+
+          <!-- END FORM -->
+          <form method="POST" id="contact-form">
+            <input type="hidden" name="_subject" value="Saburly Website contact" />
+
             <p class="say-hi">Say Hi!</p>
             <div class="form-group">
-              <input type="text" class="form-control" required="required"/>
+              <!-- <input type="text" name="name" class="name" maxlength="50" pattern="^.+$" required placeholder="Enter your full name" /> -->
+
+              <input type="text" name="name" class="form-control" maxlength="50" pattern="^.+$" required="required"/>
               <label class="control-label" for="input">Your Full Name</label><i class="bar"></i>
+
             </div>
             <div class="form-group">
-              <input type="text" class="form-control" required="required"/>
+              <input type="email" name="email" maxlength="320" pattern="^[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$" class="form-control" required="required"/>
+
               <label class="control-label" for="input">Your Email</label><i class="bar"></i>
             </div>
             <div class="form-group">
-              <textarea required="required" class="form-control"></textarea>
+              <textarea required="required" class="form-control" name="message"></textarea>
               <label class="control-label" for="textarea">Your message to us</label><i class="bar"></i>
             </div>
             <div class="form-group">
-              <button class="btn btn-default">SEND</button>
+              <button type="submit" class="btn btn-default" value="Send your message">Send your message</button>
             </div>
           </form>
+           <script>
+            var contactform =  document.getElementById('contact-form');
+            contactform.setAttribute('action', '//formspree.io/' + 'info' + '@' + 'saburly' + '.' + 'com');
+          </script>
+
         </div>
       </div>
     </div>
@@ -526,6 +544,32 @@
   </div>
 </footer>
 <!-- End footer -->
+      <script>
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-100791503-1', 'auto');
+  ga('send', 'pageview');
+
+      </script>
+
+   <script>
+var sent = false;
+window.addEventListener('scroll', function(e) {
+  var scrollTop = $(window).scrollTop();
+  var docHeight = $(document).height();
+  var winHeight = $(window).height();
+  var scrollPercent = (scrollTop) / (docHeight - winHeight);
+  var scrollPercentRounded = Math.round(scrollPercent*100);
+
+  if (scrollPercentRounded > 30 && !sent) {
+    ga('send', 'pageview');
+    sent = true;
+  }
+});
+      </script>