From 51f1c264fed385def6948f9137292f227668c699 Mon Sep 17 00:00:00 2001 From: Nicolas Bally Date: Fri, 29 Jul 2016 22:49:16 +0200 Subject: [PATCH] final touch --- app/assets/javascripts/main.js | 13 +-- app/assets/javascripts/public.js.coffee | 4 +- app/assets/stylesheets/public.scss | 125 ++++++++++++++++++++++-- app/views/layouts/public.html.haml | 61 +++++++----- 4 files changed, 156 insertions(+), 47 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 518553a..e8412ee 100755 --- a/app/assets/javascripts/main.js +++ b/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); diff --git a/app/assets/javascripts/public.js.coffee b/app/assets/javascripts/public.js.coffee index dafe720..e179df0 100755 --- a/app/assets/javascripts/public.js.coffee +++ b/app/assets/javascripts/public.js.coffee @@ -8,7 +8,9 @@ $ -> - + $("#toggle-menu").click -> + + $("#top_bar .menu").slideToggle() diff --git a/app/assets/stylesheets/public.scss b/app/assets/stylesheets/public.scss index 0d5796f..1204c81 100755 --- a/app/assets/stylesheets/public.scss +++ b/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; - background-size:100%; - background-size:cover; + #home_top_image{ + background:url('/Image-home.jpg') no-repeat center center; + background-size:100%; + background-size:cover; + height:850px; + + + } padding-top:1px; - height:850px; + position:relative; color:white; - .inner{ + .inner_t{ margin-top:150px; - - max-width: 650px; + position:absolute; + 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; + } + + + + + } +} + + + + } diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index 19a9f6c..df48de0 100755 --- a/app/views/layouts/public.html.haml +++ b/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" - =link_to i(:navicon),"#", id:"toggle-menu" - =link_to image_tag("/logo.png", :id => "logo"), "/"+@lang.slug+"/index.html" + .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" - .menu - %ul - -links = [["Home","main"],["L'agence","agence_bloc"],["Nos services","services-bloc"],["Un peu de nous","nous-bloc"], ["Contact","contact-bloc"]] - -links.each do |link| - %li - %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] + .menu + %ul + -links = [["Home","main"],["L'agence","agence_bloc"],["Nos services","services-bloc"],["Un peu de nous","nous-bloc"], ["Contact","contact-bloc"]] + -links.each do |link| + %li + %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] - .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 - .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 - + cohérente sur vos différents supports Print & Digitaux + + + + + + =yield