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,7 +151,10 @@ $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;
   }
@@ -258,6 +261,8 @@ h3{
     position:absolute;
     right:0;
     bottom:23px;
+    
+    
 
 
     text-transform:uppercase;
@@ -311,6 +316,12 @@ h3{
     #logo{
       display:none;
     }
+    
+    #logo-min{
+      display:block;
+      float:left;
+      padding:10px 0;
+    }
 
 
 
@@ -331,17 +342,25 @@ h3{
 
 #home_top{
 
-  background:url('/Image-home.jpg') no-repeat center center;
+  #home_top_image{
-  background-size:100%;
+    background:url('/Image-home.jpg') no-repeat center center;
-  background-size:cover;
+      background-size:100%;
+      background-size:cover;
+    height:850px;
+    
+    
+  }
   padding-top:1px;
-  height:850px;
+  
   position:relative;
   color:white;
-  .inner{
+  .inner_t{
     margin-top:150px;
-
+    position:absolute;
-    max-width: 650px;
+    top:0;
+    left:0;
+    right:0;
+  
     h1{
       text-transform:none;
       font-weight:600;
@@ -701,14 +720,64 @@ 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;
   }
   div,h1,h2,h3,h4,h5,h6,p,.row-fluid,.row{
     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{
 
@@ -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,21 +71,22 @@
 
 
     .top#top_bar
-      =link_to image_tag("/logo-min.png", :id => "logo-min"), "/"+@lang.slug+"/index.html"
+      .center
-      =link_to i(:navicon),"#", id:"toggle-menu"
+        =link_to image_tag("/logo-min.png", :id => "logo-min"), "/"+@lang.slug+"/index.html"
-      =link_to image_tag("/logo.png", :id => "logo"), "/"+@lang.slug+"/index.html"
+        =link_to i(:navicon),"#", id:"toggle-menu"
+        =link_to image_tag("/logo.png", :id => "logo"), "/"+@lang.slug+"/index.html"
 
   
-      .menu
+        .menu
-        %ul
+          %ul
-          -links = [["Home","main"],["L'agence","agence_bloc"],["Nos services","services-bloc"],["Un peu de nous","nous-bloc"], ["Contact","contact-bloc"]]
+            -links = [["Home","main"],["L'agence","agence_bloc"],["Nos services","services-bloc"],["Un peu de nous","nous-bloc"], ["Contact","contact-bloc"]]
-          -links.each do |link|
+            -links.each do |link|
-            %li
+              %li
-              %a{:href => "#", :'data-link' => link[1].to_s, :onclick => "$('html,body').animate({scrollTop: ($('#"+link[1].to_s+"').offset().top - 50)},'slow');return false;"}
+                %a{:href => "#", :'data-link' => link[1].to_s, :onclick => "$('html,body').animate({scrollTop: ($('#"+link[1].to_s+"').offset().top - 50)},'slow');return false;"}
-                =link[0]
+                  =link[0]
 
 
-        .clean
+          .clean
 
 
 
@@ -98,25 +99,31 @@
 
 
         #home_top
+          #home_top_image
+          .inner_t
+            .center
+              .inner_top.animated-block{:style => "max-width: 650px;"}
+                
+                %h1
+                  l’agence de communication globale,
+                  %span créateur d’ondes positives !
+                %p
+                  Nous travaillons de la conception à la réalisation de votre identité
+                  %br
+                  visuelle
 
+                  adaptée à votre positionnement, afin de communiquer
+                  %br
+                  de manière
 
-          .center
+                  cohérente sur vos différents supports Print & Digitaux
-            .inner
-              %h1
-                l’agence de communication globale,
-                %span créateur d’ondes positives !
-              %p
-                Nous travaillons de la conception à la réalisation de votre identité
-                %br
-                visuelle
-
-                adaptée à votre positionnement, afin de communiquer
-                %br
-                de manière
-
-                cohérente sur vos différents supports Print & Digitaux
-
 
+          
+          
+          
+          
+          
+          
       =yield