added blabla block to home page

sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -8606,6 +8606,46 @@ body.home-v2 #center {
     @media only screen and (max-width: 40em) {
       #home-v2 > .panel-panel > div > .panel-pane.formations {
         height: auto; } }
+  #home-v2 > .panel-panel > div > .panel-pane.blabla {
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    -webkit-transition: box-shadow 0.3s ease-out;
+    transition: box-shadow 0.3s ease-out;
+    position: relative;
+    height: 300px;
+    margin-top: 30px;
+    background-color: #000;
+    color: #FFF; }
+    #home-v2 > .panel-panel > div > .panel-pane.blabla:hover {
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
+    #home-v2 > .panel-panel > div > .panel-pane.blabla a {
+      color: #FFF; }
+    #home-v2 > .panel-panel > div > .panel-pane.blabla .node {
+      padding: 0 0 0 30%;
+      width: 70%; }
+      #home-v2 > .panel-panel > div > .panel-pane.blabla .node:before {
+        content: " ";
+        background: transparent url("../img/formations.png") no-repeat center center;
+        background-clip: padding-box;
+        background-size: contain;
+        position: absolute;
+        left: 0;
+        z-index: 2;
+        width: 30%;
+        height: 100%; }
+    #home-v2 > .panel-panel > div > .panel-pane.blabla .group-content-wrapper {
+      padding: 1em;
+      position: relative; }
+      #home-v2 > .panel-panel > div > .panel-pane.blabla .group-content-wrapper .field-name-title-field {
+        font-size: 2.1em;
+        font-weight: 300; }
+      #home-v2 > .panel-panel > div > .panel-pane.blabla .group-content-wrapper .field-name-body {
+        margin-top: 1em;
+        max-width: 39em; }
+      #home-v2 > .panel-panel > div > .panel-pane.blabla .group-content-wrapper .field-name-field-liens a {
+        color: #000; }
+    @media only screen and (max-width: 40em) {
+      #home-v2 > .panel-panel > div > .panel-pane.blabla {
+        height: auto; } }
   #home-v2 > .panel-panel > div > .panel-pane.services {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
     -webkit-transition: box-shadow 0.3s ease-out;

sites/all/themes/gui/materiobasetheme/js/script.js

@@ -350,12 +350,18 @@
             .attr('data--'+(i+1)*75+'-bottom-top', 'transform:translateY(20em);opacity:0;')
             .attr('data-center-top', 'transform[quadratic]:translateY(0em);opacity:1;');
         });
-
+        //
         // Formations
         $('.panel-pane.formations .group-content-wrapper', '#home-v2')
           .attr('data-50-bottom-top', 'transform:translateX(20em);opacity:0;')
           .attr('data-center-top', 'transform[quadratic]:translateX(0em);opacity:1;');
-        // Formations
+
+        // Blabla
+        $('.panel-pane.blabla .group-content-wrapper', '#home-v2')
+          .attr('data-50-bottom-top', 'transform:translateX(20em);opacity:0;')
+          .attr('data-center-top', 'transform[quadratic]:translateX(0em);opacity:1;');
+          
+        // Services
         $('.panel-pane.services .group-content-wrapper', '#home-v2')
           .attr('data-50-bottom-top', 'transform:translateX(20em);opacity:0;')
           .attr('data-center-top', 'transform[quadratic]:translateX(0em);opacity:1;');
@@ -1531,14 +1537,14 @@
         .change(function(event){
           // trace('changed');
           // console.log("Changed");
-          
+
           // replaced by conditional built in webform
           // if( $('input[type="radio"]:checked', this).is('#edit-submitted-column-left-membership-options-3') ){
           //   $('.webform-component-column-right--collaborators').show();
           // }else{
           //   $('.webform-component-column-right--collaborators').hide();
           // }
-          
+
           $('div.form-item.selected', this).removeClass('selected');
           $('input[type="radio"]:checked', this).parents('div.form-item').addClass('selected');
         })

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -3718,6 +3718,47 @@ body.home-v2{
         height:auto;
       }
     }
+    &.blabla{
+
+      @include shaddowed();
+      position: relative;
+      height:300px;
+      margin-top: 30px;
+      background-color: #000;
+      color: #FFF;
+      a{color: #FFF;}
+
+      .node{
+        padding:0 0 0 30%; width:70%;
+
+        &:before{
+          content:" ";
+          background: transparent url("../img/formations.png") no-repeat center center;
+          background-clip: padding-box;
+          background-size: contain;
+          position: absolute; left:0;
+          // border: 1px solid red;
+          z-index: 2;
+          width:30%; height:100%;
+          // padding:0.5em;
+        }
+      }
+
+      .group-content-wrapper{
+        padding:1em; position:relative;
+        .field-name-title-field{
+          font-size: 2.1em; font-weight: 300;
+        }
+        .field-name-body{
+          margin-top: 1em;
+          max-width: 39em;
+        }
+        .field-name-field-liens a{color:#000;}
+      }
+      @media #{$small-only}{
+        height:auto;
+      }
+    }
     &.services{
       @include shaddowed();
       background-color: #FFF;