<div class="shadow overflow">
  <div id="header"></div>
  <div id="profile">
    <div class="image">
    <img src="https://a4-images.myspacecdn.com/images03/2/85a286a4bbe84b56a6d57b1e5bd03ef4/300x300.jpg" alt="" />
    </div>
    <div class="name">
      Daft Punk
    </div>
    <div class="nickname">
      @daftpunk
    </div>
    <div class="location">
    <i class="material-icons">place</i>Europe
    </div>
    <div class="bottom">
    <span class="following">
      <span class="count">170</span>
      following
      </span>
      <span class="followers">
        <span class="count">1M</span>
        followers
      </span>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

body,
html{
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  min-width:100vw;
  background:linear-gradient(to right bottom,rgba(blue,0.5),rgba(green,0.5)),url(http://i.imgur.com/woUbg3p.jpg);
  background-size:cover;
  background-position:center center;
  display:flex;
  justify-content:center;
  align-items:center;
}

#header{
  width:50vw;
  max-width:400px;
  min-width:300px;
  height:150px;
  background:url(http://i.imgur.com/woUbg3p.jpg);
  background-size:cover;
  background-position: center center;
  transition: all .08s linear;
}

#profile{
  width:50vw;
  max-width:400px;
  min-width:300px;
  height:160px;
  background:white;
  position:relative;
  box-sizing:border-box;
  padding-top:40px;
  padding-left:25px;
  font-family: 'Open Sans', sans-serif;
  .image{
    position:absolute;
    border:3px solid white;
    top:-55px;
    left: 20px;
    height:80px;
    width:80px;
    border-radius:10px;
    img{
      width:inherit;
      height:inherit;
      border-radius:8px;
    }
  }
  .name{
    font-size:1.3rem;
    font-weight:500;
    color:#444;
  }
  .nickname{
    color:#888;
    font-size:0.9rem;
    padding-bottom:7px;
  }
  .location{
    color:#555;
    font-size:0.9rem;
    padding-left:0px;
    position:relative;
    left:-5px;
    .material-icons{
      position:relative;
      top:3px;
      font-size:1rem;
    }
  }
}

.shadow{
  box-shadow: 0px 0px 10px 1px rgba(black,0.5);
}

.overflow{
  overflow:hidden;
}

.following,
.followers{
  font-family: 'Open Sans', sans-serif;
  font-size:0.9rem;
  color:#bbb;
  font-weight:300;
}
.followers{
  float:right;
  padding-right:30px;
}
.bottom{
  margin-top:10px;
}

.count{
  color:black;
  font-family: 'Open Sans', sans-serif;
  font-size:0.9rem;
  font-weight:700;
}

//Just scroll even if there isn't content that needs to be scrolled 🤗

const header = document.getElementById('header')

window.addEventListener('mousewheel',(event)=>{
  let delta = (event.wheelDelta + 3)*-1
  animate(delta>0, delta)
})

const animate = (check,delta) => {
  const MIN_HEIGHT = 80
  const HEIGHT = 150
  const MAX_ZOOM = 3
  const MAX_BLUR = 3
    if(check){
    let blur = 1+delta/150 < MAX_BLUR ? Math.ceil(1+delta/150) : MAX_BLUR 
    let height = HEIGHT - delta/10 > MIN_HEIGHT ? Math.ceil(HEIGHT- delta/10) : MIN_HEIGHT
    let zoom = 1+delta/200 <= MAX_ZOOM ? 1+delta/200 : MAX_ZOOM 
    requestAnimationFrame(transform(header,blur,height,zoom))
  } else
    requestAnimationFrame(transform(header,0,150,1))
}

const transform = (element,blur,height,zoom) =>{
  element.style.filter = `blur(${blur}px)`
  element.style.height = `${height}px`
  element.style.transform = `scale(${zoom},${zoom})`
}