<div class="ticket">
  <div class="datas">
    <a class="link">
      <div class="ribbon">
        <div class="label">LIMITED</div>
      </div>
      <span>TOMORROWLAND</span>
      <strong>10'</strong>
      <em>Green PASS</em>
    </a>
  </div>
  <a class="button">ORDER NOW!</a>
</div>
<div class="ticket-in">
  <div class="content">
    <div class="pass">
      <h1>Dreamville Limited</h1>
    </div>
    <span>PREMIUM</span>
    <em>2015</em>
  </div>
</div>

/*  ========================
        BASIC STYLING
    ========================  */
html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  background: rgba(24,67,99,1);
  background: -moz-linear-gradient(-45deg, rgba(24,67,99,1) 0%, rgba(24,86,97,1) 28%, rgba(24,86,97,1) 69%, rgba(24,67,99,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(24,67,99,1)), color-stop(28%, rgba(24,86,97,1)), color-stop(69%, rgba(24,86,97,1)), color-stop(100%, rgba(24,67,99,1)));
  background: -webkit-linear-gradient(-45deg, rgba(24,67,99,1) 0%, rgba(24,86,97,1) 28%, rgba(24,86,97,1) 69%, rgba(24,67,99,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(24,67,99,1) 0%, rgba(24,86,97,1) 28%, rgba(24,86,97,1) 69%, rgba(24,67,99,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(24,67,99,1) 0%, rgba(24,86,97,1) 28%, rgba(24,86,97,1) 69%, rgba(24,67,99,1) 100%);
  background: linear-gradient(135deg, rgba(24,67,99,1) 0%, rgba(24,86,97,1) 28%, rgba(24,86,97,1) 69%, rgba(24,67,99,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184363', endColorstr='#184363', GradientType=1 );
}

a, a.link {
  display: block;
  padding: 33px 0 0 0;
  color: #313131;
  text-decoration: none;
  cursor: pointer;
}



/*  ================================================
            TICKET STYLING & COUPON EFFECT
    ================================================  */
.ticket {
position: relative;
display: table;
width: 450px;
height: 228px;
margin: 50px auto 0 auto;
padding-bottom: 57px;
background: #F4F4F4;
text-align: center;
}

.ticket::before {
  content:"";
  position: absolute;
  top: 54.5%;
  left: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #a52958;
}

.ticket::after {
  content:"";
  position: absolute;
  top: 54.5%;
  right: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #185661;
}

/*  ================================================
                    RIBBON EFFECT
    ================================================  */
.ribbon {
position: absolute;
display: block;
top: -4px;
right: -4px;
width: 110px;
height: 110px;
overflow: hidden;
}

.ribbon .label {
position: relative;
display: block;
left: -10px;
top: 23px;
width: 158px;
padding: 10px 0;
font-size: 15px;
text-align: center;
color: #fff;
background-color: #e85e68;
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
-ms-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
-webkit-transform: rotate(45deg) translate3d(0,0,0);
-moz-transform: rotate(45deg) translate3d(0,0,0);
-ms-transform: rotate(45deg) translate3d(0,0,0);
transform: rotate(45deg) translate3d(0,0,0);
}

.label:before, .label:after {
content: '';
position: absolute;
bottom: -4px;
border-top: 4px solid #a71c26;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}

.label:before {
left: 0;
}

.label:after {
right: 0;
}



/*  ================================================
                        CONTENT
    ================================================  */
span {
  display: block;
  font-size: 29px;
  color: #540c5d;
}

strong {
  display: block;
  font-size: 85px;
  color: #a52958;
  margin: 0 0 10px 0;
}

em {
  display: block;
  font-size: 29px;
  font-style: normal;
  color: #86db78;
  border-top: 2px dashed rgba(0,0,0,.1);
  padding: 10px 0;
}



/*  ================================================
              ACTION CALL & ARROW UP EFFECT
    ================================================  */
.button {
  display: block;
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 57px;
  padding: 0;
  line-height: 58px;
  text-align: center;
  border-radius: 0;
  background-color: #86db78;
}

.button::before {
  content:"";
  position: absolute;
  top: -10px;
  left: calc(50% - 20px);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 10px solid #86db78;
}



/*  ================================================
                    INSIDE TICKET
    ================================================  */
.ticket-in {
  width: 450px;
  height: 280px;
  position: absolute;
  background: #a52958;
  top: 55px;
  left: calc(50% - 280px);
  z-index: -1;
  transition: left 2s;
}

.ticket-in.active {
  left: calc(50% - 585px);
  transition: left 1.5s;
}

.content {
  height: 260px;
  margin: 8px;
  border: 2px dashed #e0c68e;
  border-radius: 10px;
}

.content h1 {
  font-size: 29px;
  color: #4c483b;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: 'Berkshire Swash', cursive;
}

.pass {
  display: block;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 57px;
  margin: 15px 0 0 15px; 
  padding: 0;
  line-height: 58px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  background: #eadbb8;
  border: 1px solid #82113c;
}

.pass::before {
  content:"";
  position: absolute;
  bottom: -10px;
  left: calc(50% - 20px);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 10px solid #eadbb8;
}

.content span {
  margin: 85px 0 0 0;
  text-align: center;
  color: #82113c;
}

.content em {
  border: none;
  text-align: center;
  font-size: 89px;
  color: #eadbb8;
  text-shadow: 1px 1px 0 rgba(0,0,0,.7);
}

$('.ticket').click(function(){
  $('.ticket-in').toggleClass('active');
});

/*
    Click on the ticket to get the special coupon access to Dreamville!!!
*/