<div class="container">
  <div class="profileCard">
    <div class="profileHeader">
      <img src="https://images.pexels.com/photos/1066129/pexels-photo-1066129.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="">
      <div class="info">
        <span class="name">Jane Doe</span>
        <span class="designation">UI Developer</span>
      </div>
    </div>
    <div class="profileBody">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque, earum illo deleniti totam repudiandae quam debitis dolor provident! Ipsa illum beatae recusandae saepe reprehenderit id quas numquam eligendi ullam.
      
      <div class="icons">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    <div class="profileFooter">
      <button class="share"><i class="fa fa-share-alt"></i><i class="fa fa-close"></i></button>
      <div class="block"><span class="subInfo">Projects</span><span class="count">26</span></div>
      <div class="block"><span class="subInfo">Views</span><span class="count">2154</span></div>
      <div class="block"><span class="subInfo">Likes</span><span class="count">956</span></div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Questrial');
$fontFamily:'Questrial', sans-serif;

$lightColor: #F45B69;
$darkColor: #22181C;
$white:#ffffff;
body{
  font-family:$fontFamily;
  background-color: lighten($lightColor,30%);
}
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profileCard {
  height: 30rem;
  width: 20rem;
  position: relative;
  transition:all ease 0.5s;
  background-color: $white;
  border-radius:4px;
  box-shadow:0px 4px 20px rgba($darkColor,0.5);
  overflow:hidden;
  .profileHeader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 22.7rem;
    overflow: hidden;
    z-index: 1;
    transition:all ease 0.5s;
    img {
      max-width: 100%;
      position: absolute;
      bottom: 0;
      top: 0;
      margin: auto;
      left: 0;
      right: 0;
      z-index: -1;
    }
    .info {
      position: absolute;
      z-index: 2;
      bottom: 4rem;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      color:$white;
      .name{
        font-size:3rem;
        margin:0.5rem auto;
      }
      .designation{
        font-size:1.5rem;
      }
    }
    &::after {
      content: "";
      position: absolute;
      height: 100%;
      width:100%;
      background-image: linear-gradient(
        rgba($darkColor, 0.6),
        rgba($lightColor, 0.6)
      );
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      transition:all ease 0.5s;
    }
  }
  
  .profileBody{
    margin-top:10.5rem;
    padding:0.5rem;
    text-align:justify;
    .icons{
      margin:2rem auto;
      display:flex;
      justify-content:space-evenly;
      a{
        font-size:2rem;
        color:$darkColor;
        &:hover{
          color:$lightColor;
        }
      }
    }
  }
  
  
  .profileFooter{
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    display:flex;
    justify-content:space-evenly;
    padding:3rem 1rem 2rem;
    transition:all ease 0.5s;
    color:$darkColor;
    .block{
      display:flex;
      flex-direction:column;
      align-items:center;
      font-weight:600;
      .subInfo{
        margin-bottom:0.8rem;
        font-size:1rem;
      }
      .count{
        font-size:1.2rem;
      }
    }
  }
  .share{
    position:absolute;
    top: -0.8rem;
    right:1.5rem;
    z-index:10;
    height:3rem;
    width:3rem;
    border-radius:400px;
    font-size:1rem;
    border:none;
    background-color: $darkColor;
    color:$white;
    box-shadow:0px 2px 4px rgba(0,0,0,0.4);
    outline:0;
    transition:all ease 0.5s;
    .fa-close{
      display:none;
    }
    &:hover{
      cursor:pointer;
      background-color: darken($darkColor,10%);
    }
  }
}


.profileCard.open{
  .profileHeader{
    height:10rem;
  }
  .profileFooter{
    padding-top:1rem;
    padding-bottom:1rem;
    box-shadow:0px -2px 10px rgba(0,0,0,0.1);
    .share{
      right: 0.5rem;
      top:-0.8rem;
      height:1.5rem;
      width:1.5rem;
      font-size:1rem;
      transform:rotate(90deg);
      .fa-share-alt{
        display:none;
      }
      .fa-close{
        display:inline-block;
      }
    }
  }
  
}

/*
https://www.maxpixel.net/static/photo/1x/Children-Childrens-Oriental-Man-Baby-Boy-Profile-2081553.jpg
*/

/*
* Included Jquery
*/

$(document).ready(function(){
  $(".profileCard").toArray().forEach(function(card){
    $(card).find(".profileFooter .share").on('click',function(){
      $(card).toggleClass("open");
    });
  });
});