Progress Bar

by Hm Ba

HTML

<script src="https://arlina-design.googlecode.com/svn/progressbar.js"></script>
<div class="container">
   <h3><a href='http://www.ar1web.com/2014/11/css-menu-profile.html' target="_blank"> عودة لتدوينة</a></h3>
<div class='clear'/>
<div class="profile-container unfold">
<div class="profile">
<div class="avatar"><img src="http://i.imgur.com/3KQAIIw.png" /></div>
<div class="follow"><button><i class="icon-plus"></i> تابعني</button></div>
</div>
<ul class="profile-list">
    <li class="first"><a href="http://www.fb.com/ihussam.hm.1" target="_blank">من أنا<i class="icon-user"></i></a></li>
    <li class="second"><a href="#" target="_blank">أعمالي<i class="icon-list-alt"></i></a></li>
    <li class="third"><a href="http://www.ar1web.com" target="_blank">مدونتي<i class="icon-time"></i></a></li>
     
    <li class="fourth"><a href="#" target="_blank">المفضلة<i class="icon-heart"></i></a></li>
</ul>
</div>

</div>

CSS

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

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
background: #eee url(http://4.bp.blogspot.com/-slIpCw8me28/VFTDpK5VZOI/AAAAAAAAGkg/1zr5U-PKryM/s1600/Fly%2BAr1web.png) 50% 0 no-repeat;
}
h3 {
font-size: 20px;
font-weight: 400;
font-family:ge_dinar_tworegular;
text-align: center;
padding: 15px;
    position: relative;
margin: 15px auto;
background: #F25050;
border-bottom: 2px solid #DA4444;
border-radius: 3px 3px 5px 5px;
color: #fff;
width: 200px;
box-shadow: 0 0 3px #e5e5e5;
transition: all 0.5s ease-in-out;
margin-left: -84px;
}
h3 a {
color: #FFF;
text-decoration: none;
}
h3:hover {
 background: #DA4444; transition: all 0.5s ease-in-out;  color: #A31D1D;
}

.avatar img:hover {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 filter: gray;
 -webkit-filter: grayscale(100%);
 }
 .avatar {
 filter: none;
 -webkit-filter: grayscale(0%);
 transition: all .5s;
 }
.icon-heart:before {
content: "\f004";
color: #F5D324;
}
ul, li,a {
    font-family: Electrolize,ge_ss_threeregular;
    font-size: 13px;
    text-decoration: none;
    color: #716E6E;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul, li,a:hover{color: #444;}
.container {
    margin: 40px auto 0;
    width: 143px;
}

.profile-container {
    position: relative;
    width: 222px;
    float: right;
}

.profile {
    background: #f6f6f6;
    float: right;
    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;
   ...