Add timeline to empresa section

client/css/styles.css

@@ -41,9 +41,6 @@ body {
     max-width: none;
 }
 
-.section {
-    /*margin-bottom: 30px;*/
-}
 .section > .container {
     padding: 30px 0px;
     text-align: justify;
@@ -151,6 +148,7 @@ ul.navbar-list > li > a {
   line-height: 6.5rem;
   color: #222;
   transition: all 0.5s;
+  border-bottom: 1px solid transparent;
 }
 
 ul.navbar-list > li > a:hover {
@@ -162,3 +160,10 @@ ul.navbar-list > li > a > object {
   width: 3em;
   vertical-align: middle;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0
+}

client/css/timeline.css

@@ -0,0 +1,68 @@
+.timeline {
+    position: relative;
+    list-style: none;
+}
+
+.timeline::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: #dedede ;
+    left: 50%;
+    margin-left: -10px;
+}
+
+.timeline li {
+    position: relative;
+    opacity: 0;
+    transition: opacity .25s ease-in-out;
+}
+
+.timeline li .dot {
+    width: 12px;
+    height: 12px;
+    margin: 0 0 0 -15px;
+    text-align: center;
+    left: 50%;
+    top: 0; 
+    position: absolute;
+    border-radius: 10px;
+    background: #999;
+}
+
+.timeline li:nth-child(odd) .content {
+    margin: 0 0 0 53%;
+}
+
+.timeline li:nth-child(even) .content {
+    position: relative;
+    width: 44%;
+    text-align: right;
+}
+
+@media screen and (max-width: 47.2em) {
+	.timeline:before {
+		left: 1px;
+	}
+
+    .timeline li .dot {
+        left: 1px;
+    }
+
+    .timeline li:nth-child(odd) .content,
+    .timeline li:nth-child(even) .content {
+        width: 100%;
+        position: relative;
+        padding: 0px 10px;
+        text-align: left;
+        margin: 0px;
+        right: 0px;
+    }
+}
+
+.timeline li.discover-li {
+    opacity: 1;
+
+}

client/js/vue-scroll.js

@@ -0,0 +1,77 @@
+(function(){
+    var Vue;
+    var isVueLoaded = true;
+
+    if(typeof require === 'undefined'){
+        Vue = Window.Vue;
+    }else{
+        Vue = require('vue');
+    }
+
+    if(!Vue) {
+        isVueLoaded = false;
+        console.warn('Vue is not loaded yet. Please make sure it is loaded before installing vue-scroll.');
+    }
+
+    var scrollPlugin = { 
+        
+        install: function(Vue, options){
+
+            var handleListeners = function(el, current, old){
+                if(el==document.body){
+                    document.onscroll = function(e){
+                        current && current(e, { scrollTop: document.body.scrollTop, scrollLeft: document.body.scrollLeft});
+                    }
+                }else if(el.addEventListener){
+                    old && el.removeEventListener('scroll', old);
+                    el.addEventListener('scroll',function(e){
+                        current && current(e, { scrollTop: el.scrollTop, scrollLeft: el.scrollLeft});
+                    });
+                }else {
+                    old && el.detachEvent('onscroll', old);
+                    el.attach('onscroll',function(e){
+                        e = e || window.event;
+                        current && current(e, { scrollTop: el.scrollTop, scrollLeft: el.scrollLeft});
+                    });
+                }
+            }
+            
+            Vue.directive('scroll', {
+                bind: function(el, binding, vnode){
+                    if(!binding.value || typeof binding.value !== 'function'){
+                        throw new Error('The scroll listener is not a function');
+                    }
+                    handleListeners(el, binding.value, binding.oldValue);
+                },
+                inserted: function(el, binding){
+                    //To do, check whether el is scrollable and give warn message if it's not'
+                },
+                update: function(el, binding){
+                    if(binding.value === binding.oldValue){
+                        return;
+                    }
+                    if(!binding.value || typeof binding.value !== 'function'){
+                        throw new Error('The scroll listener is not a function');
+                    }
+                    handleListeners(el, binding.value, binding.oldValue);
+                },
+                unbind: function(el, binding){
+                    if(binding.value && typeof binding.value === 'function'){
+                        if(el.removeEventListener){
+                            el.removeEventListener('scroll', binding.value);
+                        }else{
+                            el.detachEvent('onscroll', binding.value);
+                        }
+                    }
+                }
+            })
+
+        }
+    }
+
+    if(typeof module !== 'undefined' && typeof module.exports !== 'undefined'){
+        module.exports = scrollPlugin;
+    }else{
+        window.vScroll = scrollPlugin;
+    }
+})()