<div class="container">
    <div class="mobile-holder">
      <div class="hamburger-container">
        <div class="hamburger"></div>
        <div class="plus"></div>
      </div>
      <div class="menu">
      
      </div>
      <div class="page-body">
        <div class="row first"></div>
        <div class="row second"></div>
        <div class="row third"></div>
        <div class="row fourth"></div>
        <div class="row fifth"></div>
      </div>
    </div>
  </div>

html, body {
  width: 100%;
  height: 100%;
}

/*Setting font and bg color*/
/* line 12, ../sass/_timer.scss */
body {
  background-color: #322830;
  font-family: 'Roboto', sans-serif;
}

.container {
  height: 100%;
}

.mobile-holder {
  width: 300px;
  height: 550px;
  margin: 50px auto;
  border: 2px solid #848484;
  border-radius: 7px;
  overflow: hidden;
  background-color: #445369;
}

.hamburger-container {
  background-color: #FD898A;
  width: 200px;
  height: 200px;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-top: -115px;
  margin-left: -123px;
  z-index: 10;
}

.hamburger {
  width: 22px;
  position: absolute;
  left: 142px;
  border-top: 2px solid #fff;
  cursor: pointer;
  z-index: 1;
  top: 136px;
}

.hamburger:after {
  content: "";
  display: block;
  border-top: 2px solid #fff;
  margin-top: 4px;
}
.hamburger:before {
  content: "";
  display: block;
  border-top: 2px solid #fff;
  margin-top: 4px;
}

.plus {
  width: 20px;
  position: absolute;
  border-top: 3px solid #fff;
  cursor: pointer;
  z-index: 1;
  left: 86px;
  top: 165px;
}
.plus:after {
  content: "";
  display: block;
  border-top: 3px solid #fff;
  margin-top: -3px;
  transform: rotate(90deg);
}

.page-body {
  width: 100%;
  height: 100%;
  position: relative;
  top: -85px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transform-origin: 0 0;
}

.hamburger-container.open {
  transform: rotate(-50deg);
}

.page-body.open {
  transform: rotate(-30deg);
}

.row {
  height: 140px;
}
.first {
  background-color: #FDEECF;
}
.second {
  background-color: #FDD0BC;
}
.third {
  background-color: #EDB4B5;
}
.fourth {
  background-color: #CB86A0;
}
.fifth {
  background-color: #E6A6A8;
}

var $ham = document.querySelector('.hamburger-container'),
    $pageBody = document.querySelector('.page-body');
  $ham.onclick = function () {
    if ($ham.classList.contains('open')) {
      $pageBody.classList.remove('open');
      $ham.classList.remove('open');
    } else {
      $pageBody.classList.add('open');
      $ham.classList.add('open');
    }
  };