Cacher is the code snippet organizer for pro developers

body{
  background:#3498db;
}
.main{
  background:#e67e22;
  display:block;
  padding:1em;
  overflow: hidden;
  width: 85%;
  margin: 20% auto;
  box-shadow: 0 6px 6px -6px black;
}
.main h1 {
  color: #FFF;
  text-shadow: 0 2px 3px #7E4D10;
  text-align: center;
  margin: 0.5em auto;
}
.alf {width: 45%;float: left;text-align:left;color: #ecf0f1;}
.alice {width: 45%;float: right;text-align:right;color:#16a085;}

.alf,.alice {
  display:block;
  margin-bottom: 0.5em;
  width: 100%;
  text-shadow:0 1px 2px black;
}
.alf img,.alice img{
  border:2px solid #ecf0f1;
  box-shadow:0 6px 6px -6px black;
  border-radius:100%;
  width:100px;
  height:100px;
  margin-left:0.5em;
  margin-right:0.5em;
}
.alf img{float:left;}
.alice img{float:right;}

.main{transition: margin 1s ease;}
.video{
  display: block;
  width: 90%;
  display:block;
  padding:1em;
  margin: auto;
}

.video iframe {
  margin: -20% auto;
  display: block;
  padding: 1em;
  background: #E67E22;
  text-align: center;
  box-shadow: 0 6px 6px -6px #000;
} 

(function(document,window){
  
  'use-strict';
  
  var main,result,stop = false;
  
  if (typeof app === 'undefined')
  
  app = {}
  
  app.run = {
    
    init: function() {
      this.render();
    },
    // typing effect 
    typing:function (){
      if (obj){
        obj.innerHTML= t.substr(0, i);i++;
        var time = setTimeout("app.run.typing()",70);
        if(stop === true){
          clearTimeout(time);
        }
      }
    },
    // runTypin('hello')
    runTyping:function(el,elem){
      obj=document.querySelector(elem),t=el,i=1;app.run.typing();
    }, 
    // End typing effect
   
    
    // render result
    render:function(){
      this.runTyping(this.words.one,'.alf>h3');
      setTimeout(function(){
        app.run.runTyping(app.run.words.two,'.alice>h3');
      },1500);
       setTimeout(function(){
        app.run.runTyping(app.run.words.three,'.alf>h3');
      },3000);     
       setTimeout(function(){
        app.run.runTyping(app.run.words.four,'.alice>h3');
      },4000);      
      setTimeout(function(){
        app.run.runTyping(app.run.words.five,'.alice>h3');
      },6000);     
      setTimeout(function(){
        app.run.runTyping(app.run.words.six,'.alf>h3');
      },8000);      
      setTimeout(function(){
        app.run.runTyping(app.run.words.seven,'.alice>h3');
      },10000); 
      setTimeout(function(){
        app.run.runTyping(app.run.words.eight,'.alf>h3');
      },11000);   
      setTimeout(function(){
        app.run.runTyping(app.run.words.nine,'.alice>h3');
      },12500);
       setTimeout(function(){
        app.run.runTyping(app.run.words.ten,'.alf>h3');
      },15000);     
       setTimeout(function(){
        app.run.runTyping(app.run.words.eleven,'.alice>h3');
      },17500);      
       setTimeout(function(){
        app.run.runTyping(app.run.words.twelve,'.alf>h3');
      },20000); 
       setTimeout(function(){
        app.run.runTyping(app.run.words.thirteen,'.alf>h3');
      },22500);   
      setTimeout(function(){
        app.run.runTyping(app.run.words.fourteen,'.alice>h3');
      },25000);     
      setTimeout(function(){
        app.run.runTyping(app.run.words.fiveteen,'.alf>h3');
      },27500);      
      setTimeout(function(){
        app.run.runTyping(app.run.words.sixteen,'.alice>h3');
      },30000); 
      setTimeout(function(){
        app.run.runTyping(app.run.words.seventeen,'.alf>h3');
      },32500);     
      setTimeout(function(){
        document.querySelector('.main').style.marginTop = '5px';
      },35000);      
      setTimeout(function(){
        document.querySelector('.video').innerHTML = app.run.words.eighteen;
      },37500);   
      setTimeout(function(){
        app.run.runTyping(app.run.words.nineteen,'.alice>h3');
      },40000);   
      setTimeout(function(){
        app.run.runTyping(app.run.words.twuenty,'.alf>h3');
      },42500);  
      setTimeout(function(){
        app.run.runTyping(app.run.words.twuentyone,'.alice>h3');
      },45000);       
       setTimeout(function(){
        app.run.runTyping(app.run.words.twuentytwo,'.main');
      },47000);  
      
     // end
     setTimeout(function(){stop = true;},50000);
      
    },  
    
    // The words
    words:{
      'one': 'Hello Alice',
      'two': 'Hello Alf, how do you do',
      'three': 'Fine, thanks and you?',
      'four': 'Well thanks.',
      'five': 'What are you doing?',
      'six': 'I play guitar',
      'seven': '  Nice....  ',
      'eight': '  And you?  ',
      'nine': 'Learning Javascript in Codepen',
      'ten': 'I like Codepen',
      'eleven': '  Me too...  ',
      'twelve': '  :)  ',
      'thirteen': 'Ahh sorry i have a question...',
      'fourteen': 'Tell me.',
      'fiveteen': 'How to make Tortilla with Chorizo?',
      'sixteen': 'Ah hehe ok i put a video for you',
      'seventeen': 'Thanks ;)',
      'eighteen': '<iframe width="560" height="315" src="//www.youtube.com/embed/rqwdlnKF4Pc?autoplay=1" frameborder="0" allowfullscreen></iframe>',
      'nineteen': 'click in play please',
      'twuenty': 'Ok thanks alice see you!',
      'twuentyone': 'Bye alf.',
      'twuentytwo': '<h1> :: The End :: <h1>'
    }
  };
  
  
  // init 
  app.run.init();
})(document,window);

<div class="main">
  <div class="alf">
    <img src="http://labs.nakome.com/fotos/ALF.jpg" alt=""/>
    <h3></h3>
  </div>
  <div class="alice">
    <img src="http://labs.nakome.com/fotos/alice.jpg" alt=""/>
    <h3></h3>
  </div>
</div>

  <div class="video"></div>