final touch

app/assets/javascripts/main.js

@@ -3,14 +3,7 @@
 
   $(document).ready(function(){
 
-    // Etendre/réduire le menu en mode mobile
     
-    $("#toggle-menu").click(function(){
-
-      $(".menu").slideToggle( "slow", function() {
-        // Animation complete.
-      });
-    })
 
     // Pour que le menu soit active en fonction du scroll
     $(document).on("scroll", onScroll);
@@ -39,7 +32,9 @@
     
     var options = {offset:"100%"};
 
-    $('#agence_bloc, #home_top, #services-bloc, #nous-bloc, #contact-bloc').waypoint(function(direction) {
+    
+
+    $('#agence_bloc, .inner_top, #services-bloc, #nous-bloc, #contact-bloc').waypoint(function(direction) {
 
       contentAnimation(this.element);
     },options);

app/assets/javascripts/public.js.coffee

@@ -8,7 +8,9 @@ $ ->
 
 
 
+  $("#toggle-menu").click -> 
     
+    $("#top_bar .menu").slideToggle()
 
 
 

app/assets/stylesheets/public.scss

@@ -151,6 +151,9 @@ $blue :#2dadb1;
   background: radial-gradient(ellipse at center, rgba(112,112,112,1) 0%, rgba(56,56,56,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#707070', endColorstr='#383838', GradientType=1 );
 
+  img{
+    margin-top:20px;
+  }
   
   .center{
     max-width:1200px;
@@ -260,6 +263,8 @@ h3{
     bottom:23px;
     
     
+
+
     text-transform:uppercase;
     font-size:20px;
     padding-right:15px;
@@ -312,6 +317,12 @@ h3{
       display:none;
     }
     
+    #logo-min{
+      display:block;
+      float:left;
+      padding:10px 0;
+    }
+
 
 
     .menu{
@@ -331,17 +342,25 @@ h3{
 
 #home_top{
 
+  #home_top_image{
     background:url('/Image-home.jpg') no-repeat center center;
       background-size:100%;
       background-size:cover;
-  padding-top:1px;
     height:850px;
+    
+    
+  }
+  padding-top:1px;
+  
   position:relative;
   color:white;
-  .inner{
+  .inner_t{
     margin-top:150px;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
   
-    max-width: 650px;
     h1{
       text-transform:none;
       font-weight:600;
@@ -701,8 +720,27 @@ padding:5px 8px;
   #toggle-menu{
     display:none;
   }
+  .top{
+    .menu{
+      display:block !important;
+    }
+  }
 }
+
+
+
+
 @media screen and (max-width:880px) {
+  
+  
+  #services-bloc{
+    img{
+      margin-top:40px;
+    
+    }
+  }
+  
+  
   body{
     padding-top:0px;
   }
@@ -710,6 +748,37 @@ padding:5px 8px;
     text-align:center;
   }
   
+  #home_top{
+    
+    #home_top_image{
+      height:400px;
+    }
+    
+    
+    
+    
+    .inner_t{
+      
+      h1{
+
+        font-size:20px;
+      
+        span{
+        
+          font-size:24px;
+        
+
+        }
+      }
+      
+      position:static;
+      padding:30px 0;
+      margin:0;
+      background:#F6F6F6;
+    
+    }
+  }
+
   #embarquez{
 
       margin:0px !important;
@@ -739,9 +808,10 @@ padding:5px 8px;
     }
     overflow:visible;
     .menu{
-      display:block;
-
+      display:none;
+      position:static;
       text-align:center;
+      padding-top: 50px;
 
       a{
         display:block;
@@ -825,4 +895,39 @@ padding:5px 8px;
 }
 
 
+
+
+
+.popup_container{
+  #popup_content{
+
+    margin:30px;
+    
+
+    .inner{
+      padding:0px;
+      overflow:auto;
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      z-index:5;
+    }
+    
+    
+    .center{
+      
+      padding:30px;
+    }
+
+
+
+
+  }
+}
+
+
+
+
 }

app/views/layouts/public.html.haml

@@ -71,6 +71,7 @@
 
 
     .top#top_bar
+      .center
         =link_to image_tag("/logo-min.png", :id => "logo-min"), "/"+@lang.slug+"/index.html"
         =link_to i(:navicon),"#", id:"toggle-menu"
         =link_to image_tag("/logo.png", :id => "logo"), "/"+@lang.slug+"/index.html"
@@ -98,10 +99,11 @@
 
 
         #home_top
-
-
+          #home_top_image
+          .inner_t
             .center
-            .inner
+              .inner_top.animated-block{:style => "max-width: 650px;"}
+                
                 %h1
                   l’agence de communication globale,
                   %span créateur d’ondes positives !
@@ -117,6 +119,11 @@
                   cohérente sur vos différents supports Print & Digitaux
 
           
+          
+          
+          
+          
+          
       =yield