Implemented contact form

index.html

 																	<div class="hex-in2 outer-hex">
 																		<div class="hex inner-hex">
 																			<div class="hex-in1">
-																				<div class="hex-in2 hex-area" >
+																				<div class="hex-in2 hex-area no-partner" >
 																					<div class="gallery-info" style="top: -999px;">
 																					<ul class="socials">																			
 																																																									
 																	<div class="hex-in2 outer-hex">
 																		<div class="hex inner-hex">
 																			<div class="hex-in1">
-																				<div class="hex-in2 hex-area">
+																				<div class="hex-in2 hex-area no-partner">
 																					<div class="gallery-info" style="top: -999px;">
-																					<ul class="socials">
-																																			
-																					</ul>
+																					<ul class="socials"></ul>
 																						<a href="#" ><h4 class="white-color">Mould Group China</h4></a>
 																						
 																					</div>
 																	<div class="hex-in2 outer-hex">
 																		<div class="hex inner-hex">
 																			<div class="hex-in1">
-																				<div class="hex-in2 hex-area">
+																				<div class="hex-in2 hex-area no-partner">
 																					<div class="gallery-info" style="top: -999px;">
 																					<ul class="socials">																															
 																																					
 																	<div class="hex-in2 outer-hex">
 																		<div class="hex inner-hex">
 																			<div class="hex-in1">
-																				<div class="hex-in2 hex-area" >
+																				<div class="hex-in2 hex-area no-partner" >
 																					<div class="gallery-info" style="top: -999px;">
 																					<ul class="socials">
 																																																							
 																	<div class="hex-in2 outer-hex">
 																		<div class="hex inner-hex">
 																			<div class="hex-in1">
-																				<div class="hex-in2 hex-area" >
+																				<div class="hex-in2 hex-area no-partner" >
 																					<div class="gallery-info" style="top: -999px;">
 																					<ul class="socials">													
 																					</ul>
 																	<div class="hex-in2 outer-hex">
 																		<div class="hex inner-hex">
 																			<div class="hex-in1">
-																				<div class="hex-in2 hex-area" >
+																				<div class="hex-in2 hex-area no-partner" >
 																					<div class="gallery-info" style="top: -999px;">
 																					<ul class="socials">																			
 																																			
 				<h3>CONTACT FORM</h3>
 				<h5>Do you have any questions? Send us a message</h5>
 				<div class="log"></div>
-				<form method="post" action="action.php">
-					<p><input id="name-txt" class="input-txt" name="name" type="text" placeholder="Write your name here..."></p>
-					<p><input id="email-txt" class="input-txt" name="email" type="text" placeholder="Write your email here..."></p>
-					<p><input id="subject-txt" class="input-txt" name="subject" type="text" placeholder="Write your subject here..."></p>
-					<p><textarea id="message-txt" class="textarea-txt" name="message" cols="30" rows="10" placeholder="Write your message here..."></textarea></p>
-					<input type="hidden" id="sendContac" name="sendContact" value="send" />
-					<p><input id="submit" name="submit" type="submit" value="SEND"></p>
+				<form id="contact-form" method="POST" action="https://formspree.io/xnqgkykr">
+					<input id="name-txt" class="input-txt" name="name" type="text" placeholder="Write your name here..." required>
+					<input id="email-txt" class="input-txt" name="email" type="email" placeholder="Write your email here..." required>
+					<input id="subject-txt" class="input-txt" name="subject" type="text" placeholder="Write your subject here..." required>
+					<textarea id="message-txt" class="textarea-txt" name="message" cols="30" rows="10" placeholder="Write your message here..." required></textarea>
+					<input type="hidden" id="sendContac" name="sendContact" value="Send" />
+					<input id="submit" name="submit" type="submit" value="SEND"></p>
 				</form>				
 			</div><!-- end Contact Form -->
 			<div class="one_half contact-socials last">
 				<div class="hive contact-social wow swing facebook contact-socials-3s-first">
 					<div class="hex outer-hex">
 						<div class="hex-in1">
-							<a href="#">
+							<a href="https://www.facebook.com/DiligentSoftware/" target="_blank">
 							<div class="hex-in2 outer-hex">
 								<div class="hex inner-hex">
 									<div class="hex-in1">
 <script id="wow_js_file" type="text/javascript" src="scripts/wow.min.js"></script>
 <script id="waypoints_js_file" type="text/javascript" src="scripts/waypoints.js"></script>
 <script type="text/javascript" src="scripts/jquery.prettyPhoto.js"></script>
-<script type="text/javascript" src="scripts/jquery-cookie-master/src/jquery.cookie.js"></script>
 <script type="text/javascript" src="scripts/custom.js"></script>
 <script type="text/javascript" charset="utf-8" src="scripts/twitter/jquery.tweet.js"></script>
 <script type="text/javascript" src="scripts/jquery.typed.js"></script>

scripts/custom.js

             $(this).animate({width: progressValue +'%'}, 6000);
         });
     }
+
+    //contact form 
+
+    var form = document.getElementById("contact-form");
+    var button = $("#contact-form #submit");
+    var status = $(".log");
+
+    function success(){
+        //form.reset();
+        button.style = "display: none ";
+        status.addClass("successfully").text("Thanks!");
+    }
+
+    function error() {
+        status.addClass("error").text("Oops! There was a problem.");
+    }
+
+    button.on("submit", function(ev) {
+        ev.preventDefault();
+        button.style = "display: none ";
+        var data = new FormData(form);
+        ajax(form.method, form.action, data, success, error);
+    });
+
+    function ajax(method, url, data, success, error) {
+        var xhr = new XMLHttpRequest();
+        xhr.open(method, url);
+        xhr.setRequestHeader("Accept", "application/json");
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState !== XMLHttpRequest.DONE) return;
+            if (xhr.status === 200) {
+               success();
+            } else {
+                error();
+            }
+        };
+        xhr.send(data);
+    }
+
+    //end contact form
     $('#contact-wrap').waypoint(function() {
         animate();
     });  
     //nikola
 
- $('.clear_storage').on('click', function(e){
-    window.localStorage.clear();
- });
+    $('.clear_storage').on('click', function(e){
+        window.localStorage.clear();
+    });
   
- var get_id = localStorage.getItem('pg_id');
+    var get_id = localStorage.getItem('pg_id');
 
  // check page id, then scroll to its div
- if(get_id)
-     scrollToID(null, get_id, 300);
+    if(get_id)
+        scrollToID(null, get_id, 300);
 
  // click event to scroll to div
  //section link in nav which refer to section on homepage 
-$('.home_link').on('click', function(e){
-     e.preventDefault();
-     var id = '#'+$(this).data('id');
-     localStorage.setItem('pg_id', id);
-     var url = $(this).attr("href");
-     scrollToID(url, id, 300);
+    $('.home_link').on('click', function(e){
+        e.preventDefault();
+        var id = '#'+$(this).data('id');
+        localStorage.setItem('pg_id', id);
+        var url = $(this).attr("href");
+        scrollToID(url, id, 300);
      
- }); 
+    }); 
   //Link from our partners section on homepage which refer to section on portfolio page
-$('.partners_link').on('click', function(e){
-    e.preventDefault();
-    var id = '#'+$(this).data('id');
-    localStorage.setItem('pg_id', id);
-    var url = $(this).attr("href");
-    scrollToID(url, id, 300);
-    
-}); 
+    $('.partners_link').on('click', function(e){
+        e.preventDefault();
+        var id = '#'+$(this).data('id');
+        localStorage.setItem('pg_id', id);
+        var url = $(this).attr("href");
+        scrollToID(url, id, 300);
+        
+    }); 
 
-function scrollToID(url, id, speed) {
-    if(url!==null)
-    {
-        window.location.href = url;
+    function scrollToID(url, id, speed) {
+        if(url!==null)
+        {
+            window.location.href = url;
+        }
+        var offSet = 50;
+        var obj = $(id).offset();
+        var targetOffset = $(id).offset().top - offSet;
+        $('html,body').animate({ scrollTop: targetOffset }, speed);
     }
-    var offSet = 50;
-    var obj = $(id).offset();
-    var targetOffset = $(id).offset().top - offSet;
-    $('html,body').animate({ scrollTop: targetOffset }, speed);
-}
 
-window.addEventListener('scroll', function(e) {
-    var loc  = window.location;
-    if(loc.pathname.substring(loc.pathname.lastIndexOf('/') + 1, loc.pathname.length)=='index.html')
-    {
-        if( isOnScreen( $( '#intro-wrap' ) ) ) { /* Pass element id/class you want to check */
-            $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
-            $("nav li.intro-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
-        }
-        if( isOnScreen( $( '#about-wrap' ) ) ) { /* Pass element id/class you want to check */
-         
-            $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
-            $("nav li.about-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
-        }	
-        if( isOnScreen( $( '#our_partners-wrap' ) ) ) { /* Pass element id/class you want to check */
-           
-            $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
-            $("nav li.our_partners-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
-        }
-        if( isOnScreen( $( '#services-wrap' ) ) ) { /* Pass element id/class you want to check */
-           
-            $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
-            $("nav li.services-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
-        }	
-        if( isOnScreen( $( '#contact-wrap' ) ) ) { /* Pass element id/class you want to check */
-           
-            $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
-            $("nav li.contact-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
-        }
+    window.addEventListener('scroll', function(e) {
+        var loc  = window.location;
+        if(loc.pathname.substring(loc.pathname.lastIndexOf('/') + 1, loc.pathname.length)=='index.html')
+        {
+            if( isOnScreen( $( '#intro-wrap' ) ) ) { /* Pass element id/class you want to check */
+                $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
+                $("nav li.intro-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
+            }
+            if( isOnScreen( $( '#about-wrap' ) ) ) { /* Pass element id/class you want to check */
+            
+                $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
+                $("nav li.about-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
+            }	
+            if( isOnScreen( $( '#our_partners-wrap' ) ) ) { /* Pass element id/class you want to check */
+            
+                $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
+                $("nav li.our_partners-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
+            }
+            if( isOnScreen( $( '#services-wrap' ) ) ) { /* Pass element id/class you want to check */
+            
+                $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
+                $("nav li.services-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
+            }	
+            if( isOnScreen( $( '#contact-wrap' ) ) ) { /* Pass element id/class you want to check */
+            
+                $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
+                $("nav li.contact-wrap").addClass("active").append('<span class="nav-active-mark"></span>'); 
+            }
         
-    }	
-});
+        }	
+    });
 
     //nikola
     /*==========  Disables ==========*/

styles/custom.css

    
     background-color: #d7dbd8!important;
 }
+#gallery .gallery-item-overlay .hex-area.no-partner
+{
+    background-color: rgba(0,0,0,0.1)!important;
+}
 #gallery .gallery-item-overlay .outer-hex , #portfolio-header .gallery-item-overlay .outer-hex {
     background-color: #9e9e9e;
 }
 {
     background-color: rgba(153,60,149,0.7)!important;
 }
+#galery .gallery-item-overlay:hover .hex-area.no-partner
+{
+    background-color: #d7dbd8!important;
+}
+#gallery .section-triangle-grey
+{
+    /*background-color: #f6f6f6;*/
+    display: none;
+}
+#gallery
+{
+    position: relative;
+}
+#our_partners-wrap::before{
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 36px 63px 0px 63px;
+    border-color: #f6f6f6 transparent transparent transparent;
+    top: 0;
+    left:50%;
+    transform: translateX(-50%);
+    z-index: 11;
+}
+.successfully
+{
+    color:#00FF00;
+}
+.error
+{
+    background-color: #FF0000;
+}
 @media (max-width: 1024px){
     #gallery .gallery-box
 {