Chia sẻ thông tin - Share Info

<div class="vf_cardvisit">
     <div class="vf_cardvisit_name">Share Info's Menber</div>
     <div class="vf_cardvisit_body">
         <ul class="vf_cardvisit_info">
             <li>Nickdanh: nhokli.nolove</li>
             <li>Nhóm: Designer</li>
             <li>Ngày tham gia: 04/12/2011</li>
         </ul>
         <span class="vf_cardvisit_matv">shareinfo</span>
         <img class="vf_cardvisit_photo" src="http://shareinfo.ucoz.org/_fr/1/3741259.jpg">
         <img class="vf_cardvisit_mem" src="http://vietfriend.info/forum/image.php?u=1&dateline=1367506015">
     </div>
     <div class="vf_cardvisit_footer">SHAREINFO - Diễn đàn chia sẻ & kết nối Tình bạn Việt</div>
</div>

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
}
li {
     list-style: none;
     font-family: 'baiviet';
}
@font-face {
     font-family: 'baiviet';
     src: url("http://vietfriend.info/forum/images/styles/vietfriend/font/UVNGiayTrang_0.eot") /* EOT file for IE */
}
@font-face {
     font-family: 'baiviet';
     src: url("http://vietfriend.info/forum/images/styles/vietfriend/font/UVNGiayTrang_0.TTF") /* TTF file for CSS3 browsers */
}
@font-face {
     font-family: 'vf_mathanhvien';
     src: url("http://vietfriend.info/forum/images/styles/vietfriend/font/BarcodeFont.eot") /* EOT file for IE */
}
@font-face {
     font-family: 'vf_mathanhvien';
     src: url("http://vietfriend.info/forum/images/styles/vietfriend/font/BarcodeFont.ttf") /* TTF file for CSS3 browsers */
}
.vf_cardvisit_name {
     background: #3b5998;
     font-family: 'Century Gothic',Tahoma, Arial, Helvetica, verdana, sans-serif;
     font-weight: bold;
     color: #FFF;
     text-align: center;
     padding: 5px;
     border-bottom: 1px solid #133783;
     border-top-left-radius: 5px;
     -webkit-border-top-left-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -khtml-border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     -webkit-border-top-right-radius: 5px;
     -moz-border-radius-topright: 5px;
     -khtml-border-top-right-radius: 5px;
}
.vf_cardvisit {
     width: 288px;
     height: 176px;
     position: relative;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -khtml-border-radius: 5px;
     background-color: #FFF;
     background: -moz-linear-gradient(bottom, #f5f5f5 40%, #FFF 40%);
     background: -o-linear-gradient(bottom, #f5f5f5 40%, #FFF 40%);
     background: -ms-linear-gradient(bottom, #f5f5f5 40%, #FFF 50%);
     background: -webkit-gradient(linear,left bottom,left top,color-stop(0.4, #f5f5f5),color-stop(0.4, #FFF));
     box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);
     -moz-box-shadow:0px 0px 6px rgba(0, 0, 0, 10);
     -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);
}
.vf_cardvisit_body {
     display: inline-block;
     width: 278px;
     padding: 5px;
}
.vf_cardvisit_info {
     float: left;
}
.vf_cardvisit_mem {
     float: right;
     width: 100px;
     height: 100px;
}
.vf_cardvisit_footer {
     background: #6d84b4;
     color: #FFF;
     text-align: center;
     padding: 2px 0;
     font-size: 8px;
     position: absolute;
     width: 100%;
     bottom: 0px;
     border-bottom-left-radius: 5px;
     -webkit-border-bottom-left-radius: 5px;
     -moz-border-radius-bottomleft: 5px;
     -khtml-border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     -webkit-border-bottom-right-radius: 5px;
     -moz-border-radius-bottomright: 5px;
     -khtml-border-bottom-right-radius: 5px;
     font-family: 'Century Gothic',Tahoma, Arial, Helvetica, verdana, sans-serif;
}
.vf_cardvisit_matv {
     font-family: 'vf_mathanhvien';
     font-size: 40px;
     position: absolute;
     bottom: 20px;
     left: 20px;
}
.vf_cardvisit_photo {
     position: absolute;
     top: 40px;
     left: 70px;
     opacity: 0.3;
     z-index: 2;
}