diff --git a/app/assets/javascripts/application.coffee b/app/assets/javascripts/application.coffee index de176e8..fe3b5b0 100644 --- a/app/assets/javascripts/application.coffee +++ b/app/assets/javascripts/application.coffee @@ -6,6 +6,7 @@ #= require jquery.animate-enhanced.min #= require jquery.tagcanvas + #= require jquery.bxslider.min @@ -21,7 +22,20 @@ bottom = 0 prev_link = "" $("document").ready -> position_img_now = -> - $("#large .large-img").css("margin-top", (( $(window).height() - $("#large .large-img").height() - 100) / 2 )+"px") + + + + + + imgheight = $("#large .large-img").height() + imgwidth = $("#large .large-img").height() + + + + $("#large .large-img").css + "margin-top" :((( $(window).height() - $("#large .large-img").outerHeight()) / 2 )+"px") + #"width" : "100px" + position_img = -> @@ -32,13 +46,32 @@ $("document").ready -> $("#rea-gal a").click -> + maxwidth = 1000 + maxheight = 900 + + + + prev_link = $(this) $("body").append "
" $("#large").fadeIn(500) $("#large").append "" $("#large").append "" - - $("#large").append "" + $("#large").append "
" + $(".img_container.first").append "" + if $(window).height() > (maxheight+100) + $("#large .large-img").css + "max-height" : maxheight + else + $("#large .large-img").css + "max-height" : "90%" + + if $(window).width() > (maxwidth+100) + $("#large .large-img").css + "max-width" : maxwidth + else + $("#large .large-img").css + "max-width" : "90%" position_img(); @@ -64,9 +97,10 @@ $("document").ready -> #titre = photo.find("h3") - $('#large .large-img').fadeOut 300, -> + $(".img_container.first").fadeOut 300, -> $('#large .large-img').attr("src", link.attr("href")) - $('#large .large-img').fadeIn() + $("#large .large-img").one "load", -> + $(".img_container.first").fadeIn() position_img(); prev_link = link @@ -85,11 +119,13 @@ $("document").ready -> #titre = photo.find("h3") - $('#large .large-img').fadeOut 300, -> - $('#large .large-img').attr("src", link.attr("href")) - $('#large .large-img').fadeIn() - position_img(); prev_link = link + $(".img_container.first").fadeOut 300, -> + $('#large .large-img').attr("src", link.attr("href")) + $("#large .large-img").one "load", -> + $(".img_container.first").fadeIn() + position_img(); + false diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 72e1de6..bdbd6c7 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,6 +13,7 @@ *= require superslides *= require lightSlider *= require jquery.bxslider + *= require_self */ @@ -34,34 +35,42 @@ left:0; width:100%; height:100%; - background:rgba(156,200,102,1);//rgba(132,187,64,0.8); - z-index:10; -padding:50px; -box-sizing: border-box; -.next, .prev{ -width:20px; -position:absolute; -top:50%; -transform:translateY(-50%); -cursor:pointer; - - -} -.prev{ -left:15px; -} -.next{ -right:15px; -} - .large-img{ - cursor:pointer; - max-height:100%; - max-width:100%; - - display:block; - margin:auto; - } + background:rgba(0,0,0,0.8);//rgba(132,187,64,0.8); + z-index:10; + + .next, .prev{ + width:20px; + position:absolute; + top:50%; + transform:translateY(-50%); + cursor:pointer; + + + } + .prev{ + left:15px; + } + .next{ + right:15px; + } + + .img_container{ + height:100%; + width:100%; + + + box-sizing: border-box; + + .large-img{ + cursor:pointer; + padding:10px; + background:white; + + display:block; + margin:auto; + } + } } body{ font-family:Lato; @@ -86,28 +95,19 @@ right:15px; } } } - .infos{ - h3{ - margin-top:5px; - + hr{ + border:0px; + border-bottom:1px solid rgba(250,250,250,0.6); + } - .samples{ - min-width:400px; - width:50%; - float:right; - - } - - } - .gal{ li{ - height:390px; + height:540px; text-align:center; } img{ - height:350px; + height:500px; margin:auto; } @@ -277,23 +277,21 @@ width:560px; #cristal-protect, #my-strat{ padding-bottom:0px; - .infos{ - padding:1em; - - - } .more{ padding:0.5em 0; display:inline-block; text-align:left; - ul{ - margin-left:120px; + .span{ + float:left; + padding:0 10px; + } img{ - width:100px; - margin:40px 10px; + width:140px; + margin:32px 0px; + margin-right:20px; float:left; } @@ -309,30 +307,29 @@ width:560px; background:rgba(132,187,64,1); - padding:0px; - padding:55px 0px; - position:relative; - - h2{ - background:rgba(132,187,64,0.9); - position:absolute; - top:70px; - padding:10px 20px; - z-index:2; - font-size:1.5em; - - } - + } #about{ padding-top:70px; text-align:left; + color:white; + background:rgba(40,40,40,1); h2{ text-align:center; font-size:2em; - padding-bottom:30px; + margin-bottom:0; + font-weight:500; + + } + h3{ + margin-top:0px; + padding-top:0px; + padding-bottom:30px; + text-align:center; + font-weight:500; + font-size:1.6em; } } @@ -365,9 +362,9 @@ background:rgba(132,187,64,1); right:0px; #logo-min{ position:absolute; - top:4px; + top:5px; left:10px; - height:35px; + height:40px; display:none; z-index:100; diff --git a/app/assets/stylesheets/jquery.bxslider.css b/app/assets/stylesheets/jquery.bxslider.css index 7e4c846..7e5a9c1 100644 --- a/app/assets/stylesheets/jquery.bxslider.css +++ b/app/assets/stylesheets/jquery.bxslider.css @@ -86,7 +86,7 @@ display: block; width: 8px; height: 8px; - border:1px solid rgba(10,10,10, 0.6); + border:1px solid rgba(250,250,250, 0.9); margin: 0 5px; outline: 0; @@ -97,8 +97,8 @@ .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { - background: rgba(10,10,10, 0.6); - border:1px solid rgba(10,10,10, 0); + background: rgba(250,250,250, 0.9); + border:1px solid transparent; } diff --git a/app/views/welcome/index.html.haml b/app/views/welcome/index.html.haml index d3ca00b..408c996 100644 --- a/app/views/welcome/index.html.haml +++ b/app/views/welcome/index.html.haml @@ -61,17 +61,14 @@ %li %img{alt: "Cinelli", src: "images/04.jpg"}/ - %nav.slides-navigation - %a.next{href: "#"} Next - %a.prev{href: "#"} Previous #menu-container #menu =link_to image_tag("/logo-min.png", :id => "logo-min"), "#home", :onclick => "scrollToAnchor('home');return false;" - =link_to "Société", "#about", :onclick => "scrollToAnchor('about');return false;" + =link_to "Présentation", "#about", :onclick => "scrollToAnchor('about');return false;" =link_to raw("Cristal Protect®"), "#cristal-protect", :onclick => "scrollToAnchor('cristal-protect');return false;" =link_to raw("MyStrat®"), "#my-strat", :onclick => "scrollToAnchor('my-strat');return false;" - =link_to "Idées", "#brainstorming", :onclick => "scrollToAnchor('brainstorming');return false;" + =link_to "Accompagnement", "#brainstorming", :onclick => "scrollToAnchor('brainstorming');return false;" =link_to "Réalisations", "#realisations", :onclick => "scrollToAnchor('realisations');return false;" =link_to "Contact", "#contact", :onclick => "scrollToAnchor('contact');return false;" @@ -80,22 +77,20 @@ #about .center %h2 - Art des Sens, solutions décoratives personnalisées - %br + Solutions décoratives personnalisées + %h3 pour l’agencement, la décoration et la signalétique %p - Fort d’une expérience de plus de onze années dans les différentes technologies d’impression numérique, la société + Fort d’une expérience de plus de onze années dans l’impression numérique, la société Art des Sens est spécialisée dans la commercialisation de supports imprimés, résistants aux agressions extérieures (UV, rayures, graffitis…) %p - Mais au-delà de la fourniture de panneaux imprimés, selon vos besoins, + En complément de la fourniture de panneaux imprimés et selon vos besoins, Art des Sens vous  - Art des Sens - - vous accompagnera dans l’étude, la conception, la fabrication et la pose de vos projets. + accompagnera dans l’étude, la conception, la fabrication et la pose de vos projets. %p Ensemble, concrétisons vos idées... - =image_tag "/sign.jpg", :style => "width:230px;float:right;padding-bottom:2em;" + =image_tag "/sign.png", :style => "width:230px;float:right;padding-bottom:2em;" %p{:style => "clear:both;"} #cristal-protect @@ -106,64 +101,53 @@ =image_tag "/cristal-protect.png", :class => "icons" - %p Associé à la société Cris-Graphic, nous avons développé l’impression numérique haute définition pérenne. + %p Associé à la société Cris-graphic, nous avons mis au point un procédé permettant de réaliser des impression numérique  en haute définition et pérenne. %p - Notre technologie consiste à encapsuler n’importe quelle image numérique au cœur d’un vernis UV extrêmement résistant. Ce traitement apporte à l’ensemble une résistance et une durabilité d’exposition en extérieur exceptionnelles. + La technologie consiste à encapsuler n’importe quelle image numérique au cœur d’un vernis UV extrêmement résistant. Ce traitement apporte à l’ensemble une résistance et une durabilité d’exposition en extérieur exceptionnelles. + %p Il est ainsi possible d'imprimer directement sur une grande variété de supports comme l'aluminium, des matériaux composites (Dibond®, Reynobond®, Alucore®, Forex®...), du verre et du bois. - .infos - .center - .samples - %ul.gal - %li{:class => ".preserve"} - =image_tag "/cristal-protect/01.jpg" - - Impression sur feuille aluminium brossé pour l'EHPAD de Rungis - %li{:class => ".preserve"} - =image_tag "/cristal-protect/02.jpg" - - Impression pour les sites de l'Office National des Anciens combattants - %li{:class => ".preserve"} - =image_tag "/cristal-protect/03.jpg" - Inclusion numérique pour les Monuments Nationaux - %li{:class => ".preserve"} - =image_tag "/cristal-protect/04.jpg" - Réalisation d'une signalétique pour le Parc de l'Oise - - - - - %h3 Caractéristiques techniques - %p - Supports disponibles : - %ul - %li Aluminium - %li Composite (Dibond®, Reynobond®, Alucore®, Forex®...) - %li Verre - %li Bois - %p Autre supports, nous consulter. + + + .samples + %ul.gal + %li{:class => ".preserve"} + =image_tag "/cristal-protect/01.jpg" - %p - Format maximum disponnible : - %ul - %li 4000 x 1600 mm - - %p Epaisseur maximum : 60 mm + Impression sur feuille aluminium brossé pour l'EHPAD de Rungis + %li{:class => ".preserve"} + =image_tag "/cristal-protect/02.jpg" - %p - Finitions disponibles : - %ul - %li Mat - %li Brillant + Impression pour les sites de l'Office National des Anciens combattants + %li{:class => ".preserve"} + =image_tag "/cristal-protect/03.jpg" + Inclusion numérique pour les Monuments Nationaux + %li{:class => ".preserve"} + =image_tag "/cristal-protect/04.jpg" + Réalisation d'une signalétique pour le Parc de l'Oise + - .center + + + .center + %hr .more - =image_tag "/more.png" - %ul - %li Bords tombés décorés. - %li Découpe, façonnabge, gravure possible. - %li Intégration de braille sur demande. - %li Extrême résistance aux agressions extérieurs. - %li Pas de minimum de commande. + .span + =image_tag "/more.png" + .span + %ul + %li Bords tombés décorés. + %li Découpe, façonnabge, gravure possible. + %li Intégration de braille sur demande. + %li Extrême résistance aux agressions extérieurs. + %li Pas de minimum de commande. + .span + %ul + %li Epaisseur maximum : 60 mm + %li Finition : mat ou brillant + %li Format maximum disponnible : 4000 x 1600 mm + .clear + + @@ -184,71 +168,49 @@ + - .infos - .center - - .samples - %ul.gal - %li{:class => ".preserve"} - =image_tag "/mystrat/01.jpg", :class => ".preserve" - - Découpe de lettres en stratifié - %li{:class => ".preserve"} - =image_tag "/mystrat/02.jpg", :class => ".preserve" - - Panneau en stratifié numérique & structure. - %li{:class => ".preserve"} - =image_tag "/mystrat/03.jpg", :class => ".preserve" + .samples + %ul.gal + %li{:class => ".preserve"} + =image_tag "/mystrat/01.jpg", :class => ".preserve" - Habillage de DAB en panneaux décorés. - - - + Découpe de lettres en stratifié + %li{:class => ".preserve"} + =image_tag "/mystrat/02.jpg", :class => ".preserve" + + Panneau en stratifié numérique & structure. + %li{:class => ".preserve"} + =image_tag "/mystrat/03.jpg", :class => ".preserve" + Habillage de DAB en panneaux décorés. + + + + - - - - - - - - - %h3 Caractéristiques techniques - %p - Formats maximum disponibles : - %ul - %li 2440 x 1220 mm - %li 3050 x 1300 mm - %li 3660 x 1525 mm - - %p - Epaisseurs disponnibles : - %p - 0,7mm, 3mm, 6mm, 8mm, 10mm et 20mm. - %br/ - Autre épaisseurs, nous consulter. - - %p - Finitions disponibles : - %ul - %li Matte - %li Brillant - %p - Impression recto/verso possible, nous consulter. + .center + %hr .more - - =image_tag "/more.png" - %ul - %li Garantie 10 ans en extérieur. - %li Découpe, façonnabge, gravure possible. - %li Intégration de braille sur demande - %li Extrême résistance aux agressions extérieurs - %li Pas de minimum de commande + .span + =image_tag "/more.png" + .span + %ul + %li Garantie 10 ans en extérieur. + %li Découpe, façonnabge, gravure possible + %li Intégration de braille sur demande + %li Extrême résistance aux agressions extérieurs + %li Pas de minimum de commande + .span + %ul + %li Formats maximum disponibles : 3660 x 1525 mm + %li Epaisseurs disponnibles : de 0,7mm à 20mm + %li Impression recto/verso possible, nous consulter. + %li Finitions disponibles : Matte et Brillant + .clear .clear #brainstorming .center @@ -306,7 +268,7 @@ #rea-gal -(1..10).each do |i| - =link_to image_tag("/realisation/#{i}-p.jpg"), "/realisation/#{i}.jpg" + =link_to image_tag("/realisation/#{i}-p.jpg"), "/realisation/#{i}.jpg", :data => {:title => "test",:lightbox => "image-1"} .clear #contact .center @@ -314,9 +276,7 @@ %p N'hésitez pas à nous contacter pour nous parler de votre projet ! %p - =image_tag "/logo-couleurs.png", :style => "width:300px;" - %br - %strong Thomas Blanc-Brude + =image_tag "/logo-couleurs.png", :style => "width:400px;" %br 296 rue de la Béalière %br diff --git a/public/logo-min.png b/public/logo-min.png index 9f4781e..f6a4a92 100644 Binary files a/public/logo-min.png and b/public/logo-min.png differ diff --git a/public/more.png b/public/more.png index 809c983..cf00605 100644 Binary files a/public/more.png and b/public/more.png differ diff --git a/public/sign.jpg b/public/sign.jpg index 12a906d..653b2e0 100644 Binary files a/public/sign.jpg and b/public/sign.jpg differ