<div id="title">02 CHECK OUT</div>
<div id="container">
  <div id="header">
    <i class="fas fa-bars"></i>
    <h3>My Cart</h3>
    <i class="fas fa-shopping-bag"></i>
  </div>
  <div id="checkout-page">
    <div class="item">
      <img class="item-image" src="https://goo.gl/NFcM8P"/>
      <div class="item-detail">
        <h5 class="item-title">Yellow Concrete Planter + Cactus</h5>
        <div class="item-cal">
          <div>
            <button class="minus"><i class="fas fa-minus"></i></button>
            <span class="amount">1</span>
            <button class="plus"><i class="fas fa-plus"></i></button>
          </div>
          <span class="price">$ 16</span>
        </div>
      </div>
</div>
    <div class="item">
      <img class="item-image" src="https://goo.gl/HXSKjE"/>
      <div class="item-detail">
        <h5 class="item-title">Concrete Cactus Pot White + Cactus / Succulent</h5>
        <div class="item-cal">
          <div>
            <button class="minus"><i class="fas fa-minus"></i></button>
            <span class="amount">1</span>
            <button class="plus"><i class="fas fa-plus"></i></button>
          </div>
          <span class="price">$ 18</span>
        </div>
      </div>
</div>
    <div class="item">
      <img class="item-image" src="https://goo.gl/GMM45u"/>
      <div class="item-detail">
        <h5 class="item-title">Concrete Cactus Pot, Turquoise Succulent</h5>
        <div class="item-cal">
          <div>
            <button class="minus"><i class="fas fa-minus"></i></button>
            <span class="amount">1</span>
            <button class="plus"><i class="fas fa-plus"></i></button>
          </div>
          <span class="price">$ 20</span>
        </div>
      </div>
    </div>
    <button id="checkout">CHECKOUT</button>
  </div>
  <div id="payment-page">
    <div id="credit-card-current" class="credit-card">
      <h3 id="card-number">1234 ∙∙∙∙ ∙∙∙∙ 5678</h3>
      <h1 id="card-decor">VISA</h1>
    </div>
    <ul class="card-list">
      <li class="card-list-item">CARD DETAILS</li>
      <li class="card-list-item">
        <span>Name</span>
        <span>Michelle</span>
      </li>
      <li class="card-list-item">
        <span>Number</span>
        <span>1234 5678 1234 5678</span>
      </li>
      <li class="card-list-item">
        <span>Date</span>
        <span>08 / 20</span>
      </li>
    </ul>
    <button id="payment">PAY NOW</button>
  </div>
</div>

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: 'Montserrat', sans-serif;
  background-color: #EAE6EA;
}

#title{
  font-size: 15rem;
  color: #fff;
  font-weight: 800;
  margin: 0px 3rem;
}

#container{
  width: 320px;
  height: 640px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 40px 4px rgba(0,0,0,0.12);
  z-index: 2;
  padding: 0px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

#header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#checkout-page{
  overflow: hidden;
}

.item{
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  margin-top: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.12);
  perspective: 600px;
  transform-style: preserve-3d;
}

.item-image{
  height: 80px;
  margin-right: 10px;
}

.item-detail{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title{
  margin: 0px;
}

.item-cal{
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plus, .minus{
  outline: none;
  border-radius: 50%;
  width: 26px;
  height: 25px;
  cursor: pointer;
}

.plus:hover, .minus:hover{
  color: #ffb185;
  border: 1px solid #ffb185;
  transition: all .3s;
}

.amount{
  margin: 0px 5px;
}

button#checkout, button#payment{
  margin: 150px 0 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #ffb185;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  box-shadow: 0px 0px 20px 2px rgba(0,0,0,.1);
  opacity: 0;
}

button#checkout:hover, button#payment:hover{
  background-color: #ffc6a6;
  transition: all .3s;
}

#payment-page{
  position: absolute;
  top: 60px;
  width: 88%;
  opacity:0;
}

.credit-card{
  width: 100%;
  height: 200px;
  background-image: url(data:image/png;base64,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);
  background-color: #753acd;
  border-radius: 10px;
  box-shadow: 0px 4px 20px 4px rgba(0,0,0,.12);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

#card-number{
  color: #fff;
  letter-spacing: 4px;
}

#card-decor{
  font-size: 50px;
  font-weight: 900;
  font-style: italic;
  color: rgba(255,255,255,0.4);
  position: absolute;
  right: -5px;
  bottom: 0px;
  margin: 0px;
}

.card-list{
  padding: 0px;
}

.card-list-item{
  list-style: none;
  margin: 1rem 0;
  padding: .6rem 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,.12);
  display: flex;
  justify-content: space-between;
}

.card-list-item > span{
  font-weight: 500;
  color: #a1a1a1;
}

.card-list-item:first-child, .card-list-item > span:first-child{
  font-weight: 700;
  color: #000;
}

// Define variables
const item = document.getElementsByClassName("item");
const cardItem = document.getElementsByClassName("card-list-item");
const checkoutButton = document.getElementById("checkout");
const paymentButton = document.getElementById("payment");
const checkoutPage = document.getElementById("checkout-page");
const paymentPage = document.getElementById("payment-page");


// Define timelines
const tlCheckOut = new TimelineMax();
const tlPayment = new TimelineMax({paused:true});

tlCheckOut
  .staggerFromTo(item, 1.2, { autoAlpha:0, rotationX: "180deg"}, { autoAlpha:1, rotationX: "0deg", transformOrigin: "top center", ease: Back.easeOut }, 0.3)
  .to(checkoutButton, .5, { marginTop:"100px", autoAlpha:1, ease: Power2.easeOut }, "-=1")

tlPayment
  .to(checkoutPage, .5, { x:-300, display:"none", ease: Back.easeOut })
  .fromTo(paymentPage, .5, { css:{left:320}}, { css:{left:20, opacity:1}, ease: Back.easeOut}, "-=0.4")
  .staggerFromTo(cardItem, .5, { autoAlpha:0, rotationX: "180deg"}, { autoAlpha:1, rotationX: "0deg", transformOrigin: "top center", ease: Back.easeOut }, 0.02)
  .to(paymentButton, .5, { marginTop:"60px", autoAlpha:1, ease: Power2.easeOut }, "-=0.3")
  

// Manipulate stages
checkoutButton.addEventListener("click", paymentPageIn);

function paymentPageIn(){
  tlPayment.play();
}