Poate ii este de folos cuiva macar pe partea de design.
Doar ce se vede in imagine.
Codul sursa:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=2.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style>
.main3d{
background: #0D7C3D;
background: #0065AC;
box-shadow: 0px 0px 1px #888 inset;
border: 1px solid #0B6130;
border: 1px solid #024B7F;
border-bottom: 4px solid #0B6130;
border-bottom: 4px solid #024B7F;
line-height: 34px;
padding-left: 10px;
border-radius: 5px 5px 0px 0px;
box-shadow: 0px 0px 1px #C9FFBE inset 0.8;
}
.spacetop{
display: inline-block;
width: 1000px!important;
}
.main3d span{
color: #fff;
text-transform: uppercase;
font-family: sans-serif;
font-size: 11px;
font-weight: 600;
}
.index_box{
background: #252525!important;
font-family: tahoma;
font-size: 12px;
}
.index_box th{
background: #1a1a1a;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 6px 10px;
font-size: 12px;
color: #bbb;
font-family:sans-serif;
}
.index_box td{
color: #fff;
background: #252525!important;
border-top: 1px solid #303030!important;
border-bottom: 1px solid #0f0f0f!important;
text-align: center;
height: 30px;
}
.index_box a:hover{
color: #069;
}
.index_box a{
color: #A57D00;
}
.subiecte, .mesaje{
font-family: 'Oswald', sans-serif;
}
.meniuphpbb2{
background: #222222;
line-height: 32px;
width: 100%!important;
text-align: left;
padding-top: 4px;
}
.meniuphpbb2 a{
display: inline-block;
min-width: 60px;
text-align: center;
color: #D8DCE0;
text-shadow: 0px 1px 1px #000;
text-decoration: none!important;
font-size: 12px;
font-family: tahoma;
background: #161616;
float: left;
margin: 0px 2px;
padding: 0px 6px;
border: 1px solid #111;
}
.meniuphpbb2 img{
display: none!important;
}
.meniuphpbb2 a:hover{
background: #111111;
}
.start, .restart, .stop, .reinstal, .online, .offline{
display: inline-block;
min-width: 52px;
text-align: center;
border: 1px solid #141414;
border-radius: 3px;
padding: 4px 6px;
margin: 0px 2px;
font-weight: 600;
font-family: tahoma;
text-shadow: 0px 0px 1px #111;
}
.fa{
margin-right: 4px;
}
.restart{background: #008CBA url(https://i.servimg.com/u/f86/16/74/33/30/highli10.png) repeat-x 0 0!important;} /* Blue */
.stop, .offline{background: #f44336 url(https://i.servimg.com/u/f86/16/74/33/30/highli10.png) repeat-x 0 0!important;;} /* Red */
.start, .online{background: #4CAF50 url(https://i.servimg.com/u/f86/16/74/33/30/highli10.png) repeat-x 0 0!important;;} /* Green */
.reinstal{background: orange url(https://i.servimg.com/u/f86/16/74/33/30/highli10.png) repeat-x 0 0!important;;} /* orange*/
.css img{
display: inline-block;
float: left;
margin-right: -13px;
}
</style>
</head>
<body>
<div class="spacetop">
<div class="main3d"><span>Lista servere si configurare</span></div>
<table class="index_box" width="1000px" border="0" cellpading="0" cellspacing="0">
<tr>
<th>Status</th><th>Nume</th><th>ip</th><th>Joc</th><th>Playeri</th><th>Harta</th><th>Configurare</th>
</tr>
<tr>
<td><span class="online">ONLINE</span></td><td><a href="/">MIX.DONGAME.RO</a></td><td>92.114.32.216:27015</td><td><div class="css"><img src="http://icons.iconarchive.com/icons/franksouza183/fs/16/Apps-counter-strike-icon.png"></img>Counter-Strike</div></td><td>de_dust2</td><td>10/14</td><td><span class="restart"><i class="fa fa-repeat" aria-hidden="true"></i>restart</span><span class="stop"><i class="fa fa-stop" aria-hidden="true"></i>stop</span><span class="reinstal"><i class="fa fa-refresh" aria-hidden="true"></i>reinstal</span>
</td>
</tr>
<tr>
<td><span class="offline">OFFLINE</span></td><td><a href="/">MIX.DONGAME.RO</a></td><td>92.114.32.216:27015</td><td><div class="css"><img src="http://icons.iconarchive.com/icons/franksouza183/fs/16/Apps-counter-strike-icon.png"></img>Counter-Strike</div></td><td>de_inferno</td><td>0/14</td><td><span class="start"><i class="fa fa-play" aria-hidden="true"></i>start</span><span class="restart"><i class="fa fa-repeat" aria-hidden="true"></i>restart</span><span class="reinstal"><i class="fa fa-refresh" aria-hidden="true"></i>reinstal</span>
</td>
</tr>
</table>
</div>
</body>
</html>