Hakkımızda

Metin2 Tasarımı

METİN2 TASARIMI

TÜR : CSS
ÖNİZLEME : www.sempatimt2tasarim.tr.gg
Telif Hakkı : Sempati-Tasarım
Bu Tasarımı Güzelleştirecek Önemli Kodlar
KODLAR

Tasarımın Üzerine :

<div style="text-align: center"><a href="#reklamkaldir" _fcksavedurl="#reklamkaldir"><span style="font-size: 100px">REKLAM KALDIR</span></a></div>
<a name="reklamkaldir"></a>
<script type="text/javascript" src="http://www.ogamecehennemt2.com/scripts/jq_base.js"></script>
<script type="text/javascript" src="http://www.ogamecehennemt2.com/scripts/slider.js"></script>
<script type="text/javascript"> 
       
		$(document).ready(function(){	
			$("#nSlider").easySlider({
				auto: true, 
				continuous: true
			});
		});  
    </script>

<div id="header">
<div class="wrap960">

<div id="navbar" role="navigation">
<ul>
<li><a class="nav-home" href="http://tasarimdeniyorumsempati.tr.gg" _fcksavedurl="http://tasarimdeniyorumsempati.tr.gg">Anasayfa</a></li>
<li><a class="nav-reg" href="#" _fcksavedurl="#">Kayıt Ol</a></li>
<li><a class="nav-dl" href="#" _fcksavedurl="#">Oyunu indir</a></li>
<li><a class="nav-sira" href="#" _fcksavedurl="#">Sıralama</a></li>
<li><a class="nav-fm" href="http://tasarimdeniyorumsempati.tr.gg/%26%23304%3Btem-shop.htm" _fcksavedurl="http://tasarimdeniyorumsempati.tr.gg/%26%23304%3Btem-shop.htm">İtem Shop</a></li>
<li><a class="nav-shop" href="#" _fcksavedurl="#" target="_blank">Forum</a></li>
<li><a class="nav-contact noborder" href="#" _fcksavedurl="#" target="_blank">Destek</a></li>
</ul>
</div>
</div>
</div>
<FCK:hr class="hr"  />

<div id="slider" role="secondary">
<div class="olap"></div>
<div id="sliderContainer">
<div id="nSlider">
<ul>
<li class="ns2">
<span class="nslayer">
<a href="#" _fcksavedurl="#">
<span class="n-title">Yeni Tasarım</span>
<span class="n-text">Sitemiz Yeni Tasarımına Geçmiştir...</span>
</a>
</span>
</li>
<li class="ns2">
<span class="nslayer">
<a href="#" _fcksavedurl="#">
<span class="n-title">Sempatimt2</span>
<span class="n-text">Sunucumuz Aktif olmuştur.</span>
</a>
</span>
</li>
<li class="ns2">
<span class="nslayer">
<a href="http://www.sempati-tasarim.tr.gg" _fcksavedurl="http://www.sempati-tasarim.tr.gg">
<span class="n-title">Daha Güzel Tasarımlar</span>
<span class="n-text">Daha Güzel Tasarımlar mı İstiyorsun ? TIKLA</span>
</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div id="bbg">
<div class="wrap960">
<div id="sidebar-left" class="sidebar" role="complementary">
<div class="sb-ui sb-title"><h3>Üye Girişi</h3></div>
<div class="sb-con">
<div class="clearfix"></div>
<div>                    <form id="login" action="Giris.htm" method="post">
<input class="fui txt user" type="text" name="logindata[name]" /><br />
<input class="fui txt pass" type="PASSWORD" name="logindata[kennwort]" value=""><br>
<p><br />
<input type="hidden" name="mode" value="1">
<input type="hidden" name="checklogin" value="1">
<input type="hidden" name="logindata[checklogin]" value="1">
<input class="fui btn log" type="submit" value="Giriş Yap">
</form>
<FORM action="Giris.htm" method="POST">
<input type="hidden" name="mode" value="2">
<input type="hidden" name="logindata[checklogin]" value="1">
<input class="fui btn log" type="submit" value="Çıkış"></form>
<br>                	<div class="clearfix"></div>
<a href="#" _fcksavedurl="#" class="sb-link">Üye Ol</a> <br />
<div class="clearfix"></div>
<a href="#" _fcksavedurl="#" class="sb-link">Şifremi Unuttum</a> <br />
<div class="clearfix"></div>
<a href="#" _fcksavedurl="#" class="sb-link">Aktivasyon Maili Gelmedi</a>
<div class="clear"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="sb-ui sb-end"></div>
<div class="sb-ui sb-title"><h3>Top 10</h3></div>
<div class="sb-con">
<div class="clearfix"></div>
<div class="ranking">
</div>
<div class="sb-links">
<a href="#" _fcksavedurl="#" class="sb-link">Karakter Siralamasi</a><br />
<a href="#" _fcksavedurl="#" class="sb-link">Lonca Siralamasi</a>
</div>
<div class="clearfix"></div>
</div>
<div class="sb-ui sb-end"></div>
</div>

<div id="content" role="main">
<div class="c-top"></div>
<div class="c-con">
<center>

Tasarımın Altına :

</center>
<div class="clearfix"></div>
</div>
<div class="c-end"></div>
</div>

<div id="sidebar-right" class="sidebar" role="complementary">

<div class="sb-ui sb-title"><h3>Server Bilgileri</h3></div>
<div class="status-box">

<div class="time">Sempatimt2</div>

<div class="stats">
<p class="on">Server Online</p>
<p class="info">1000x EXP</p>
<p class="info">1000x Yang</p>
<p class="info">1000x İtem</p>

<div class="abso">
<div class="char-cont">
<div class="character"></div>
</div>
</div>
</div>

<div class="players">
<p class="p-now"><span>Sempatimt2</span></p>
<p class="p-record"><span>Pvp'nin En İyi Adresi!</span></p>
</div>
</div>
<div class="sb-ui sb-end"></div>
</div>
<div class="clear"></div>
</div>
<FCK:hr class="hr"  />

<div id="footer" role="contentinfo">
<div class="wrap600">

<div class="left">
<p>Copyright © <a href="http://ogamecehennemt2.com" _fcksavedurl="http://ogamecehennemt2.com">Ogame Cehennemi</a>
2011. All rights reserved.<br >
Kodlama : <a href="http://sempati-tasarim.tr.gg" _fcksavedurl="http://sempati-tasarim.tr.gg" alt="Sempati-Tasarim" title="Sempati-Tasarim">
Sempati-Tasarım</a></p>
</div>

<div class="right">
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>

CSS Kısmına :

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
table {margin-left: auto;margin-right: auto}
/*---------------------------------------------------*/
/*  ChimaeraMt2 Css Arşivi
/*  Www.Gncweb.Net
/*  © 2011. All rights reserved.
/*---------------------------------------------------*/
/* Global Properties --------------------------------*/
html, body, * {
padding:0;
margin:0;
}
html, body {
width:100%;
overflow-x:hidden;
}
body {
background:#000;
text-align:center;
color:#a49b8c;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
.left {
float:left;
}
.right {
float:right;
}
.clear {clear:both}
.clearfix {clear:both; height:1px;}
hr.hr {display:none;}
a {text-decoration:none; color:#ede0cc}
a:hover {color:#FFF;}
a:focus {outline:none;}
a img {border:none;}
/*---------------------------------------------------*/
/* Main Elements ------------------------------------*/
#header {
margin:0 auto;
height:200px;
background:url("http://www.ogamecehennemt2.com/images/ui/bg_top.jpg") no-repeat top center;
overflow:hidden;
}
.wrap960 {
width:960px;
margin:0 auto;
}
.wrap600 {
width:600px;
margin:0 auto;
}
#slider {
margin:0 auto;
height:220px;
background:url("http://www.ogamecehennemt2.com/images/ui/bg_slider.jpg") no-repeat top center;
overflow:hidden;
}
#wrapper {
margin:0 auto;
background:url("http://www.ogamecehennemt2.com/images/ui/bg_con.jpg") no-repeat top center;
text-align:left;
}
#bbg {
min-height:570px;
margin:0 auto;
background:url("http://www.ogamecehennemt2.com/images/ui/bg_bottom.jpg") no-repeat bottom center;
}
.sidebar, #content {
float:left;
}
.sidebar {
width:170px;
position:relative;
bottom:7px;
}
#regForm {
margin:0 0 0 20px;
}
#regForm label span {
display:inline-block;
width:100px;
text-align:left;
}
#regForm label label.error {
padding-left:7px;
font-size:10px;
color:#C00;
}
.sep, .sep2 {
height:1px;
border-bottom:1px dotted #EEE;
width:95%;
margin:5px 0 10px;
}
.sep2 {
border-bottom:1px dotted #ede7d9;
}
/*---------------------------------------------------*/
/* Frames All 'Round --------------------------------*/
.frame {
position:fixed;
z-index:42;
}
#frame-top, #frame-bottom {
height:19px;
background-repeat:repeat-x;
width:100%;
}
#frame-top {
top:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_top.png");
}
#frame-bottom {
bottom:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_bottom.png");
}
#frame-left, #frame-right {
width:19px;
background-repeat:repeat-y;
height:100%;
}
#frame-left {
left:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_left.png");
}
#frame-right{
right:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_right.png");
}
/*---------------------------------------------------*/
.corner {
position:fixed;
z-index:43;
height:81px;
width:108px;
background-repeat:no-repeat;
}
#frame-c-tl {
top:0;
left:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_ctl.png");
}
#frame-c-tr  {
top:0;
right:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_ctr.png");
}
#frame-c-bl {
bottom:0;
left:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_cbl.png");
}
#frame-c-br  {
bottom:0;
right:0;
background:url("http://www.ogamecehennemt2.com/images/ui/frame_cbr.png");
}
/*---------------------------------------------------*/
/* Header -------------------------------------------*/
#header #logo {
float:left;
margin-top:62px;
}
#navbar {
float:right;
width:646px;
height:38px;
margin:74px 28px 0 0;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar ul li {
margin:0;
padding:0;
}
#navbar ul li a {
display:block;
width:88px;
height:100%;
float:left;
margin:0 5px 0 0;
text-align:center;
font-size:14px;
line-height:2.5;
color:#9aabab;
text-shadow:0px 1px 4px #000;
}
#navbar ul li a.noborder {
background:none;
margin:0 !important;
}
#navbar ul li a:hover {
color:#dedcbf;
text-shadow:
0px 0px 20px #0095b5,
0px 0px 14px #004554,
0px 0px 38px #004554,
0px 0px 22px #004554,
0px 0px 46px #0095b5
;
}
#navbar ul li a:active {
color:#dedcbf;
text-shadow:
0px 0px 20px #000,
0px 0px 30px #000,
0px 0px 40px #000,
0px 0px 50px #000,
0px 0px 60px #000
;
}
#home a.nav-home,
#register a.nav-reg,
#download a.nav-dl,
#forums a.nav-fm,
#ranking a.nav-rank,
#usercp a.nav-ucp,
#shop a.nav-shop,
#navbar ul li a.current
{
color:#FFF !important;
text-shadow:
0 0px 2px #000,
5px 0 35px #4dadcd,
-5px 0 35px #4dadcd,
10px 0 25px #4dadcd,
-10px 0 25px #4dadcd,
10px 0 25px #4dadcd,
-10px 0 25px #4dadcd
!important
}
/*---------------------------------------------------*/
/* Slider -------------------------------------------*/
#slider {
margin:0;
}
#sliderContainer {
width:574px;
height:112px;
margin:60px auto 0;
}
#nSlider, #nSlider ul, #nSlider ul li, #overlap {
display:block;
height:112px;
width:574px;
margin:0 auto;
overflow:hidden;
}
.olap {
width:574px;
margin:0 auto;
position:relative;
top:61px;
height:1px;
}
#overlap {
background:url("http://www.ogamecehennemt2.com/images/ui/slider_overlap.png");
z-index:5;
position:absolute;
}
/* Slider Images */
.ns1 {
background:url("http://www.ogamecehennemt2.com/images/news/slide_01.jpg");
}
.ns2 {
background:url("http://www.ogamecehennemt2.com/images/news/slide_02.jpg");
}
.ns3 {
background:url("http://www.ogamecehennemt2.com/images/news/slide_03.jpg");
}
.ns4 {
background:url("http://www.ogamecehennemt2.com/images/news/slide_04.jpg");
}
.ns5 {
background:url("http://www.ogamecehennemt2.com/images/news/slide_05.jpg");
}
/* - - - - - - - */
#nSlider ul li span.nslayer {
z-index:6;
position:relative;
width:100%;
height:100%;
display:block;
}
#nSlider ul li span.nslayer a {
display:block;
height:70px;
padding:10px;
margin:10px 30px;
text-align:left;
}
span.n-title {
font-size:16px;
color:#FFF;
display:block;
margin:10px 0 5px;
}
span.n-text {
color:#d5d9b9;
letter-spacing:1px;
}
/* Controls */
#prevBtn a,
#nextBtn a {
display:block;
width:62px;
height:62px;
background:url("http://www.ogamecehennemt2.com/images/ui/slider_controls.png");
z-index:24;
overflow:hidden;
line-height:20;
position:relative;
bottom:85px;
}
#nextBtn a {
float:right;
background-position:top right;
left:30px;
}
#nextBtn a:hover {
background-position:center right;
}
#nextBtn a:active {
background-position:bottom right;
}
#prevBtn a {
float:left;
right:30px;
}
#prevBtn a:hover {
background-position:center left;
}
#prevBtn a:active {
background-position:bottom left;
}
/*---------------------------------------------------*/
/* Content ------------------------------------------*/
#content {
width:602px;
}
.c-top {
height:40px;
background:url("http://www.ogamecehennemt2.com/images/ui/content_top.jpg");
}
.c-end {
height:45px;
background:url("http://www.ogamecehennemt2.com/images/ui/content_end.png");
}
.c-con {
background:url("http://www.ogamecehennemt2.com/images/ui/content_repeat.jpg") repeat-y top center;
min-height:600px;
}
.post-mini {
width:531px;
height:46px;
background:url("http://www.ogamecehennemt2.com/images/ui/post_mini.jpg");
margin:10px auto 25px;
display:block;
}
.postui {
background:url("http://www.ogamecehennemt2.com/images/ui/post_ui.jpg");
margin:0 auto;
width:531px;
}
.post-title {
height:57px;
line-height:2.4;
}
.post-end {
background-position:left bottom;
height:19px;
margin-bottom:26px;
}
.post-con {
background:url("http://www.ogamecehennemt2.com/images/ui/post_ui_bg.jpg") repeat-y top center;
padding:10px 40px;
width:511px;
line-height:2;
font-size:11px;
color:#928c7c;
}
.post-title h2, .post-mini span.h3 {
float:left;
color:#ead7b6;
font-size:18px;
font-weight:normal;
}
.post-title h2 img, .post-mini img {
float:left;
display:block;
margin:9px 15px 0 10px;
}
.post-title h2 a span{
color:#eaddb6;
position:relative;
top:2px;
}
span.date {
display:block;
float:right;
width:100px;
text-align:center;
position:relative;
top:12px;
right:10px;
color:#698997;
font-size:11px;
}
.post-mini span.date {
top:18px;
}
.post-mini span.h3 {
position:relative;
top:15px;
}
.post-con .sb-link {
margin-left:5px;
text-transform:uppercase;
}
a.post-mini:hover span.h3, .post-title h2 a:hover span {
color:#FFF;
}
/*---------------------------------------------------*/
/* Sidebars -----------------------------------------*/
#sidebar-left {
margin-right:9px;
}
#sidebar-right {
margin-left:9px;
}
.sb-ui {
background:url("http://www.ogamecehennemt2.com/images/ui/sidebar_ui.png");
}
.sb-title {
height:60px;
text-align:center;
}
.sb-end {
height:33px;
background-position:bottom center;
margin-bottom:10px;
}
.sb-con {
background:url("http://www.ogamecehennemt2.com/images/ui/sidebar_bgrepeat.jpg") repeat-y;
margin:0;
}
.sb-title h3 {
color:#ede0bd;
text-shadow:0 1px 3px #000;
font-size:14px;
line-height:59px;
font-weight:normal;
}
/*-------------------------------- ValkyrieMt2 --*/
/* Login ----------------------------------------*/
form#login {
margin:0px auto;
width:137px;
}
form#login div {
margin:10px auto;
}
.fui {
border:none;
}
input.txt {
width:127px;
height:18px;
padding:5px;
color:#847d5b;
margin:5px 0;
text-indent:34px;
background:url("http://www.ogamecehennemt2.com/images/ui/text_input_sprite.jpg");
}
input.txt:hover {
color:#c4bc96;
}
input.txt:active,
input.txt:focus {
color:#fff9de;
}
input.user:hover {
background-position:top center;
}
input.user:active,
input.user:focus {
background-position:top right;
}
input.pass {
background-position:bottom left;
}
input.pass:hover {
background-position:bottom center;
}
input.pass:active,
input.pass:focus {
background-position:bottom right;
}
input.btn {
margin-top:8px;
background:url("http://www.ogamecehennemt2.com/images/ui/button_sprite.jpg");
display:block;
height:28px;
width:64px;
color:#c6e7ff;
cursor:pointer;
font-size:10px;
padding-bottom:2px;
text-transform:uppercase;
text-shadow:0 0 2px #000;
}
input.log {
float:left;
}
input.reg {
float:right;
}
input.btn:hover {
color:#FFF;
background-position:center center;
}
input.btn:active {
color:#d7e2ea;
background-position:bottom center;
}
/*-----------------------------------------------*/
/* Ranking --------------------------------------*/
.ranking {
width:145px;
height:233px;
margin:15px auto;
background:url("http://www.ogamecehennemt2.com/images/ui/sb_ranktable.jpg");
}
.ranking table {
padding:0;
margin:0;
font-size:10px;
line-height:0;
}
.ranking table tr {
height:23px;
}
.t-rank {
width:25px;
text-align:center;
color:#bde1ed;
}
.t-name {
width:86px;
text-align:left;
text-indent:5px;
color:#9ebac4;
}
.t-lvl {
width:33px;
text-align:center;
color:#bde1ed;
}
/*-----------------------------------------------*/
/* Status ---------------------------------------*/
.status-box {
height:160px;
width:170px;
background:url("http://www.ogamecehennemt2.com/images/ui/sidebar_bg_status.jpg");
}
.status-box .time {
text-align:center;
font-size:10px;
color:#8591a0;
padding:8px 0 25px;
}
.status-box .stats {
height:95px;
}
.status-box .stats p {
background:url("http://www.ogamecehennemt2.com/images/ui/status_indicators.png") no-repeat;
text-indent:14px;
margin:0 0 4px 20px;
font-size:12px;
position:relative;
z-index:5;
}
.status-box .stats .on {
color:#7b965e;
background-position:0 4px;
}
.status-box .stats .off {
color:#96675e;
background-position:0 -14px;
}
.status-box .stats .info {
color:#456d9f;
background-position:0 -31px;
}
.abso {
position:absolute;
}
.status-box .stats .char-cont {
position:relative;
bottom:85px;
left:130px;
}
.status-box .stats .character {
background:url("http://www.ogamecehennemt2.com/images/misc/status_character.png") no-repeat;
height:91px;
width:75px;
z-index:41;
position:absolute;
}
.status-box .players {
text-align:center;
}
.status-box .players .p-now {
font-size:11px;
color:#8591a0;
}
.status-box .players .p-record {
font-size:9px;
color:#4e5762;
}
.status-box .players .p-now span {
color:#FFF;
}
.status-box .players .p-record span {
color:#82868c;
}
/*-----------------------------------------------*/
/* Special Buttons ------------------------------*/
a.special {
background:url("http://www.ogamecehennemt2.com/images/ui/sb_special_buttons.gif");
display:block;
height:80px;
margin:20px auto;
}
a.special span {
visibility:hidden;
}
a.sb-download {
width:170px;
}
a.sb-download:hover {
background-position:center left;
}
a.sb-download:active {
background-position:bottom left;
}
a.sb-community {
width:186px;
background-position:top right;
}
a.sb-community:hover {
background-position:center right;
}
a.sb-community:active {
background-position:bottom right;
}
/*---------------------------------------------------*/
/* Misc ---------------------------------------------*/
.cp {
display:none;
/*key: db828fb6b6dcb8af089480cb5ca9c416;*/
}
.sb-links {
margin:5px 0 5px 15px;
}
a.sb-link {
color:#768088;
background:url("http://www.ogamecehennemt2.com/images/ui/link_bullet_sprite.png") no-repeat 0 0;
font-size:10px;
margin:8px 0;
padding-left:10px;
}
a.sb-link:hover {
color:#FFF;
background-position:0 -16px;
}
a.sb-link:active {
color:#81adcd;
background-position:0 -32px;
}
/*---------------------------------------------------*/
/* Footer -------------------------------------------*/
#footer {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:10px;
color:#b1bcc9;
padding:5px 0 40px 0;
}
#footer .left {
margin-left:30px;
}
#footer .right {
margin-right:30px;
}
#footer a {
color:#FFF;
}
#footer a:hover {
text-decoration:underline;
}
#footer a:active {
color:#FFF;
}
#navbar ul li {
display:block;
float:left;
}
.olap {
width:574px;
margin:0 auto;
position:relative;
top:61px;
right:287px;
height:1px;
}
#overlap {
background:url("http://www.ogamecehennemt2.com/images/ui/slider_overlap.png");
z-index:5;
position:absolute;
}
#nSlider, #nSlider ul, #nSlider ul li {
position:relative;
}
#nextBtn a {
float:right;
background-position:top right;
left:30px;
}
#nextBtn a:hover {
background-position:-62px -62px;
}
#nextBtn a:active {
background-position:-62px -124px;
}
#prevBtn a {
float:left;
right:30px;
}
#prevBtn a:hover {
background-position:0 -62px;
}
#prevBtn a:active {
background-position:0 -124px;
}
input.txt {
float:left;
}
.status-box .players .p-record {
line-height:2;
}
.ranking table tr {
line-height:2;
}
.frame, .corner {
display:none;
}
#sidebar-left {
margin-right:0px;
position:relative;
right:8px;
}
#sidebar-right {
margin-left:0px;
position:relative;
left:8px;
}
.character {
display:none;
}

Kodlar

Kutucuk Kodu.
<div class="postui post-title"> <h2><a href="Haberoku.asp?id=7" _fcksavedurl="Haberoku.asp?id=7"><img src="http://www.ogamecehennemt2.com/images/news/01.jpg" _fcksavedurl="http://www.ogamecehennemt2.com/images/news/01.jpg" alt="" /> <span> BURAYA BAŞLIK</span></a></h2> <span class="date"></span> </div> <div class="postui post-con"> <p>Buraya Açıklama Ekleyebilirsiniz...</p> <p></p><br> </div> <div class="postui post-end"></div>
Ön İzlemeye Baktıysanız Bu Kutucuğu Göreceksiniz.
Üye Girişi Yazan Kısım...Ana Sayfaya Eklenecek.

Çerçeve Kodu.
 <div class="frame" id="frame-top"></div> <div class="frame" id="frame-bottom"></div> <div class="frame" id="frame-left"></div> <div class="frame" id="frame-right"></div> <div class="corner" id="frame-c-tl"></div> <div class="corner" id="frame-c-tr"></div> <div class="corner" id="frame-c-bl"></div> <div class="corner" id="frame-c-br"></div> 
Bu Kodun Ön İzlemesi Yok.
Ama Güzel Bir Kod. Tasarımın Etrafını Çerçeveliyor.
Tasarımın En Üstüne Eklenecek...

Server Açık/Kapalı
Arkadaşlar Tasarımın Altında Server Bilgileri Diye bir yer Var.
Orada ;
<p class="on">Server Online</p>
Şeklinde Bir Kod Olacak.
Bu Koddaki On Kısmını
<p class="on">Server Online</p>
Off Yaparsanız
<p class="off">Server Online</p>
Server Ofline Şeklinde Görünür.
Yani Kısacası Orayı
Server Online İken
<p class="on">Server Online</p>
Server Ofline İken
<p class="off">Server Offline</p>
Yapın...