[ADD]Access Popup

wp-content/themes/nap/assets/css/main.css

@@ -168,6 +168,10 @@ input[type=file] {
 ::-moz-placeholder { color:#232E7C !important ; font-size: 11px;opacity: 0.5}
 input:-moz-placeholder{color:#232E7C !important; font-size: 11px;opacity: 0.5}
 input:-ms-input-placeholder{color:#232E7C !important; font-size: 11px;opacity: 0.5}
+.access-form ::-webkit-input-placeholder { color:#FFF ! important; font-size: 9px;opacity: 1}
+.access-form ::-moz-placeholder { color:#FFF !important ; font-size: 9px;opacity: 1}
+.access-form input:-moz-placeholder{color:#FFF !important; font-size: 9px;opacity: 1}
+.access-form input:-ms-input-placeholder{color:#FFF !important; font-size: 9px;opacity: 1}
 svg, svg * {
   pointer-events: none;
   cursor: pointer;
@@ -194,6 +198,11 @@ select,option{
   opacity: 1 !important;
   font-size: 11px !important;
 }
+#login{
+  background: transparent url(img/login.svg) no-repeat 6% 50%;
+  background-size: 11px;
+  padding-left: 25px;
+}
 /*==========================================================================
 II/  Helper..............Helper classes
 ========================================================================== */
@@ -275,6 +284,10 @@ II/  Helper..............Helper classes
   background: #05162b;
   color: #fff;
 }
+.pink-bg{   
+  background: #FF6A5F;    
+  color: #fff;    
+}
 .search-btn{
   font-size: 0px;
   height: 14px;
@@ -299,7 +312,7 @@ II/  Helper..............Helper classes
   opacity:1;
 }
 .half-col{
-  width : calc(49% - 2px);
+  width : calc(49% - 4px);
 }
 .marker:before{
   content: "";
@@ -404,6 +417,10 @@ II/  Helper..............Helper classes
   background: #FF6A5F;
   color: #fff;
 }
+.white-btn{   
+  background: #FFF;   
+  color: #FF6A5F;   
+}
 .no-wave:after{
   display: none;
 }
@@ -809,6 +826,7 @@ aside.news-wrapper {
   overflow-x: hidden;
   display: none;
   height: 100%;
+  max-width: 430px; 
 }
 .news-header{
   position: relative;
@@ -1894,6 +1912,62 @@ div.wpcf7-mail-sent-ok{
 .woocommerce-product-gallery{
   display: none !important;
 }
+/* ------------------------*/ /* ---------->>> Acces Popup <<<-----------*/ /* ------------------------*/
+
+/*POPUP*/
+.popup-container {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  width: 100%;
+  z-index: 99999999;
+  display: none;
+  background: rgba(18,22,45,0.5);
+}
+.popup {
+  width: 365px;
+  position: fixed;
+  top: 50%;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  margin: 0 auto;
+}
+.popup-first.animated{
+}
+.popup-first  .close-btn {
+  top: 11px;
+  right: 11px;
+  background: transparent;
+}
+.popup-first .inner {
+  width: 202px;
+  position: relative;
+  background: transparent;
+  text-align: center;
+  margin: 0px auto;
+  padding: 28px 20px 35px;
+}
+.popup-first h2{
+  padding-bottom: 10px;
+}
+.access-form{
+  width: 100%;
+}
+.access-form input{
+  background: transparent;
+  border: 1px solid #fff;
+  letter-spacing: 0.2px;
+  padding-left: 12px;
+}
+.access-form .white-btn{
+  margin-top: 9px;
+}
 /* --------------*/ /* ---------->>> Loading <<<-----------*/ /* --------------*/
 #loading-container{
   background-color: #fff;

wp-content/themes/nap/assets/js/main.js

@@ -50,6 +50,20 @@ $(function(){
 		$('html').css('overflow','auto');
 		//$('.load-page').removeClass('fadeInUp').addClass('animated fadeOutUp');
 	});
+	$(document).on('click','.acces li',function(e){
+		e.stopImmediatePropagation();
+		$('.popup-container').fadeIn();
+		$('.popup-first').removeClass('fadeOutDown ').addClass('animated visible-elem pulse');
+
+	});
+	//Close popup
+	$('.popup-first .close-btn').click(
+		function(){
+			$('.popup-first').removeClass('visible-elem pulse').addClass('fadeOutDown');
+			setTimeout(function(){
+				$('.popup-container').fadeOut('slow');
+			},0);
+		});
 	checkWhiteColor = function(color) {
 		var white = ["#fff","#ffffff","white" ];
 		if ($.inArray(color, white) != -1){
@@ -168,7 +182,6 @@ $(function(){
 		container = $(this).parent().parent();
 		container.find('.article-bg').css({"background-color": selectedColor, opacity:'0.1'});
 		container.find('img').attr({'src' : selectedImage , 'data-link' : linkProduct});
-		console.log(linkProduct);
 		tl.fromTo(container.find('img'),1,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
 	}
 	$.fn.animatePageScroll = function(element, duration) {
@@ -298,7 +311,6 @@ function animateOnScroll(){
 		onScroll: true,
 		onResize: false,
 		callbackOnInit: function() {
-			console.log('Initialised');
 		},
 		callbackOnAnimate: function(element) {
 		}
@@ -349,7 +361,6 @@ function onScroll(event){
 	onScrollCover();
 	$(items).each(function () {
 		var currLink = $(this);
-		console.log(currLink);
 		var refElement = $(currLink.attr("href"));
 		//console.log(currLink);
 		if (refElement.position().top - 20 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {

wp-content/themes/nap/footer.php

 </div>
 <div class="right-panel-wrapper abs-full fixed transition">
   <div id="load-page" class="load-page transition"></div>
-	</div>
+</div>
 <footer class="blue-bg">
     <?php wp_footer(); ?>
     <div class="footer font-small animated fadeInUp">
-        <div class="row">
+        <div class="row acces">
             <ul>
                 <li><a href="#">accès pro</a></li>
             </ul>
@@ -20,6 +20,24 @@
         </div>	
     </div>
 </footer>
+<div class="popup-container">
+    <div class="popup">
+        <div class="popup-first pink-bg hidden-elem" style="display: block;">
+            <span class="close-btn"></span>
+            <div class="inner">
+                <div class="close" id="close-popup"></div>
+                <h2 class="crete small-title" >Accès pro</h2>
+                <div class="access-form row">
+                    <form action="" id="nl-form" method="post">
+                        <input type="text" name="login" id="login" placeholder = "Identifiant" />
+                        <input type="password" name="pwd" id="pwd" placeholder = "Mot de passe" />
+                        <button class="btn rounded white-btn" type="submit" class="nl-btn">Se connecter</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 <script src="<?php echo home_url('wp-content/themes/nap/assets/js/jQuery-v1-11.min.js') ?>"></script>
 <script src="<?php echo home_url('wp-content/themes/nap/assets/js/jquery-ui.min.js') ?>"></script>
 <script src="<?php echo home_url('wp-content/themes/nap/assets/js/vendors/TweenMax.min.js') ?>"></script>