Kali ini saya mau membagikan cara membuat kotak About Me ,atau profile Blog yang simple dan mudah-mudahn anda suka

DEMO

Jika anda menyukainya silakan copy kode di bawah ini.

.Pertama Letakan Font-Awesome di bawah kode <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

. HTML

<div id="hulu">
 <div id="social">
<div id="left_social"><i class="icon-facebook"></i>
<i class="icon-twitter"></i></div>
<div id="right_social"><i class="icon-google-plus"></i>
<i class="icon-pinterest"></i>
</div> </div>
<div id="profile-pic">
<div class="cover">
</div>
<div id="prof"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MyGVttt8ro7VNHUP2fJNQT00Aeb5OBlT4GZp9p93ZQ3aTwqJLvBbEaG-XLEophE7VRp6eU_TbSdunWe-50Gp_ckDFa70NmbtpazdJYnfrv1bXxUZj4I_4AFyunZR7sOMuqgAs6l3bhY/w165-h166-no/It%2527s+me.jpg"/>
</div> </div>
<div id="details">
<h1><span>Panjz Mackenzie</span></h1>
 </div>
<div id="info">
 <ul>
<li><div class="link"><a href="#">About Me</a></div>
</li> <li><div class="link"><a href="#">My Skills</a></div>
</li> <li><div class="link"><a href="#">Work Experience</a></div>
</li> <li><div class="link"><a href="#">Say Hello!</a></div>
</li> </ul>
</div> </div>

.CCS 

#hulu{
width:300px;
height:auto;
margin:0 auto;
background:#000;
position:relative;
border-radius:0px 0px 20px 20px;
background:#f8f8f8;
padding:0px 0px 20px 0px;
-moz-box-shadow:    inset 0 0 10px #E3E3E3;
-webkit-box-shadow: inset 0 0 10px #E3E3E3;
box-shadow:         inset 0 0 10px #E3E3E3;
}
#social{
padding:10px 20px;
overflow:auto;
background:#9a2418;
border-bottom:2px solid #9a2418;
position:relative;
}
#left_social{float:left;}
#right_social{float:right;}
#social i{
margin-right:0px;
padding:5px 0px;
width:30px;
display:block;
float:left;
text-align:center;
color:#fff;
font-size:1.2em;
transition:0.5s ease;
-webkit-transition:0.5s ease;
}
#social i:hover
{
background:#fff;
color:rgb(223, 97, 19);
transition:0.5s ease;
-webkit-transition:0.5s ease;
border-radius:50%;
}
img{
width:85px;
height:auto;
border-radius:50%;
margin:7px;
z-index:100;
position:relative;
}
#prof{
width: 100%;
height: 100%;
border-radius: 50% 50% 50% 50%;
border: 2px solid #6B2F0A;
background:#9a2418;
}
.cover{
position: absolute;
width: 104px;
height: 49px;
top: 0px;
left: 0px;
z-index: 1;background:#9a2418;
}
#profile-pic
{
margin: -51px auto 0px;
position: relative;
z-index: 100;
width: 100px;
height: 100px;
}
h1{
font-family:&amp;amp;quot;Roboto Slab&amp;amp;quot;;
margin:0px; padding:10px 0px;
text-align:center;
font-size:1.3em;
}
#info ul{margin:0px; padding:0px;list-style-type:none;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
#info li{margin:0px;text-align:center;font-family:&amp;amp;quot;Roboto Slab&amp;amp;quot;;font-size:1.2em;}
#info li a{display:block;color:#000;text-decoration:none;padding:15px 0px;-webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;}
#info li div:hover a{background:#9a2418;color:#fff;-webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);text-shadow: 2px 2px 3px #000;}

Lihat pratinjau dan jika sudah merasa pas save template anda..selesai
semoga bermanfaat

sumber kode: http://codepen.io/berdejitendra/details/vopFJ