ShareCode header đẹp cho wapsite

<div class="fx-log">
<a href="/login.php"><i class="fa fa-sign-in-alt"></i> Đăng nhập</a>
<a href="/login.php"><i class="fa fa-user-plus"></i> Đăng kí</a>
</div>
<div class="notification hide"></div>
<div class="loading" id="loading"></div>
<div class="logo">
<p class="text">Dark World</p>
<i><p class="desc">One step you can become a permanent nightmare </p></i>
</div>
<div class="header">
<table width="100%" style="text-align:center" border="0">
<tr border="0">
<td width="25%" class="active">
<a href="/"><i class="fa fa-home fa-2x"></i> </a>
</td>
<td width="25%">
<a><i class="fa fa-envelope fa-2x"></i></a>
<li><i class="fa fa-caret-down"></i>
<ul>
<a href="/mail/index.php?act=input"><li>Hộp thư đến <span class="bage">0</span>li></a>
<a href="/mail/index.php?act=output"><li>Hộp thư đi</li></a>
<a href="/mail/"><li>Tất cả thư</li></a>
</ul>
</li>
</td>
<td width="25%">
<a href="/mail/index.php?act=systems"><i class="fa fa-bell fa-2x"></i></a>
<li><i class="fa fa-caret-down"></i>
<ul><a href="/mail/index.php?act=systems">
<li>Chỉ dành cho thành viên</li>
</ul>
</li>
</td>
<td width="25%">
<a><i class="fa fa-bars fa-2x"></i> </a>
<li><i class="fa fa-caret-down"></i>
<ul>
<a href="/chat.php"><li><i class="fa fa-comment"></i> Phòng Chat</li></a>
<a href="/forum"><li><i class="fa fa-book"></i> Diễn đàn</li></a>
<a href="/shop"><li><i class="fa fa-shopping-cart"></i> Cửa hàng</li></a>
<a href=""><li><i class="fa fa-images"></i> Albums</li></a>
<a href="/faq.php"><li><i class="fa fa-life-ring"></i> FAQ</li></a>
</ul>
</li>
</td>
</tr>
</table>
</div>
<div class="maintxt">
Nội dung trang
</div>

@font-face{
font-family:'Akronism';
src: url('/assets/fonts/akronism.ttf');
}
body{
background:linear-gradient(#000 50%,#000c65);
color:#000000;
font-family:Arial,Tahoma,sans-serif;
font-size:small;
max-width:900px;
margin:auto;
background-attachment: fixed;
position:relative;
}
.maintxt{
background:#fff;
margin-left:auto;
margin-right:auto;
padding:10px;
border-radius:4px;
border:1px solid #000;
margin-bottom:10px;
box-shadow:0px 0px 10px #000 inset;
}
.fx-log{
position:absolute;
top:0;
right:0;
padding:10px;
padding-top:2px;
}
.fx-log a{
padding:5px;
border:1px solid #031077;
background:#040e5f;
color:#fff;
border-radius:10px;
box-shadow:0px -2px 8px #000 inset;
}
.logo{
background: transparent;
padding:10px;
color:#fff;
}
akronism {
font-family: 'Akronism';
}
.logo .text{
font-family:'Akronism';
text-align:center;
font-size:35px;
font-weight:bold;
}
.logo i .desc{
text-align:center;
font-size:13px;
}
.header{
top:0;
}
.header table {
color:#fff;
padding:5px 5px 0px 5px;
border-spacing: 0;
//border-bottom:2px solid #fff;
border-radius: 4px 4px 0px 0px;
}
.header table tr{
background: linear-gradient( to bottom, rgb(0, 9, 82),rgb(0, 3, 28));
 }
.header table tr td{
color:#fff;
border:0px solid transparent;
border-bottom:none;
position:relative;
}
.header table tr td i{
padding:5px 3px 3px 3px;
}
.header table tr>td:last-child{
border-top-right-radius:4px ;
}
.header table tr>td:first-child{
border-top-left-radius:4px ;
}
.header table tr td:hover{
background:linear-gradient( to bottom, rgba(255,255,255,0.2),rgba(255,255,255,0));
border-radius: 4px 4px 0px 0px;
}
.header table tr td.active{
background:linear-gradient( to bottom, rgba(255,255,255,0.3),rgba(255,255,255,0));
border-radius: 4px 4px 0px 0px;
}
.header table tr td.active a,.header table tr td.active a:hover,.header table tr td:hover.active a{
color:#fff
}
.header table tr td:hover a{
color:#fff;
}
.header table tr td a{
color:#fff;
}
.header table tr td>li{
position:relative;
float:right;
list-style-type:none;
padding:10px 4px;
background:transparent;
border:1px solid #060b33;
border-bottom:0;
border-top:0;
border-radius:0px 4px 0px 0px;
}
.header table tr td li>i{
opacity:0.4;
}
.header table tr td li:hover{
background:linear-gradient( to bottom, rgba(255,255,255,0.3),rgba(255,255,255,0));
}
.header table tr td li:hover>ul,.header table tr td li:focus>ul,.header table tr td li:active>ul{
display:block;
}
.header table tr td:hover> li ul,.header table tr td:focus> li ul,.header table tr td:active> li ul{
display:block;
}
.header table tr td li ul{
text-align:left;
position:absolute;
right:0;
background:#2b2f54;
color:#000;
-webkit-padding-start: 0px;
-moz-padding-start: 0px;
margin-top:10px;
border:1px solid #000b62;
border-radius:0px 0px 4px 4px;
display:none;
width:auto;
}
@media (min-width: 470px){
.header table tr td li ul{
min-width:219px;
}
}
@media (max-width: 469px){
.header table tr td li ul{
min-width: 150px;
}
}
.header table tr td li ul li{
float:none;
padding:8px;
color:#fff;
list-style-type:none;
border-bottom:1px solid #1c2250;
}
.header table tr td li ul li:hover{
background:linear-gradient( to bottom, rgba(255,255,255,0.5),rgba(255,255,255,0.2));
}
.footer center p{
color:#fff;
padding:5px;
text-shadow: -1px 0px 1px #000;
}
.right{
text-align:right
}
.center{
text-align:center
}
.hide{
display:none
}
.text{
padding:4px
}