A Pen by Moncho Varela.

12/8/2013 - 3:19 PM

*,*:before,*:after{
  box-sizing:border-box;
}
body{
  position:relative;
  height:100%;
  background:#34495e;
}
.main{
  position:relative;
  background:#ecf0f1;
  display:block;
  color:#ecf0f1;
  margin:0.5em;
  padding:1em;
}
.main h1{
  font-family: 'Monsieur La Doulaise', cursive;
  text-align:center;
  color:#7f8c8d;
}
.box{
  position:fixed;
  width:200px;
  height:550px;
  margin:0.5em;
}
.bottle{
  diplay:block;
  text-align:center; 
}
.head_bottle{
  display:block;
  margin:0 auto;
  width:80px;
  height:100px;
  background:white;
}
.body_bottle{
  display:block;
  margin:0 auto;
  padding:0.5em;
  border-radius:45px 45px 10px 10px;
  background:white;  
}
.body_bottle h1,
.body_bottle h2{
  font-family: 'Plaster', cursive;
  color: #1ABC9C;
}


.body_bottle small{
  font-family: 'Monsieur La Doulaise', cursive;
  font-size:1.5em;
  color: #95A2A1;
}
.divider{}
.text_bottle{
  font-family: 'Monsieur La Doulaise', cursive;
  font-size:1em;
  color: #ecf0f1;
}


.first,.second_left,
.second_right,.third_left,
.third_right,.fourth_left,
.fourth_right{
  top:57%;
  margin-left:-100px;
  margin-top:-275px;
}

.fourth_left{left:20%;}
.third_left{left:30%;}
.second_left{left:40%}
.first{left:50%}
.second_right{left:60%}
.third_right{left:70%;}
.fourth_right{left:80%;}


.fourth_left,.third_left,
.second_left,.first,
.second_right,.third_right,
.fourth_right{
  opacity:0;
} 


.cap{
  display:block;
  margin:0 auto;
  width:90px;
  height:30px;
  border-radius:5px;
}


.first .cap{
  border: 1px solid #2C3641;
  background:#2c3e50;
}
.first .head_bottle{
  background:#34495e;
  border-left: 1px solid #2c3e50;
  border-right: 1px solid #2c3e50;
}
.first .body_bottle{
  background:#34495e;
  border-left: 1px solid #2c3e50;
  border-right: 1px solid #2c3e50;
  box-shadow: 0 6px 6px -3px #858585;
}


.second_left .cap,
.second_right .cap{
  border: 1px solid #BE8217;
  background: #f39c12;
}
.second_left .head_bottle,
.second_right .head_bottle{
  background: #f1c40f;
  border-left: 1px solid #f39c12;
  border-right: 1px solid #f39c12;
}
.second_left .body_bottle,
.second_right .body_bottle{
  background: #f1c40f;
  border-left: 1px solid #f39c12;
  border-right: 1px solid #f39c12;
  box-shadow: 0 6px 6px -3px #858585;
}


.third_left .cap,
.third_right .cap{
  border: 1px solid #C03B22;
  background: #d35400;
}
.third_left .head_bottle,
.third_right .head_bottle{
  background: #e67e22;
  border-left: 1px solid #d35400;
  border-right: 1px solid #d35400;
}
.third_left .body_bottle,
.third_right .body_bottle{
  background: #e67e22;
  border-left: 1px solid #d35400;
  border-right: 1px solid #d35400;
  box-shadow: 0 6px 6px -3px #858585;
}


.fourth_left .cap,
.fourth_right .cap{
  border: 1px solid #922323;
  background: #cc3f31;
}
.fourth_left .head_bottle,
.fourth_right .head_bottle{
  background: #e74c3c;
  border-left: 1px solid #cc3f31;
  border-right: 1px solid #cc3f31;
}
.fourth_left .body_bottle,
.fourth_right .body_bottle{
  background: #e74c3c;
  border-left: 1px solid #cc3f31;
  border-right: 1px solid #cc3f31;
  box-shadow: 0 6px 6px -3px #858585;
}

script.js

// first second_
(function(){
  'use-strict';
  
  
  $('.main').css({
    width: $(window).width() - 30,
    height:  $(window).height() - 30
  });
  
  $(window).resize(function(){
    $('.main').css({
      width: $(window).width() - 30,
      height:  $(window).height() - 30,
    });  
  });
  
  // Show function
  var show = function(){
    // show 
    setTimeout(function(){
      $('.fourth_left,.fourth_right').animate({
        opacity:1
      },500);
    },500);
    setTimeout(function(){
      $('.third_left,.third_right').animate({
        opacity:1
      },500);    
    },700);
    setTimeout(function(){
      $('.second_left,.second_right').animate({
        opacity:1
      },500);    
    },800);
    setTimeout(function(){
      $('.first').animate({
        opacity:1
      },500); 
    },1000);
  };
  
  
  // Hide function
  var hide = function(){
    // show 
    setTimeout(function(){
      $('.fourth_left,.fourth_right').animate({
        opacity: 0
      },500);
    },500);
    setTimeout(function(){
      $('.third_left,.third_right').animate({
       opacity: 0
      },500);    
    },700);
    setTimeout(function(){
      $('.second_left,.second_right').animate({
        opacity: 0
      },500);    
    },800);
    setTimeout(function(){
      $('.first').animate({
        opacity: 0
      },500); 
    },1000);
  };
  
  
  
  // show bottles
  show();
  // wait and hide bottles
  setTimeout(function(){hide();},4000);
  
  //loop 
  setInterval(function(){
    // show bottles
    show();
    // wait and hide bottles
    setTimeout(function(){hide();},4000);
  },5000);
  
  
}).call(this);

index.html

<link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise|Plaster' rel='stylesheet' type='text/css'>


<div class="main">
  <h1>Remnants of last night</h1>
  <div class="box fourth_left">
    <div class="bottle">
      <div class="cap"></div>
      <div class="head_bottle"></div>
      <div class="body_bottle">
        <h1>CODEPEN</h1>
        <small>The original</small>
        <h1>VODKA</h1>
        <div class="divider"></div>
        <div class="text_bottle">
          <p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="box third_left">
    <div class="bottle">
      <div class="cap"></div>
      <div class="head_bottle"></div>
      <div class="body_bottle">
        <h1>CODEPEN</h1>
        <small>The original</small>
        <h1>VODKA</h1>
        <div class="divider"></div>
        <div class="text_bottle">
          <p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="box second_left">
    <div class="bottle">
      <div class="cap"></div>
      <div class="head_bottle"></div>
      <div class="body_bottle">
        <h1>CODEPEN</h1>
        <small>The original</small>
        <h1>VODKA</h1>
        <div class="divider"></div>
        <div class="text_bottle">
          <p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>
        </div>
      </div>
    </div>
  </div>
  
  
  
  <div class="box fourth_right">
    <div class="bottle">
      <div class="cap"></div>
      <div class="head_bottle"></div>
      <div class="body_bottle">
        <h1>CODEPEN</h1>
        <small>The original</small>
        <h1>VODKA</h1>
        <div class="divider"></div>
        <div class="text_bottle">
          <p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas. </p>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="box third_right">
    <div class="bottle">
      <div class="cap"></div>
      <div class="head_bottle"></div>
      <div class="body_bottle">
        <h1>CODEPEN</h1>
        <small>The original</small>
        <h1>VODKA</h1>
        <div class="divider"></div>
        <div class="text_bottle">
          <p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="box second_right">
    <div class="bottle">
      <div class="cap"></div>
      <div class="head_bottle"></div>
      <div class="body_bottle">
        <h1>CODEPEN</h1>
        <small>The original</small>
        <h1>VODKA</h1>
        <div class="divider"></div>
        <div class="text_bottle">
          <p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="box first">
    <div class="bottle">
      <div class="cap"></div>
      <div class="head_bottle"></div>
      <div class="body_bottle">
        <h1>CODEPEN</h1>
        <small>The original</small>
        <h1>VODKA</h1>
        <div class="divider"></div>
        <div class="text_bottle">
          <p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>
        </div>
      </div>
    </div>
  </div>
  
</div>

A-Pen-by-Moncho-Varela.markdown

Rendered
Source

A Pen by Moncho Varela

Today Hangouver.

A Pen by Moncho Varela on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A Pen by Moncho Varela.

A Pen by Moncho Varela