<div class="container">
  <div class="book-cover">hello</div>
  <div class="close" onclick="closeBox()">x</div>
    <div class="left-side">
        <div class="inner">
            <div class="user-box">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97655/profile/profile-512.jpg?1" class="avatar" alt="me" />
                <div class="user-name">Sceendy</div>
                <div class="date">Aug 19</div>
            </div>
            <div class="blog-box">
                <h1 class="blog-title">Make me <br/>your mentor</h1>
                <p class="blog-intro">I'm serious. Make me your mentor now!</br>
                    Like everyday, I was reaching towards my 'inbox zero'
                    <br/> goal and I found this newsletter from 99u.com.
                    <br/>It had this story titled 'This is why you don't have a mentor.'
                    <br/>I could easily relate to that title.</p>
                <a class="btn-more">Read more</a>
                <div class="icons">
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-facebook"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="right-side">
    </div>
</div>

body
  min-height: 100%
  margin: 0
  padding: 0
  font-family: 'Cardo', serif
  color: #000
  font-size: 13px
  background-color: #515CAB
  background-size: cover
  @media screen and (max-width: 480px)
    background: #fff

.container
  width: auto
  max-width: 720px
  height: 500px
  margin: 40px auto
  display: block
  box-shadow: -1px 4px 25px 1px rgba(0,0,0,0.75)
  position: relative
  overflow: hidden
  background: #fff
  
  .book-cover
    display: none
  
.left-side
  background: #fff
  float: left
  width: 50%
  position: relative
  height: 100%
  z-index: 2

  .inner
    z-index: 2
    padding: 30px 0 30px 30px
  @media screen and (max-width: 480px)
    background: none
    width: 100%
    float: none
    
.right-side
  background-color: #FFCA3A
  float: left
  width: 50%
  height: 100%
  padding: 10px 0
  background-size: cover
  position: relative
  z-index: 1
  height: 100%
  &:before /*temporary*/
    content: ''
    height: 100%
    width: 105px
    background: #fff
    position: absolute
    top: 0
    left: -49px
    -webkit-transform: skew(10deg)
    -moz-transform: skew(10deg)
    -o-transform: skew(10deg)
    z-index: -9
    @media screne and (max-width: 480px)
      display: none
  @media screen and (max-width: 480px)
    width: 100%
    position: absolute
    top: 0
    left: 0
    opacity: 0.3
    z-index: 0
  
.user-box
  padding-top: 15px
  .avatar
    border-radius: 50%
    width: 50px
    display: inline-block
    margin-right: 10px
    float: left

  .user-name
    font-family: 'Nunito', sans-serif
    display: inline-block
    margin-top: 10px
    font-weight: 700
    line-height: 1
    font-size: 1rem
  
  .date
    font-size: 0.7rem
    font-style: italic
    line-height: 1
  
.blog-title
  padding-top: 15px
  font-size: 2.8rem
  font-family: 'Helvetica', sans-serif
  &:after
    content: '_'
    font-weight: 900
    display: block

p
  font-size: 0.8rem
  margin: 0
  
.btn-more
  text-transform: capitalize
  display: inline-block
  border-bottom: transparent 2px solid
  &:after
    content: '>'
    margin-left: 10px
    font-weight: 700
  &:hover
    cursor: pointer
    border-bottom: #000 2px solid
    transition: border-bottom 1s ease

.icons
  margin-top: 20px
  color: #000
  .fa
    text-align: center
    padding: 5px
    width: 20px
    font-size: 1.1rem
    &:hover
      cursor: pointer
      background: #000
      color: #fff
    
.close
  position: absolute
  right: 0
  font-size: 1.4rem
  color: #fff
  font-family: sans-serif
  padding: 5px 10px
  background: #000
  z-index: 9999
  &:hover
    cursor: pointer
    background: #fff
    color: #444
  @media screen and (max-width: 480px)
    display: none
  
.animation-in
  -webkit-transform-origin: 87% 10px
  -webkit-transform: scaleX(-1) translateX(-100px)
  -webkit-transition-property: -webkit-transform-origin, -webkit-transform
  -webkit-transition-duration: 2s
  &:after
    -webkit-transform: skew(0deg)
    -moz-transform: skew(0deg)
    -o-transform: skew(0deg)
    -webkit-transition-duration: 2s
  .inner
    visibility: hidden
    transition-duration: 500ms
    .book-cover
      display: block
      position: absolute
      top: 45%
      left: 45%
  
.animation-out
  -webkit-transform: translateX(0px)
  -webkit-transition-property: -webkit-transform-origin, -webkit-transform
  transition-duration: 2s
  &:after
    -webkit-transform: skew(10deg)
    -moz-transform: skew(10deg)
    -o-transform: skew(10deg)
    transition-duration: 2s
  .inner
    transition-property: visibility
    transition-duration: 2s
    visibility: visible

const BOOK = document.querySelector('.container');
const LEFT_PAGE = document.querySelector('.left-side');
const CLOSE = document.querySelector('.close');

let closeBox = function(){
  if (LEFT_PAGE.className !== 'left-side animation-in'){
    LEFT_PAGE.className = '';
    LEFT_PAGE.className = 'left-side animation-in';
    CLOSE.innerHTML = '+';
  } else {
    LEFT_PAGE.className = '';
    LEFT_PAGE.className = 'left-side animation-out';
    CLOSE.innerHTML = 'x';
  }
};