add design

user/pages/01.home/01.contact/item.md

@@ -1,9 +1,21 @@
 ---
 title: contact
+media_order: 'Logo Le Campus VD Quadri.svg'
 ---
 
-adresse
+![](Logo%20Le%20Campus%20VD%20Quadri.svg)
-adresse
+
-téléphone
+LE CAMPUS
-mail
+Place Michel Paulus,
-horaires
+Ecosite du Val de Drôme
+26400 Eurre
+Tél. 04 75 25 43 82
+
+[campus@val-de-drome.com](mailto:campus@val-de-drome.com)
+Ouvert du lundi au vendredi de 8h à 19h
+
+Recevoir l'actualité du Campus
+Mentions légales
+Crédits
+
+![](Logo%20Le%20Campus%20VD%20Quadri.svg)

user/pages/01.home/02.nos-references/item.md

@@ -1,9 +0,0 @@
----
-title: 'Nos références'
----
-
-Constituendi autem sunt qui sint in amicitia fines et quasi termini diligendi. De quibus tres video sententias ferri, quarum nullam probo, unam, ut eodem modo erga amicum adfecti simus, quo erga nosmet ipsos, alteram, ut nostra in amicos benevolentia illorum erga nos benevolentiae pariter aequaliterque respondeat, tertiam, ut, quanti quisque se ipse facit, tanti fiat ab amicis.
-
-Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.
-
-Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.

user/pages/05.demande-de-devis/form.md

@@ -1,5 +1,6 @@
 ---
-title: 'Demande de devis'
+title: 'Demande de devis <br> parlez nous de votre projet'
+media_order: images.jpeg
 visible: false
 form:
     name: ajax-test-form
@@ -8,60 +9,68 @@ form:
     refresh_prevention: true
     fields:
         -
-            name: '1 Quelle est la nature de votre évènement ?'
+            name: 'Quelle est la nature de votre évènement ?'
             placeholder: 'Choisissez votre évènement ?'
             autofocus: 'on'
             autocomplete: 'on'
-            type: select
+            type: radio
-            size: long
+            label: 'Quelle est la nature de votre évènement ?'
-            classes: fancy
             options:
                 reunion: Réunion
                 seminaire: Séminaire
                 convention: Convention
                 vœux: Vœux
                 web_conference: 'Web conférence'
-                salon_forum_exposition: 'Salon / Forum / Exposition'
+                salon_forum_exposition: 'Salon, Forum, Exposition'
                 conference: Conférence
                 evenement_culturel: 'Evènement culturel'
                 autre: Autres
+            size: long
+            classes: fancy
             validate:
                 required: true
         -
-            name: '2 Quelle sera l''envergure de votre évènement ?'
+            name: 'Quelle sera l''envergure de votre évènement ?'
             placeholder: 'Nombre de personnes'
             autofocus: 'on'
             autocomplete: 'on'
-            type: select
+            type: radio
             size: long
             classes: fancy
             options:
-                25: '<= 25 personnes'
+                25: 'Inférieure ou égal à 25 personnes'
-                50: '<= 50 personnes'
+                50: 'Inférieure ou égal à 50 personnes'
-                100: '<= 100 personnes'
+                100: 'Inférieure ou égal à 100 personnes'
-                150: 'Plus de 150 personnes'
+                150: 'Supérieure à 150 personnes'
             validate:
                 required: true
         -
-            name: '3 Quand se déroulera votre évènement ?'
+            name: 'Date de lévenement'
             placeholder: 'Choisissez vos date ?'
             autofocus: 'on'
             autocomplete: 'on'
-            type: select
+            type: date
+            label: 'Quand se déroulera votre événement ?'
+        -
+            name: 'Durée prévue'
+            placeholder: 'Choisissez vos date ?'
+            autofocus: 'on'
+            autocomplete: 'on'
+            type: radio
             size: long
             classes: fancy
             options:
-                1/2j: '1/2 journée'
+                1/2j: 'Une demi journée'
-                1j: '1 jour'
+                1j: 'Une journée'
-                1s: '1 soirée'
+                1s: 'Une soirée'
-                2j: '2 jours'
+                2j: 'Deux jours'
-                3j: '3 jours'
+                3j: 'Trois jours'
-                +3j: 'Plus de 3 jours'
+                +3j: 'Plus de trois jours'
-            validate:
+                validate:
-                required: true
+                    required: true
         -
-            name: Prenom
+            name: Prénom
-            placeholder: prenom
+            placeholder: Prénom
             type: text
             size: long
             classes: fancy
@@ -69,38 +78,38 @@ form:
                 required: true
         -
             name: Nom
-            placeholder: nom
+            placeholder: Nom
             type: text
             size: long
             classes: fancy
             validate:
                 required: true
         -
-            name: Email
+            name: 'Adresse mail'
-            placeholder: Email
+            placeholder: 'Adresse mail'
             type: email
             size: long
             classes: fancy
             validate:
                 required: true
         -
-            name: phone
+            name: Téléphone
-            placeholder: Télphone
+            placeholder: Téléphone
             type: text
             size: long
             classes: fancy
             validate:
                 required: true
         -
-            name: fonction
+            name: Fonction
-            placeholder: fonction
+            placeholder: Fonction
             type: text
             size: long
             classes: fancy
             validate:
                 required: true
         -
-            name: société
+            name: Société
             placeholder: Société
             type: text
             size: long
@@ -112,14 +121,14 @@ form:
             placeholder: 'quel est votre profil'
             autofocus: 'on'
             autocomplete: 'on'
-            type: select
+            type: radio
             size: long
             classes: fancy
             options:
                 Agence_evenementielle: 'Agence évènementielle'
                 associations: 'Associations (sociétés savantes, fédérations, syndicats) '
                 societes_entreprises: 'Sociétés / Entreprises'
-                Organismes_professionnels: 'Orgaismes Professionnels'
+                Organismes_professionnels: 'Organismes professionnels'
             validate:
                 required: true
     buttons:
@@ -145,6 +154,7 @@ form:
             message: 'Merci, votre demande de devis à bien été envoyé ! Elle sera traité dans les prochains jours.'
 ---
 
-####  Je fais ma demande de devis 
+Le Campus, au cœur du Val de Drôme, un site tout équipé pour vos événements.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis sapien quis accumsan condimentum. Duis vel nisl sollicitudin, tincidunt ligula in, maximus sem. 
+Location de salles polyvalentes, amphitéâtre de 200 places, matériel performant dans toutes les salles, restauration de qualité bio ou locale sur demande...
+**Le Campus et son équipe à taille humaine vous garantit la réussite de votre séjour, de votre séminaire ou de votre événement.**

user/themes/lecampus/css/jquery.bxslider.min.css

@@ -0,0 +1 @@
+.bx-wrapper{position:relative;padding:0;}.bx-wrapper img{max-width:100%;display:block}.bxslider{margin:0;padding:0}ul.bxslider{list-style:none}.bx-viewport{-webkit-transform:translatez(0)}.bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{position:absolute;bottom:-30px;width:100%}.bx-wrapper .bx-loading{min-height:50px;background:url(images/bx_loader.gif) center center no-repeat #fff;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}.bx-wrapper .bx-pager.bx-default-pager a{background:#666;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,.bx-wrapper .bx-pager.bx-default-pager a:hover{background:#000}.bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;vertical-align:bottom}.bx-wrapper .bx-pager-item{font-size:0;line-height:0}.bx-wrapper .bx-prev{left:10px;background:url(images/controls.png) 0 -32px no-repeat}.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 0}.bx-wrapper .bx-next{right:10px;background:url(images/controls.png) -43px -32px no-repeat}.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-43px 0}.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}.bx-wrapper .bx-controls-direction a.disabled{display:none}.bx-wrapper .bx-controls-auto{text-align:center}.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(images/controls.png) -86px -11px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,.bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(images/controls.png) -86px -44px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}

user/themes/lecampus/js/site.js

@@ -33,15 +33,15 @@ function map() {
 }
 
 function filteritem() {
-  var $card = $('#item > .card');
+  var $card = $('.body-wrapper > .card');
   var $cat = $('.cat a');
-  var $img = $('#item .img');
+  var $img = $('.body-wrapper .img');
 
   $(".filters .btn").click(function(e) {
     e.preventDefault();
 
     var filter = $(this).attr("data-filter");
-    var self = $('.container #item');
+    var self = $('.body-wrapper');
 
     self.masonryFilter({
         filter: function () {
@@ -51,7 +51,7 @@ function filteritem() {
     });
 });
 
-  var $grid = $('#archive #item, #calendrier #item').masonry({
+  var $grid = $('#archive .body-wrapper, #calendrier .body-wrapper').masonry({
     // columnWidth: 200,
     itemSelector: '.card',
     gutter: 10,
@@ -66,13 +66,21 @@ function filteritem() {
 }
 
 function slide() {
-  $(".gal").slidesjs({
+  // $(".gal").slidesjs({
-    width: 940,
+  //   width: 940,
-    height: 528,
+  //   height: 528,
-    pagination: {
+  //   pagination: {
-      active: false
+  //     active: false
-    }
+  //   }
+  // });
+  $('.gal').bxSlider({
+    minSlides: 2,
+    maxSlides: 3,
+    preloadImages:'visible',
+    pager:false,
+    auto:true,
   });
+
 }
 
 function links() {
@@ -89,7 +97,37 @@ function links() {
 
 }
 
+function clickbutton() {
+  var $button = $('#ajax-test-form .radio');
+
+  $button.on('click', function(){
+    $(this).parent('.form-data').find('.check').removeClass('check');
+    $(this).addClass('check');
+  });
+
+}
+
+function clicksenddevis() {
+  var $ok = $('.ok');
+  var $send = $('#send-valide');
+
+  $ok.on('click', function () {
+    $(this).parent('#send-valide').remove();
+  })
+
+}
+
+function addclass() {
+  var $map = $('a#carte');
+
+  $map.parents('.content_s').addClass('map')
+
+}
+
 jQuery(document).ready(function(){
+  // clicksenddevis();
+  addclass();
+  clickbutton();
   links();
   slide();
   filteritem();

user/themes/lecampus/scss/theme/_blog.scss

@@ -1,42 +1,41 @@
-// home
+
 .gal{
-  width: 100%;
+  // width: 100%;
-  max-height:554px;
+  // max-height:554px;
-  overflow-y: hidden;
+  // overflow-y: hidden;
-  position: relative;
+  // position: relative;
   border-top: 1px solid $light-blue;
-  border-bottom: 10px solid $green;
+  // .slidesjs-navigation{
-  .slidesjs-navigation{
+  //   z-index: 999;
-    z-index: 999;
+  //   position: absolute;
-    position: absolute;
+  //   top: 50%;
-    top: 50%;
+  //   transform: translateY(-50%);
-    transform: translateY(-50%);
+  //   &.slidesjs-previous{
-    &.slidesjs-previous{
+  //     left: 10px;
-      left: 10px;
+  //     &:before{
-      &:before{
+  //       display: block;
-        display: block;
+  //       content: " ";
-        content: " ";
+  //       width: 30px;
-        width: 30px;
+  //       height: 50px;
-        height: 50px;
+  //       background-image: url('/user/themes/lecampus/images/arrow.svg');
-        background-image: url('/user/themes/lecampus/images/arrow.svg');
+  //       background-repeat: no-repeat;
-        background-repeat: no-repeat;
+  //       background-size: 30px 50px;
-        background-size: 30px 50px;
+  //     }
-      }
+  //   }
-    }
+  //   &.slidesjs-next{
-    &.slidesjs-next{
+  //     right: 10px;
-      right: 10px;
+  //     &:before{
-      &:before{
+  //       display: block;
-        display: block;
+  //       content: " ";
-        content: " ";
+  //       width: 30px;
-        width: 30px;
+  //       height: 50px;
-        height: 50px;
+  //       background-image: url('/user/themes/lecampus/images/arrow.svg');
-        background-image: url('/user/themes/lecampus/images/arrow.svg');
+  //       background-repeat: no-repeat;
-        background-repeat: no-repeat;
+  //       background-size: 30px 50px;
-        background-size: 30px 50px;
+  //       transform: rotate(180deg);
-        transform: rotate(180deg);
+  //     }
-      }
+  //   }
-    }
+  // }
-  }
   .title{
     position: absolute;
     right: 50px;
@@ -58,35 +57,113 @@
   }
   label{
     padding: 10px;
-    border: 1px solid black;
     margin-right: 20px;
+    cursor: pointer;
+    &.tous{
+      border-top: 2px solid $green;
+      border-bottom: 2px solid $green;
+    }
+    &.professionnels{
+      border-top: 2px solid $red;
+      border-bottom: 2px solid $red;
+    }
+    &.grand_public{
+      border-top: 2px solid $light-blue;
+      border-bottom: 2px solid $light-blue;
+    }
+    &.formations{
+      border-top: 2px solid $grey;
+      border-bottom: 2px solid $grey;
+    }
+    &.archive{
+      border-top: 2px solid $dark-blue;
+      border-bottom: 2px solid $dark-blue;
+    }
+  }
+  input{
+    visibility: hidden;
+    position: absolute;
+  }
+}
+
+.bandeau{
+  width: 100%;
+  max-height: 554px;
+  overflow: hidden;
+}
+
+.container{
+  & > .title{
+    background: $red;
+    border-radius: 30px;
+    width: auto;
+    float:left;
+    padding: 10px 20px;
+    color: white;
   }
 }
 
 .start:not(#form){
-  #item{
+  &#calendrier,   &#archive{
+      width: 70%;
+      min-height: calc(100vh - 325px);
+      margin: auto;
+    }
+  .body-wrapper{
     @include inlineflex();
+    justify-content: center;
     width: 100%;
+    position: relative;
     .card{
       width: calc( (100% / 4) - 45px);
-      min-width: 250px;
+      min-width: 200px;
       margin: 0 15px 30px 15px;
-      border: 1px solid black;
       .card-header{
         position: absolute;
-        width: auto;
+        width: 100%;
         right: 0;
         text-align: right;
+        .professionnels{
+          background-color: $red;
+        }
+        .grand_public{
+          background-color: $light-blue;
+        }
+        .formations{
+          background-color: $grey;
+        }
         .publics{
-          padding: 10px;
+          padding: 2.5px 10px;
-          background: grey;
           color: white;
         }
       }
       .card-body{
         padding: 15px;
-        .card-title{
+        background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
-          margin-bottom: 10px;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
+    .event{
+      width: 45%;
+      .card-content{
+        @include inlineflex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        .reso{
+          width: 20%;
+          a{
+            display: block;
+            margin-bottom: 10px;
+            img{
+              margin-left: 10px;
+              width: 20px;
+            }
+          }
+        }
+        .txt{
+          width: 80%;
         }
       }
     }
@@ -94,33 +171,101 @@
 }
 
 .start#form{
-  #item{
+  .body-wrapper{
     width: calc( (100% / 2));
     min-width: 250px;
     margin: 100px auto;
     form{
-      @include inlineflex();
+      width: 100%;
       margin-top: 20px;
       & > div{
+        width: 100%;
         margin: 20px 0;
-        width: 50%;
+        border-bottom: 1px solid $red;
-        &:nth-of-type(3){
+        .form-data{
-          width: 100%;
+          @include inlineflex();
-        }
+          margin: 20px 0px;
-        input{
+          &> div{
-          width: 90%;
+            margin: 10px 10px;
-        }
+            min-width: 100px;
-        &:nth-of-type(10){
+            border: 2px solid $red;
+            border-radius: 30px;
+            padding: 10px 20px;
+            &.check{
+              background: $red;
+              color: white;
+            }
+            input{
+              border: none;
+            }
+            input[type='radio'] {
+              visibility: hidden;
+              position: absolute;
+            }
+          }
+        }
+        &:nth-of-type(n+5):not(:nth-of-type(n+11)){
+          width: 50%;
+          float: left;
+          border-bottom: 0px;
+          .form-data{
+            width: 100%;
+            & > div{
+              width: 100%;
+            }
+          }
+        }
+        &:nth-of-type(9), &:nth-of-type(10){
+          border-bottom: 1px solid $red !important;
+        }
+        &.button-wrapper{
+          background: $red;
+          height: 60px;
+          position: absolute;
+          left: 0;
           width: 100%;
+          button{
+            margin-right: 20px;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            background: white;
+            border-radius: 30px;
+            padding: 10px 35px;
+            box-shadow:none;
+          }
         }
       }
     }
+    #send-valide{
+      transform: translate(-50%, -50%);
+      background: $red;
+      border-radius: 20px;
+      position: fixed;
+      width: 30%;
+      height: 30%;
+      left: 50%;
+      top: 50%;
+      padding: 50px;
+      .toast{
+        position: relative;
+        text-align: center;
+        color: white;
+      }
+      .ok{
+        color: white;
+        position: absolute;
+        right: 20px;
+        bottom: 20px;
+      }
+    }
   }
 }
 
 .content{
   width: 50%;
-  margin: 60px 20px 20px auto;
+  margin: 4rem auto;
   p{
     margin: 10px 0;
   }
@@ -131,93 +276,47 @@
 }
 
 .entete{
+  @include inlineflex;
+  padding: 20px;
   background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: auto;
   .entete_c{
+    @include inlineflex;
+    text-align: center;
     width: 66%;
     margin: 50px auto;
     position: relative;
     h2{
-      float: left;
       width: auto;
+      margin-bottom: 20px;
       background: $red;
       border-radius: 30px;
       width: auto;
       padding: 10px 20px;
     }
-    h3{
+
-      float: left;
-      margin-bottom: 50px;
-    }
   }
 }
 
-#home{
+.body-wrapper{
-  .entete_c{
+  .entete{
-    margin-top: 20px;
+    border-top: 10px solid $green;
+    border-bottom: 10px solid $light-blue;
   }
-  .content{
-    @include inlineflex();
-    & > p{
-      position: relative;
-      width: calc(100% / 3);
-      padding: 50px 20px;
-      margin-top: 10px;
-      img{
-        position: absolute;
-        width: 50px;
-        height: auto;
-        top: -20px;
-        left: 50%;
-        transform: translate(-50%);
-      }
-      &:nth-of-type(n+4){
-        width: calc(100% / 4);
-      }
-      &:last-child{
-        width: auto!important;
-        margin-top: 0!important;
-        margin: auto;
-        a{
-          display: block;
-          padding: 10px 20px;
-          text-align: center;
-          border: 2px solid $green;
-          border-radius: 30px;
-          margin: auto;
-          transition: background-color 0.3s ease;
-        }
-      }
-    }
-  }
-}
-
-// items
-.bandeau{
-  width: 100%;
-  max-height: 554px;
-  overflow: hidden;
-}
-
-#item{
   h3{
     margin-top: 20px;
   }
   .content{
-    // width: 50%;
     h4{
       &:not(:first-of-type){
         border-top: 1px solid black;
         padding-top: 30px;
-        margin: 30px 0;
+        margin: 30px 0 0 0;
       }
     }
-    p{
-
-    }
   }
   .sub-content{
     border-top: 1px solid black;
@@ -251,8 +350,10 @@
 }
 
 .sidebar{
-  width: 300px;
+  position: absolute;
-  margin: -50px auto 0 20px;
+  right: 0;
+  width: 250px;
+  margin: -55px auto 0 20px;
   h2{
     background: $red;
     border-radius: 100px;
@@ -260,7 +361,7 @@
     height: 100px;
   }
   .side-agenda{
-    padding: 10px 0;
+    padding: 10px 20px 10px 0;
     &:not(:nth-of-type(1)){
       border-top: 1px solid $light-blue;
       &::before{
@@ -280,12 +381,24 @@
   }
   .side-all-agenda{
     width: auto;
-    padding: 10px;
+    padding: 10px 20px;
     margin-bottom: 10px;
     float: left;
     border: 2px solid $red;
     border-radius: 30px;
+    transition: background-color 0.3s ease;
+    a{
+      color: black;
+    }
+    &:hover{
+      background-color: $red;
+      transition: background-color 0.3s ease;
+      a{
+        color: white;
+      }
+    }
   }
+
 }
 
 .side-newsletter{
@@ -316,7 +429,7 @@
         }
         input{
           border-radius: 30px;
-          height: 30px;
+          height: 31px;
           box-shadow: none;
           border: none;
         }
@@ -330,3 +443,201 @@
     }
   }
 }
+
+#home{
+  .content{
+    @include inlineflex();
+    & > p{
+      position: relative;
+      width: calc(100% / 3);
+      padding: 50px 20px;
+      margin-top: 10px;
+      img{
+        position: absolute;
+        width: auto;
+        height: 50px;
+        top: -20px;
+        left: 50%;
+        transform: translate(-50%);
+      }
+      &:nth-of-type(n+4){
+        width: calc(100% / 4);
+      }
+      &:last-child{
+        width: auto!important;
+        margin-top: 0!important;
+        margin: auto;
+        a{
+          display: block;
+          padding: 10px 20px;
+          text-align: center;
+          border: 2px solid $green;
+          border-radius: 30px;
+          margin: auto;
+          transition: background-color 0.3s ease;
+        }
+      }
+    }
+  }
+}
+
+#item{
+  .content{
+    @include inlineflex;
+    flex-wrap: nowrap;
+    .images_s{
+      width: 100%;
+      min-width: 300px;
+      margin-right: 15px;
+      img{
+        margin-bottom: 15px;
+      }
+    }
+    .content_s{
+      width: auto;
+    }
+  }
+}
+
+.devis{
+  @include inlineflex();
+  justify-content: center;
+  background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+
+  .txt{
+    @include inlineflex();
+  }
+  p{
+    &:nth-of-type(1){
+      width: 200px;
+      height: auto;
+      transform: translateY(50%);
+      &::after {
+        display: block;
+        content: "";
+        width: 200px;
+        height: 200px;
+        background: $red;
+        border-radius: 200px;
+        margin-top: -65%;
+      }
+    }
+    &:nth-of-type(2){
+      width: 400px;
+      background: white;
+      padding: 20px;
+    }
+  }
+  #demander-votre-devis{
+    position: relative;
+    a{
+      display: block;
+      margin-left: -100px;
+      background: $red;
+      width: 200px;
+      height: 200px;
+      h3{
+        padding-top: 50%;
+        transform: translateY(-50%);
+        &::after{
+          display: block;
+          content: ">";
+        }
+      }
+    }
+  }
+}
+
+.bx-viewport{
+    height: 600px!important;
+}
+
+#reco{
+  background: $dark-blue;
+  .title{
+    cursor: pointer;
+    width: 100%;
+    padding: 10px;
+
+    h4{
+      width: 300px;
+      margin: auto;
+      color: white;
+      padding: 10px;
+      text-align: center;
+      border-top: 1px solid white;
+      border-bottom: 1px solid white;
+      &::after{
+        display: block;
+        content: ">";
+      }
+    }
+  }
+  .txt{
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    @include inlineflex;
+    justify-content: center;
+    p{
+      color: white;
+      width: 300px;
+      margin: 0 20px 20px 20px;
+      border-left: 1px solid white;
+      padding-left: 20px;
+      a{
+        color: white;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.content_s{
+  &.map{
+    width: 100%!important;
+    height: auto;
+    p{
+      &:last-child{
+        height: 500px;
+      }
+    }
+    a#carte{
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+#event{
+  .head-event{
+    .tags{
+      width: 100%;
+      &.professionnels{
+        background-color: $red;
+      }
+      &.grand_public{
+        background-color: $light-blue;
+      }
+      &.formations{
+        background-color: $grey;
+      }
+      &.publics{
+        padding: 2.5px 10px;
+        color: white;
+      }
+    }
+}
+.card-body{
+  padding: 15px;
+  background-image: url('/user/themes/lecampus/images/Trame-bleu.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+}

user/themes/lecampus/scss/theme/_footer.scss

@@ -1,13 +1,29 @@
 #footer{
   width: 100%;
   background: grey;
-  @include inlineflex;
   .sub-content{
-    width: calc((100% / 3) - 40px);
+    @include inlineflex;
-    border-top: 1px solid black;
+    width: 100%;
-    margin: 20px;
+    margin: 20px 0;
+    justify-content: center;
     h3{
       margin-top: 20px;
     }
+    p{
+      img{
+        width: 50%;
+        min-width: 200px;
+        height: auto;
+      }
+      &:nth-of-type(1){
+        img{
+          float: right;
+        }
+      }
+      &:not(:nth-of-type(1)){
+        border-left: 1px solid black;
+        padding: 0 20px;
+      }
+    }
   }
 }

user/themes/lecampus/scss/theme/_typography.scss

@@ -1,5 +1,6 @@
 html, body{
   font-family: $Regular;
+  line-height: 1.35;
 }
 
 h1{
@@ -20,9 +21,26 @@ h5{
   font-size: 1.2rem;
 }
 
+.container{
+  & > .title{
+    font-family: $Bold;
+  }
+}
+
+.card-header{
+  .publics{
+    .tags{
+        font-size: 0.8rem;
+        font-family: $Bold;
+    }
+  }
+}
 .card-title{
   font-family: $Bold;
   font-size: 1.2rem;
+  .date{
+    font-size: 0.8rem;
+  }
 }
 
 p{
@@ -69,21 +87,42 @@ p{
   }
 }
 
+#item{
+  .content{
+    .content_s{
+      h4{
+        font-family: $Bold;
+        font-size: 1.3rem;
+      }
+    }
+  }
+}
+
 .sidebar{
-  line-height: 1.35rem;
+  .date{
+    font-size: 0.8rem;
+  }
   h2{
     font-size: 1.4rem;
     line-height: 100px;
     color: white;
     text-align: center;
   }
-  h3{
+  h5{
-    font-size: 1rem;
+    font-size: 1.3rem;
+    font-family: $Bold;
   }
   .date{
     color: $grey;
   }
+  .side-all-agenda{
+    a{
+      font-size: 0.9rem;
+      font-family: $Bold;
+    }
+  }
 }
+
 .side-newsletter{
   label{
     font-size: 1rem;
@@ -104,3 +143,53 @@ p{
   font-family: $Bold;
   color: $red;
 }
+
+#ajax-test-form{
+  .form-label{
+    font-size: 1.2rem;
+    font-family: $Bold;
+  }
+  .radio{
+    .form-radio{
+      font-size: 1rem;
+      font-family: $Bold;
+    }
+  }
+  .button-wrapper{
+    button{
+      font-family: $Bold;
+    }
+  }
+}
+#send-valide{
+  .toast{
+    font-size: 1.3rem;
+    font-family: $Bold;
+  }
+  .ok{
+    font-family: $Bold;
+  }
+}
+
+.devis{
+  p{
+    &:nth-of-type(1){
+      color: white;
+      text-align: center;
+    }
+  }
+  #demander-votre-devis{
+    a{
+      color: white;
+    }
+  }
+}
+
+#footer{
+  p{
+    font-size: 0.8rem;
+    a{
+      font-family: $Bold;
+    }
+  }
+}

user/themes/lecampus/templates/archive.html.twig

@@ -11,11 +11,17 @@
 {% endblock %}
 
 {% block body %}
-  <section id="body-wrapper" class="section blog-listing">
+
-      <section class="container {{ grid_size }}">
+  <section class="header-wrapper">
-        <div class="cat">
+    <div class="title">
-          {% include 'partials/taxonomylist.html.twig' with {base_url: my_url, taxonomy: 'tag'} %}
+      <h2>{{page.title}}</h2>
-        </div>
+    </div>
+    <div class="cat">
+      {% include 'partials/taxonomylist.html.twig' with {base_url: my_url, taxonomy: 'tag'} %}
+    </div>
+  </section>
+
+  <section class="body-wrapper" class="section blog-listing">
       {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
           {% include 'partials/breadcrumbs.html.twig' %}
       {% endif %}
@@ -32,7 +38,6 @@
             {% endfor %}
           {% endblock %}
       {% endembed %}
-      </section>
   </section>
 
 {% endblock %}

user/themes/lecampus/templates/blog.html.twig

@@ -3,13 +3,16 @@
 {% set image = page.media.images|first %}
 
 {% block body %}
-    <section id="item" class="section blog-listing">
+  <section id="body" class="section blog-listing">
+    <section class="header-wrapper">
       <div class="bandeau">
         {% if image %}
-          {{image.html}}
+        {{image.html}}
         {% endif %}
       </div>
+    </section>
 
+    <section class="body-wrapper">
       <div class="content">
         <h2>{{page.title}}</h2>
         {{content}}
@@ -19,5 +22,5 @@
         {% include 'partials/sidebar.html.twig' %}
       {% endblock %}
     </section>
-
+  </section>
 {% endblock %}

user/themes/lecampus/templates/calendrier.html.twig

@@ -6,17 +6,16 @@
 {% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true)  %}
 {% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
 
-{% block hero %}
-    {% include 'partials/hero.html.twig' with {id: 'blog-hero', content: page.content, hero_image: blog_image} %}
-{% endblock %}
-
 {% block body %}
-
+  <section class="header-wrapper">
-  <section id="body-wrapper" class="section blog-listing">
+    <div class="title">
-      <section class="container {{ grid_size }}">
+      {{page.title}}
-        <div class="cat">
+    </div>
-          {% include 'partials/taxonomylist.html.twig' with {base_url: my_url, taxonomy: 'tag'} %}
+    <div class="cat">
-        </div>
+      {% include 'partials/taxonomylist.html.twig' with {base_url: my_url, taxonomy: 'tag'} %}
+    </div>
+  </section>
+  <section class="body-wrapper" class="section blog-listing">
       {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
           {% include 'partials/breadcrumbs.html.twig' %}
       {% endif %}
@@ -33,8 +32,6 @@
           {% endblock %}
 
       {% endembed %}
-
-      </section>
   </section>
 
 {% endblock %}

user/themes/lecampus/templates/event.html.twig

@@ -20,17 +20,15 @@
 {% endblock %}
 
 {% block body %}
-<section id="body-wrapper" class="section blog-listing">
+<section class="body-wrapper" class="section blog-listing">
-    <section class="container {{ grid_size }}">
+  {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
-        {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
+    {% include 'partials/breadcrumbs.html.twig' %}
-          {% include 'partials/breadcrumbs.html.twig' %}
+  {% endif %}
-        {% endif %}
 
-        {% embed 'partials/layout.html.twig' %}
+  {% embed 'partials/layout.html.twig' %}
-          {% block item %}
+    {% block item %}
-            {% include 'partials/cal-event.html.twig' %}
+      {% include 'partials/cal-event.html.twig' %}
-          {% endblock %}
+    {% endblock %}
-        {% endembed %}
+  {% endembed %}
-    </section>
 </section>
 {% endblock %}

user/themes/lecampus/templates/footer.html.twig

@@ -1,18 +1,14 @@
 {% set collection = page.collection() %}
 {% set image = page.media.images|first %}
 
-{% for item in collection if page.template == "footer" %}
+<section id="footer cc" class="section blog-listing">
-  {{item.title}}
+  {% if image %}
-{% endfor %}
+    {{image.html}}
-    <section id="footer" class="section blog-listing">
+  {% endif %}
-      {% if image %}
-      {{image.html}}
-    {% endif %}
 
-    {% for item in collection %}
+  {% for item in collection %}
-    <div class="sub-content">
+    <div class="sub-content ">
-      <h3>{{item.title}}</h3>
       {{item.content}}
     </div>
-    {% endfor %}
+  {% endfor %}
-  </section>
+</section>

user/themes/lecampus/templates/home.html.twig

@@ -1,7 +1,6 @@
 {% extends 'partials/base.html.twig' %}
 {% set image = page.media.images %}
-
+{% block header_body %}
-{% block content %}
 
   <div class="gal">
     {% for feature in page.header.buttons %}
@@ -23,27 +22,26 @@
     </div>
   {% endif %}
 
+{% endblock %}
+
+{% block content %}
   <div class="content">
     {{ page.content|raw }}
   </div>
-
 {% endblock %}
 
 {% block sidebar %}
-  {% include 'partials/sidebar.html.twig' %}
+    {% include 'partials/sidebar.html.twig' %}
+{% endblock %}
+
+{% block newsletter %}
+    {% include 'partials/newsletters.html.twig' %}
 {% endblock %}
 
 {% block devis %}
-  <div class="side-newsletter">
+    {% include 'partials/devis.html.twig' %}
-    <div id="mc_embed_signup">
+{% endblock %}
-    <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=96d6b6e702" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+
-        <div id="mc_embed_signup_scroll">
+{% block reco %}
-      <label for="mce-EMAIL">Recevoir l'actualité du campus</label></br>
+    {% include 'partials/reco.html.twig' %}
-      <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
-        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a98b763288f940083bf28857c_96d6b6e702" tabindex="-1" value=""></div>
-        <div class="clear"><input type="submit" value="ok" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
-        </div>
-    </form>
-    </div>
-  </div>
 {% endblock %}

user/themes/lecampus/templates/partials/base.html.twig

@@ -19,6 +19,8 @@
         {% do assets.addCss('theme://css-compiled/spectre'~compress) %}
         {% do assets.addCss('theme://css-compiled/theme'~compress) %}
         {% do assets.addCss('theme://css/leaflet.css') %}
+        {% do assets.addCss('theme://css/jquery.bxslider.min.css') %}
+
     {% endblock %}
 
     {% block javascripts %}
@@ -28,7 +30,7 @@
         {% do assets.addJs('theme://js/imagesloaded.pkgd.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/masonry.filter.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/masonry.pkgd.min.js', {group:'bottom'}) %}
-        {% do assets.addJs('theme://js/jquery.slides.min.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/jquery.bxslider.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
 
     {% endblock %}
@@ -37,8 +39,16 @@
         {{ assets.css()|raw }}
         {{ assets.js()|raw }}
     {% endblock %}
+
+    <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
+    <meta property="og:type"          content="website" />
+    <meta property="og:title"         content="Your Website Title" />
+    <meta property="og:description"   content="Your description" />
+    <meta property="og:image"         content="/user/themes/lecampus/images/fb.svg" />
+
 {% endblock head %}
 </head>
+
 <body id="top" class="{% block body_classes %}{{ body_classes }}{% endblock %}">
     {% block header %}
         <section id="header" class="section">
@@ -70,18 +80,24 @@
 
         <section id="{{page.template}}" class="start">
         {% block body %}
-            <section id="body-wrapper" class="section">
+          <section class="header-wrapper" class="section">
-                <section id="item">
+            {% block header_body %}{% endblock %}
-                    {% block content %}{% endblock %}
+          </section>
-                    {% block sidebar %}{% endblock %}
-                </section>
 
-                {% block devis %}{% endblock %}
+          <section class="body-wrapper" class="section">
-
+            {% block content %}{% endblock %}
-            </section>
+            {% block sidebar %}{% endblock %}
+          </section>
         {% endblock %}
         </section>
 
+    {% block newsletter %}
+      {% include 'partials/newsletters.html.twig' %}
+    {% endblock %}
+
+    {% block devis %}{% endblock %}
+    {% block reco %}{% endblock %}
+
     {% block footer %}
       {% include 'partials/footer.html.twig' %}
     {% endblock %}

user/themes/lecampus/templates/partials/blog-item.html.twig

@@ -1,4 +1,5 @@
 {% set image = page.media.images|first %}
+<div class="header-wrapper">
 
   {% if image %}
   <div class="bandeau">
@@ -15,7 +16,12 @@
   {% endif %}
 
   {% endif %}
+</div>
+
+<div class="body-wrapper">
+
   {% if not hero_image_name and not show_sidebar %}
+  <div class="content">
     <div class="content_s">
       {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
       {% if page.header.subtitle %}
@@ -23,13 +29,19 @@
       {% endif %}
       {{ page.content|raw }}
     </div>
+  </div>
   {% endif %}
   {% if not hero_image_name and show_sidebar %}
+
   <div class="content">
 
-    {% for images in page.media.images %}
+    {% if page.media.images|slice(1) %}
-    {{images}}
+      <div class="images_s">
-    {% endfor %}
+        {% for images in page.media.images|slice(1) %}
+          {{images}}
+        {% endfor %}
+      </div>
+    {% endif %}
 
     <div class="content_s">
       {% if header.entete.text == false %}
@@ -41,4 +53,11 @@
       {{ page.content|raw }}
     </div>
   </div>
+  {% if show_sidebar %}
+    {% block sidebar %}
+      {% include 'partials/sidebar.html.twig' %}
+    {% endblock %}
+  {% endif %}
+
+</div>
 {% endif %}

user/themes/lecampus/templates/partials/blog/public.html.twig

@@ -1,17 +1,15 @@
-<div class="publics">
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
-  <span class="pc">
-    <!-- {% set page_public = page.header.public %}
-      {% for public in page_public %}
-        {{ public }}
-      {% endfor %} -->
 
-      {% if page.taxonomy.tag %}
+{% import _self as macro %}
+
+{% if page.taxonomy.tag %}
+  {% for tag in page.taxonomy.tag %}
+    <div class="publics {{ macro.pageLinkName(tag) }}">
+      <span class="pc">
         <span class="tags">
-            {% for tag in page.taxonomy.tag %}
+          {{ tag }}
-              {{ tag }}
-            {% endfor %}
         </span>
-      {% endif %}
+      </span>
-
+    </div>
-  </span>
+  {% endfor %}
-</div>
+{% endif %}

user/themes/lecampus/templates/partials/blog/taxonomy.html.twig

@@ -1,7 +1,12 @@
 {% if page.taxonomy.tag %}
-<span class="tags">
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
-    {% for tag in page.taxonomy.tag %}
+
+{% import _self as macro %}
+
+
+{% for tag in page.taxonomy.tag %}
+<span class="tags {{ macro.pageLinkName(tag) }}">
     <a class="label">{{ tag }}</a>
     {% endfor %}
-</span>
 {% endif %}
+</span>

user/themes/lecampus/templates/partials/cal-event.html.twig

@@ -1,14 +1,57 @@
 {% set image = page.media.images|first %}
 
   {% if not hero_image_name %}
-    <div class="content">
+
-      {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
+  {% for tag in page.taxonomy.tag %}
-      <div class="reso">
+
-        <img src="/user/themes/lecampus/images/fb.svg" alt="">
+  <div class="event" data-filter="{{tag}}">
-      </div>
+  {% endfor %}
-      {% if page.header.subtitle %}
+    <div class="card-header">
-      <h3 >{{ page.header.subtitle }}</h3>
+      <h1>{{page.parent.title}}</h1>
-      {% endif %}
+      {% include 'partials/blog/public.html.twig' %}
-      {{ page.content|raw }}
     </div>
+    {% set image = page.media.images|first %}
+    {% if image %}
+    <div class="card-image">
+      {{ image }}
+    </div>
+    {% endif %}
+    <div class="card-body">
+      <div class="card-title">
+        {% include 'partials/blog/date.html.twig' %}
+        {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
+      </div>
+  </div>
+  <div class="card-content">
+    <div class="reso">
+      <div id="fb-root"></div>
+        <script>(function(d, s, id) {
+          var js, fjs = d.getElementsByTagName(s)[0];
+          if (d.getElementById(id)) return;
+          js = d.createElement(s); js.id = id;
+          js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
+          fjs.parentNode.insertBefore(js, fjs);
+        }(document, 'script', 'facebook-jssdk'));</script>
+
+        <!-- Your share button code -->
+        <div class="fb-share-button"
+          data-href="https://www.your-domain.com/your-page.html"
+          data-layout="button_count">
+        </div>
+
+      <a href="#">Partager<img src="/user/themes/lecampus/images/fb.svg" alt=""></a>
+      <a href="#">Partager<img src="/user/themes/lecampus/images/yt.svg" alt=""></a>
+      <a href="#">Twitter<img src="/user/themes/lecampus/images/in.svg" alt=""></a>
+    </div>
+    <div class="txt">
+
+      {% if page.summary != page.content %}
+      {{ page.summary(100)|raw }}
+      {% endif %}
+      {{page.content}}
+    </div>
+
+  </div>
+</div>
+
   {% endif %}

user/themes/lecampus/templates/partials/cal-list-event.html.twig

@@ -12,8 +12,8 @@
     {% endif %}
     <div class="card-body">
       <div class="card-title">
-        {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
         {% include 'partials/blog/date.html.twig' %}
+        {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
       </div>
     <div class="card-summary">
       <a href="{{ page.url }}">

user/themes/lecampus/templates/partials/devis.html.twig

@@ -0,0 +1,18 @@
+{% set options = { items: {'@page.self': '/demande-de-devis'}, 'limit': 1 } %}
+{% set image = page.media.images|first %}
+
+<div class="devis">
+  {% for p in page.collection(options)%}
+      <div class="txt">
+        {{p.content}}
+      </div>
+    <div class="img">
+      {{image}}
+    </div>
+    <div id="demander-votre-devis">
+      <a href="/demande-de-devis">
+        <h3>{{p.title}}</h3>
+      </a>
+    </div>
+  {% endfor %}
+</div>

user/themes/lecampus/templates/partials/footer.html.twig

@@ -4,7 +4,6 @@
 <section id="footer" class="section blog-listing">
   {% for p in page.find('/home').children if p != page %}
     <div class="sub-content">
-      <h2>{{p.title}}</h2>
       {{p.content}}
     </div>
   {% endfor %}

user/themes/lecampus/templates/partials/form-messages.html.twig

@@ -2,5 +2,19 @@
   {% set inline_errors = form.inline_errors is not null ? form.inline_errors : config.plugins.form.inline_errors(false) %}
   {% set status_mapping = {'success':'green', 'error': 'red', 'warning': 'yellow'} %}
   {% set message = inline_errors and form.messages ? "FORM.VALIDATION_FAIL"|t : form.message %}
+  <script type="text/javascript">
+    var $ok = $('.ok');
+    var $send = $('#send-valide');
+
+    $ok.on('click', function () {
+      $(this).parent('#send-valide').remove();
+      location.reload();
+    })
+
+  </script>
+
+  <div id="send-valide">
     <div class="toast toast-{{ form.status }} {{ status_mapping[form.status] ?: 'green' }} mt-2 mb-2">{{ message|raw }}</div>
+    <div class="ok">Ok, merci !</div>
+  </div>
 {% endif %}

user/themes/lecampus/templates/partials/layout.html.twig

@@ -1,13 +1,4 @@
 {% set item_col = show_sidebar ? 'col-9 col-md-12' : 'col-12' %}
 {% set sidebar_col = show_sidebar ? 'col-3 col-md-12' : 'col-12' %}
 
-<div id="item">
     {% block item %}{% endblock %}
-
-    {% if show_sidebar %}
-      {% block sidebar %}
-        {% include 'partials/sidebar.html.twig' %}
-      {% endblock %}
-    {% endif %}
-    
-</div>

user/themes/lecampus/templates/partials/newsletters.html.twig

@@ -0,0 +1,12 @@
+<div class="side-newsletter">
+  <div id="mc_embed_signup">
+  <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=96d6b6e702" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+      <div id="mc_embed_signup_scroll">
+    <label for="mce-EMAIL">Recevoir l'actualité du campus</label></br>
+    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
+      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a98b763288f940083bf28857c_96d6b6e702" tabindex="-1" value=""></div>
+      <div class="clear"><input type="submit" value="ok" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+      </div>
+  </form>
+  </div>
+</div>

user/themes/lecampus/templates/partials/reco.html.twig

@@ -0,0 +1,13 @@
+{% set options = { items: {'@page.self': '/nos-references'}, 'limit': 1 } %}
+{% set image = page.media.images|first %}
+
+<div id="reco">
+  {% for p in page.collection(options)%}
+    <div class="title">
+      <h4>{{p.title}}</h4>
+    </div>
+      <div class="txt">
+        {{p.content}}
+      </div>
+  {% endfor %}
+</div>

user/themes/lecampus/templates/partials/sidebar.html.twig

@@ -6,8 +6,8 @@
   <div class="side-agenda">
     <a href="{{p.url}}">
     {% include 'partials/blog/date.html.twig' with {page: p } %}
-        <h3>{{p.title}}</h3>
+        <h5>{{p.title}}</h5>
-        {{p.summary(50)}}
+        {{p.summary(70)}}
     </a>
   </div>
   {% endfor %}

user/themes/lecampus/templates/partials/taxonomylist.html.twig

@@ -1,21 +1,24 @@
 {% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags() : taxonomylist.get() %}
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
+
+{% import _self as macro %}
 
 {% if taxlist %}
 <div class="btn-toolbar filters">
     <div data-toggle="buttons" class="btn-group">
-      <label class="btn btn-default" data-filter="">
+      <label class="btn btn-default tous" data-filter="">
         <input type="radio" name="options">
         Tous
       </label>
     {% for tax,value in taxlist[taxonomy] %}
         {% set label_class = uri.param(taxonomy) == tax ? 'label-primary' : 'label-secondary' %}
-            <label class="btn btn-default" data-filter="{{tax}}">
+            <label class="btn btn-default {{ macro.pageLinkName(tax) }}" data-filter="{{tax}}">
               <input type="radio" name="options" >
               {{tax}}
             </label>
     {% endfor %}
       <div class="btn-group">
-        <label>
+        <label class="btn-default archive">
           <a href="/archive">archive</a>
         </label>
       </div>

user/themes/lecampus/templates/sublog.html.twig

@@ -3,12 +3,14 @@
 {% set image = page.media.images|first %}
 
 {% block body %}
-    <section id="item" class="section blog-listing">
+    <section class="header-wrapper" class="section blog-listing">
       <div class="bandeau">
         {% if image %}
           {{image.html}}
         {% endif %}
       </div>
+    </section>
+    <section class="body-wrapper">
 
       <div class="content">
         <h2>{{page.title}}</h2>