<div class="container">   

  <div class="profile-container unfold">   
  <div class="profile">   
  <div class="avatar"><img src="http://www.picz.ge/img/s2/1404/6/a/aa31bab2a467.png" /></div>   
  <div class="follow"><button><i class="icon-plus"></i> Lazara</button></div>   
  </div>   
  <ul class="profile-list">   
  <li class="first"><i class="icon-user"></i> სიახლეები</a></li>   
  <li class="second"><i class="icon-list-alt"></i>პროფილი</li>   
  <li class="third"><i class="icon-time"></i> დრო</li>   
  <li class="fourth"><i class="icon-heart"></i> Gelesson.net</li>   
  </ul>   
  </div>   

  </div

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

ul, li {   
margin: 0;   
padding: 0;   
list-style-type: none;   
  }   

  .container {   
margin: 40px auto 0;   
width: 143px;   
  }   

  .profile-container {   
position: relative;   
width: 143px;   
float: left;   
  }   

  .profile {   
background: #f6f6f6;   
float: left;   
padding: 4px;   
border-radius: 3px;   
-o-border-radius: 3px;   
-ms-border-radius: 3px;   
-moz-border-radius: 3px;   
-webkit-border-radius: 3px;   
-webkit-transition: all 0.2s ease-in-out;   
-moz-transition: all 0.2s ease-in-out;   
-ms-transition: all 0.2s ease-in-out;   
-o-transition: all 0.2s ease-in-out;   
transition: all 0.2s ease-in-out;   
  }   

  .avatar img {   
display: block;   
border-radius: 3px;   
-o-border-radius: 3px;   
-ms-border-radius: 3px;   
-moz-border-radius: 3px;   
-webkit-border-radius: 3px;   
min-width: 135px   
  }   

  .follow {   
margin: 4px 0 0 0;   
  }   

  .follow button {   
display: block;   
width: 100%;   
border: 0;   
background: #268cde;   
color: white;   
padding: 7px 0;   
margin: 0;   
border-radius: 3px;   
-o-border-radius: 3px;   
-ms-border-radius: 3px;   
-moz-border-radius: 3px;   
-webkit-border-radius: 3px;   
-webkit-transition: all 0.2s ease-in-out;   
-moz-transition: all 0.2s ease-in-out;   
-ms-transition: all 0.2s ease-in-out;   
-o-transition: all 0.2s ease-in-out;   
transition: all 0.2s ease-in-out;   
cursor: pointer;   
  }   

  .follow button i {   
font-size: 10px;   
color: #b9daf4;   
  }   

  .follow button:hover {   
background: #3096e8;   
  }   

  .follow button:active {   
background: #2085d6;   
  }   

  .profile-list {   
overflow: hidden;   
width: 100%;   
box-sizing: border-box;   
color: #767b7e;   
font-size: 13px;   
  }   

  .profile-list li {   
cursor: pointer;   
background: #ffffff;   
border-top: 1px solid #e5e6e6;   
padding: 15px 10px;   
  }   
  .profile-list li:last-child { 
border-radius: 0 0 3px 3px;;   
-o-border-radius: 0 0 3px 3px;   
-ms-border-radius: 0 0 3px 3px;   
-moz-border-radius: 0 0 3px 3px;   
-webkit-border-radius: 0 0 3px 3px;   
  }   

  .profile-list li [class^="icon-"] {   
margin: 0 3px 0 0;   
  }   

  .profile-list .profile {   
border-radius: 3px 3px 0 0;   
position: relative;   
  }   

  .profile-list li {   
-webkit-transform-origin: 50% 0%;   
-o-transform-origin: 50% 0%;   
transform-origin: 50% 0%;   
-webkit-transform: perspective(250px) rotateX(-90deg);   
-o-transform: perspective(250px) rotateX(-90deg);   
transform: perspective(250px) rotateX(-90deg);   
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);   
  }   

  .profile-list li:hover {   
background: #385F97;   
color:white;   
  }   

  .profile-list .first {   
-webkit-transition: 0.2s linear 0.8s;   
-o-transition: 0.2s linear 0.8s;   
transition: 0.2s linear 0.8s;   
  }   

  .profile-list .second {   
-webkit-transition: 0.2s linear 0.6s;   
-o-transition: 0.2s linear 0.6s;   
transition: 0.2s linear 0.6s;   
  }   

  .profile-list .third {   
-webkit-transition: 0.2s linear 0.4s;   
-o-transition: 0.2s linear 0.4s;   
transition: 0.2s linear 0.4s;   
  }   

  .profile-list .fourth {   
-webkit-transition: 0.2s linear 0.2s;   
-o-transition: 0.2s linear 0.2s;   
transition: 0.2s linear 0.2s;   
  }   

  .profile-container:hover .profile {   
border-radius: 3px 3px 0 0;   
-o-border-radius: 3px 3px 0 0;   
-ms-border-radius: 3px 3px 0 0;   
-moz-border-radius: 3px 3px 0 0;   
-webkit-border-radius: 3px 3px 0 0;   
  }   

  .profile-container:hover .profile-list li {   
-webkit-transform: perspective(350px) rotateX(0deg);   
-o-transform: perspective(350px) rotateX(0deg);   
transform: perspective(350px) rotateX(0deg);   
-webkit-transition: 0.2s linear 0s;   
-o-transition: 0.2s linear 0s;   
transition: 0.2s linear 0s;   
  }   

  .profile-container:hover .profile-list .second {   
-webkit-transition-delay: 0.2s;   
-o-transition-delay: 0.2s;   
transition-delay: 0.2s;   
  }   

  .profile-container:hover .profile-list .third {   
-webkit-transition-delay: 0.4s;   
-o-transition-delay: 0.4s;   
transition-delay: 0.4s;   
  }   

  .profile-container:hover .profile-list .fourth {   
transition-delay: 0.6s;   
-o-transition-delay: 0.6s;   
transition-delay: 0.6s;   
  }