<!-- Trong đoạn Code này, bạn có thể thay đổi các chi tiết (tên riêng của bạn, của riêng bạn avatar vv), nhưng không làm thay đổi cấu trúc cơ bản! -->

<aside class="profile-card">
  
  <header>
    
    <!-- day la avatar -->
    <a href="http://laivanduc.com">
      <img src="http://farm5.staticflickr.com/4175/34651231232_b1a413839f_o.jpg">
    </a>

    <!-- ten cua ban -->
    <h1>Lại Văn Đức</h1>
    
    <!-- Cong viec,nghe nghiep -->
    <h2>Web Developer</h2>
    
  </header>
  
  <!-- Gioi thieu ve ban -->
  <div class="profile-bio">
    
    <p> Tôi là một nhà phát triển web. Tôi chủ yếu làm việc với PHP, HTML, CSS, JS và WordPress trên ..<b> Internet.</b><br><br>
      Tôi cũng làm việc tốt với Photoshop, Corel Draw, After Effects và vài thứ khác.</p>
    
  </div>
  
  <!-- Lien ket mang xa hoi cua ban-->
  <ul class="profile-social-links">
    
    <!-- twitter - el clásico  -->
    <li>
      <a href="https://twitter.com/">
        <img src="http://farm5.staticflickr.com/4252/34651310252_2231b1385f_o.png">
      </a>
    </li>
    
    <!-- Dia chi google + cua ban -->
    <li>
      <a href="https://plus.google.com/u/0/118260931574775251745/posts">
        <img src="http://farm5.staticflickr.com/4202/34004509073_6fc761b8e1_o.png">
      </a>
    </li>
    
    <!-- Dia chi Facebook cua ban-->
    <li>
      <a href="https://facebook.com">
        <img src="http://farm5.staticflickr.com/4155/34774236796_cabfe4e288_o.png">
      </a>
    </li>
    
    <!-- Ban co the them hoac bot mang xa hoi tai day -->
    
  </ul>
  
</aside>
<!-- Chi co vay thoi !-->
/* Roi - Bat dau css de >>> */

/************
* Imports 
*************/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);

/************
* Variables 
*************/

/* Colors */
$white :  #FFFFFF;
$red   :  #D72B37;
$gray  :  #2D2D2D;

/* Layout */
$width :  350px;

/************
* Mixins
*************/
@mixin border-shadow-box($w,$h,$border-radius,$background-color,$padding) {
  width: $w;
  height: $h;
  border-radius: $border-radius;
  background-color: $background-color;
  padding: $padding;
  box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
  margin: 0 auto;
}
/************
* Styles
*************/

body{
  background-image: url(http://farm5.staticflickr.com/4171/34814741935_cb292e2490_o.png); 
  font-smoothing: antialiased;
  font-family: Roboto,sans-serif; 
}

.profile-social-links, .profile-bio {
  transition: height 1s ease-in;
}

aside{
  width: $width;
  height: 100%;
  margin: 110px auto 0 auto;
  header{
    height: 200px;
    a{
      opacity: 0;
      width: 100%;
      height: auto;
      display: inline-block;
      animation: opacity-translate 1s ease-out 3.2s forwards;
      img { 
        padding: 10px;
        width: 60%;
        height: auto;
        margin: 4% 18%;
        border-radius: 50%;
        background: $red;
      } 
    }
    h1{
      opacity: 0;
      color: $gray;
      transform: translate3d(0,-160px,0);
      text-align: center;
      animation: fade .5s ease-out 4.5s forwards;
    }
    h2{
      opacity: 0;
      color: $gray;
      transform: translate3d(0,-172px,0);
      text-align: center;
      font-size: 17px;
      font-weight: 300;
      animation: fade .5s ease-out 5s forwards;
    }
    &:before{
      content: "Hi!";
      color:$white;
      text-align: center;
      width: 100px;
      height: 100px;
      margin-top: 25px;
      font-size: 40px;
      display: block;
      opacity: 0;
      animation: hi 2.9s cubic-bezier(1,.15,.96,.95) forwards;
    }
    @include border-shadow-box(0px,0px,50px,$red,0px);
    position: relative;
    z-index: 5;
    transform: translate3d(0,100x,0);
    animation: grow 3s cubic-bezier(.88,.32,.81,.96) forwards;
  }
  .profile-bio {
    @include border-shadow-box(310px,'auto',10px, $white,20px);
    color: $gray;
    opacity:0;
    transform: translate3d(0,-60px,0);
    transition: opacity .7s ease-out , transform .4s ease-in;
    z-index: 1;
  } 
  .profile-social-links {
    position:absolute;
    height: 50px;
    top: 28px;
    opacity: 1;
    li{
      @include border-shadow-box(60px,60px,60px,$white,0px);
      display: inline-block;
      text-align: center;
      margin: 0 13px;
      opacity:0;
      img{
        width: 60%;
        margin: 19% auto;
        height: auto;
      }
      &:nth-child(1){
        transform: translate3d(100px,150px, 0);
        animation: translate-social-1 .3s ease-out 5.8s forwards;
      }
      &:nth-child(2){
        transform: translate3d(0px,150px, 0);
        animation: translate-social-2 .3s ease-out 6s forwards;
      }
      &:nth-child(3){
        transform: translate3d(-100px,150px, 0);
        animation: translate-social-3 .3s ease-out 6.2s forwards;
      }
    }
  }
  &:hover{
    .profile-bio{
      opacity:1;
      transform: translate3d(0,170px,0);
    }
  }
}


/************
* Animations
*************/

@keyframes translate-social-1{
  to{
    opacity:    1;
    transform:  translate3d(-23px, 80px, 0);
  }
}

@keyframes translate-social-2{
  to{
    opacity:    1;
    transform:  translate3d(0px, 30px, 0);
  }
}

@keyframes translate-social-3{
  to{
    opacity:    1;
    transform:  translate3d(31px, 80px, 0);
  }
}

@keyframes hi{
  0%{
    opacity:    0;
  }
  5%{
    opacity:    1;
  }
  60%{
    opacity:    0;
  }
  99%{
    height:     100px;
    margin-top: 25px;
  }
  100%{
    height:     0px;
    margin-top: 0px;
  }
}

@keyframes opacity-translate{
  0%{
    opacity:    0;
    transform:  translate3d(0,0,0);
  }
  100%{
    opacity:    1;
    transform:  translate3d(0,-130px,0);
  }
}

@keyframes fade{
  0%{
    opacity:  0;
  }
  100%{
    opacity:  1;
  }
}

@keyframes shake{
  0%{
    transform: translate3d( -1px, 1px, 0), rotate(10deg);
  }
  100%{
    transform: translate3d( 1px, -1px, 0), rotate(-10deg);
  }
}

@keyframes grow{
  0%{
    opacity:        0;
    width:          0px; 
    height:         0px;
    border-radius:  50px;
  }
  15%{
    opacity:        1;
    width:          100px; 
    height:         100px;
    padding:        10px;
    border-radius:  100px;
  }
  20%{
    transform:      translate3d(0,150%,0);
  }
  24%{
    transform:      translate3d(0,155%,0);
  }
  28%{
    transform:      translate3d(0,150%,0);
  }  
  32%{
    transform:      translate3d(0,155%,0);
  }  
  34%{ 
    transform:      translate3d(0,150%,0);
  } 
  38%{
    transform:      translate3d(0,155%,0);
  }    
  42%{
    transform:      translate3d(0,150%,0);
  }   
  70%{ 
    width:          100px; 
    height:         100px;
    padding:        10px;
    border-radius:  100px;
    transform:      translate3d(0,150%,0);
  }
  75%{
    width:            50px; 
    height:           50px;
    padding:          10px;
    border-radius:    50px;
    background-color: $red;
  }
  100%{
    width:            $width;
    height:           220px;
    border-radius:    10px;
    background-color: $white;
    transform:        translate3d(0,70%,0);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.