Página inicial

• Descrição:

Oi, queria saber como posso fazer pra ter a aparencia do forum como mostra nas prints.
são a página inicial do forum, passo a passo pra fazer isso ai -q



https://i.imgur.com/tAYNrYd.png

https://i.imgur.com/BbqYyBT.png

• Informações:

Código:


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="icon" href="http://i44.servimg.com/u/f44/17/54/77/83/asdasd11.png" type="HD" /> <title>CSI: SA | TAS | ST</title> <meta name="language" content="Português" /> <meta name="keywords" content="http://csi-nwd.forumeiros.com/" /> <meta name="description" content="http://csi-nwd.forumeiros.com/" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSI: SA | TAS | TS</title> <style type="text/css" media="all">
 
 
 
 
 
 
 
html,
 
 
 
 
 
 
 
body {
 
 
 
 
 
 
 
    margin: 0;
 
 
 
 
 
 
 
    padding: 0;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box {
 
 
 
 
 
 
 
    position: fixed;
 
 
 
 
 
 
 
    left: 0;
 
 
 
 
 
 
 
    right: 0;
 
 
 
 
 
 
 
    top: 0;
 
 
 
 
 
 
 
    bottom: 0;
 
 
 
 
 
 
 
    width: 100%;
 
 
 
 
 
 
 
    height: 100%;
 
 
 
 
 
 
 
    overflow: hidden;
 
 
 
 
 
 
 
    background: #00EEEE;
 
 
 
 
 
 
 
    font-family: Rockwell, Arial, sans-serif;
 
 
 
 
 
 
 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
 
 
 
 
 
 
 
    -webkit-user-select: none;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-text,
 
 
 
 
 
 
 
#text-shadow-box #tsb-link {
 
 
 
 
 
 
 
    position: absolute;
 
 
 
 
 
 
 
    top: 40%;
 
 
 
 
 
 
 
    left: 0;
 
 
 
 
 
 
 
    width: 100%;
 
 
 
 
 
 
 
    height: 1em;
 
 
 
 
 
 
 
    margin: -0.77em 0 0 0;
 
 
 
 
 
 
 
    font-size: 70px;
 
 
 
 
 
 
 
    line-height: 1em;
 
 
 
 
 
 
 
    font-weight: bold;
 
 
 
 
 
 
 
    text-align: center;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-text {
 
 
 
 
 
 
 
    font-size: 100px;
 
 
 
 
 
 
 
    color: transparent;
 
 
 
 
 
 
 
    text-shadow: black 0px -45.2px 19px;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-link a {
 
 
 
 
 
 
 
    color: #FFFFFF;
 
 
 
 
 
 
 
    text-decoration: none;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-box,
 
 
 
 
 
 
 
#text-shadow-box #tsb-wall {
 
 
 
 
 
 
 
    position: absolute;
 
 
 
 
 
 
 
    top: 41%;
 
 
 
 
 
 
 
    left: 0;
 
 
 
 
 
 
 
    width: 100%;
 
 
 
 
 
 
 
    height: 60%;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-box {
 
 
 
 
 
 
 
    -webkit-box-shadow: black 0px -45.2px 39px;
 
 
 
 
 
 
 
    -moz-box-shadow: black 0px -45.2px 39px;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-wall {
 
 
 
 
 
 
 
    background: #999;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-wall p {
 
 
 
 
 
 
 
    position: relative;
 
 
 
 
 
 
 
    font-size: 15px;
 
 
 
 
 
 
 
    line-height: 1.5em;
 
 
 
 
 
 
 
    text-align: justify;
 
 
 
 
 
 
 
    color: #222;
 
 
 
 
 
 
 
    width: 550px;
 
 
 
 
 
 
 
    margin: 1.5em auto;
 
 
 
 
 
 
 
    cursor: default;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-wall p a {
 
 
 
 
 
 
 
    color: #fff;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#text-shadow-box #tsb-wall p a:hover {
 
 
 
 
 
 
 
    text-decoration: none;
 
 
 
 
 
 
 
    color: #000;
 
 
 
 
 
 
 
    background: #fff;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#tsb-spot {
 
 
 
 
 
 
 
    position: absolute;
 
 
 
 
 
 
 
    top: -50%;
 
 
 
 
 
 
 
    left: -50%;
 
 
 
 
 
 
 
    width: 200%;
 
 
 
 
 
 
 
    height: 200%;
 
 
 
 
 
 
 
    pointer-events: none;
 
 
 
 
 
 
 
    background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
 
 
 
 
 
 
 
    background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
</style>
<!--        [if IE]>
 
 
 
 
 
 
 
<style type="text/css">
 
 
 
 
 
 
 
/* Infelizmente não há suporte para o IE9 ponteiro-eventos: none; nem CSS2 text-shadow  */
 
 
 
 
 
 
 
#tsb-spot {
 
 
 
 
 
 
 
    display: none;
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
#tsb-ie {
 
 
 
 
 
 
 
    position: absolute;
 
 
 
 
 
 
 
    top: -90%;
 
 
 
 
 
 
 
    left: -50%;
 
 
 
 
 
 
 
    width: 200%;
 
 
 
 
 
 
 
    height: 334%;
 
 
 
 
 
 
 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
</style>
 
 
 
 
 
 
 
<![endif]        -->
<center>
     <embed src="playergv1.swf" />
</center>
 
<div id="text-shadow-box">
    
   <div style="box-shadow: 0px 84.8px 48px black;" id="tsb-box">
       
   </div>
    
   <p style="text-shadow: -28px 84.8px 28px black;" id="tsb-text">
        CSI: 
   </p>
    
   <p id="tsb-link">
        <a href="http://csi-nwd.forumeiros.com/portal">CSI:</a> 
   </p>
    
   <div id="tsb-wall">
       
      <div id="tsb-ie">
          
      </div><br /> 
      <p>
          
      </p>
       
      <center>
          
         <h1>
              <blink>Fórum Oficial da CSI: SA | TAS | ST</blink> 
         </h1>
          
         <center>
              A CSI é uma Organização Policial do Server Brasil Viva a Vida [ RPG ] NWD Games 
         </center>
          
         <p>
             
         </p>
           <a target="_blank" title="Entrar" href="http://csi-nwd.forumeiros.com/portal"><img src="http://i49.servimg.com/u/f49/16/79/58/45/entrar15.png" border="0" /></a> <a target="_blank" title="Cadastre-se no Fórum" href="http://csi-nwd.forumeiros.com/register"><img src="http://i49.servimg.com/u/f49/16/79/58/45/cadast10.png" border="0" /></a> 
      </center>
       
      <p>
          
      </p>
       
      <center>
         <a href="http://www.game-state.com/192.99.255.145:6666/"><img src="http://www.game-state.com/192.99.255.145:6666/350x20_FFFFFF_FFFFFF_000000_000000.png" alt="www.Game-State.com" style="border-style: none;" /></a> 
      </center>
        <br /> 
      <center>
           <iframe src="//www.facebook.com/plugins/like.php?href=http://csi-nwd.forumeiros.com/;send=false&layout=standard&width=200&show_faces=true&action=like&colorscheme=light&font&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:25px;" allowtransparency="true"></iframe> 
      </center>
        <br /><br /><br /> 
      <center>
           CSI: SA | TAS | ST 2012 - 2014 - Todos os direitos reservados. <br /><right><span style="color: rgb(255, 255, 255); font-family: Tahoma; font-size: 10px;"> Criação e Edição do Fórum: Bruninho_step - Tween. | Elaboração desta HTML: Bruninho_step - Tween. - Max Kyle | <a href="http://www.forumeiros.com" target="_blank">Forumeiros</a> </span></right><br /> 
      </center>
       
   </div>
    
   <div style="background-position: 70px -319px;" id="tsb-spot">
       
   </div>
    
</div>
 <script type="text/javascript" language="javascript" charset="utf-8">
 
 
 
 
 
 
 
/**
 
 
 
 * - Max Kyle -
 
 
 
 * http://spdesign.ativoforum.com
 
 
 
 * Criei essa pagina (^_^)
 
 
 
 * Recife - Pernambuco | Nordestino também sabe fazer código
 
 
 
 * Isto tem direitos autorais não remova meus créditos dei duro pra fazer isso | Max Kyle
 
 
 
 */
 
 
 
 
 
 
 
var text = null;
 
 
 
 
 
 
 
var spot = null;
 
 
 
 
 
 
 
var box = null;
 
 
 
 
 
 
 
var boxProperty = '';
 
 
 
 
 
 
 
init();
 
 
 
 
 
 
 
function init() {
 
 
 
 
 
 
 
    text = document.getElementById('tsb-text');
 
 
 
 
 
 
 
    spot = document.getElementById('tsb-spot');
 
 
 
 
 
 
 
    box = document.getElementById('tsb-box');
 
 
 
 
 
 
 
    if (typeof box.style.webkitBoxShadow == 'string') {
 
 
 
 
 
 
 
        boxProperty = 'webkitBoxShadow';
 
 
 
 
 
 
 
    } else if (typeof box.style.MozBoxShadow == 'string') {
 
 
 
 
 
 
 
        boxProperty = 'MozBoxShadow';
 
 
 
 
 
 
 
    } else if (typeof box.style.boxShadow == 'string') {
 
 
 
 
 
 
 
        boxProperty = 'boxShadow';
 
 
 
 
 
 
 
    }
 
 
 
 
 
 
 
    if (text && spot && box) {
 
 
 
 
 
 
 
        document.getElementById('text-shadow-box').onmousemove = onMouseMove;
 
 
 
 
 
 
 
        document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
 
 
 
 
 
 
 
    }
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
function onMouseMove(e) {
 
 
 
 
 
 
 
    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
 
 
 
 
 
 
 
        return;
 
 
 
    }
 
 
 
 
 
 
 
    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
 
 
 
 
 
 
 
    var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
 
 
 
 
 
 
 
    var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
 
 
 
 
 
 
 
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
 
 
 
 
 
 
 
    if (boxProperty) {
 
 
 
 
 
 
 
        box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
 
 
 
 
 
 
 
    }
 
 
 
 
 
 
 
    xm = e.clientX - Math.floor(window.innerWidth / 2);
 
 
 
 
 
 
 
    ym = e.clientY - Math.floor(window.innerHeight / 2);
 
 
 
 
 
 
 
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
</script> <style type="text/css">body, a:hover {cursor: url(http://img24.imageshack.us/img24/7129/glovecursor.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/22/x-steel-pointer-2.html" target="_blank" title="X-Steel Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="X-Steel Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
<p>
</p>

Código:


<title>TSR</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><link href="http://dl.dropbox.com/u/19426320/Swords.png" type="image/x-icon" rel="shortcut icon" /> <link media="screen" type="text/css" href="http://www.ggames.com.br/css/style.css" rel="stylesheet" /> <script type="text/css">
     
<!--////////////////////////////////////////////////////////////////////////////////-->
 
<!--/                                                                                              ///-->
   
<!--/                                                                                              ///-->
   
<!--/                    Portal Versão 1.0                                              ///-->
 
<!--/                    Editado por Henrique                              ///-->
 
<!--/                                                                                              ///-->
 
<!--////////////////////////////////////////////////////////////////////////////////-->
      <script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28009881-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
      </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://espions.webs.com/cufon-yui.js"></script> <script type="text/javascript" src="http://espions.webs.com/BabelSans_500.font.js"></script> <script type="text/javascript" src="http://espions.webs.com/jquery.easing.1.3.js"></script><script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script> <script type="text/javascript">
        $(function() {
            Cufon.replace('a, span').CSS.ready(function() {
              var $menu      = $("#slidingMenu");
           
              var $selected  = $menu.find('li:first');
           
              var $moving      = $('<li />',{
                  className  : 'move',
                  top        : $selected[0].offsetTop + 'px',
                  width      : $selected[0].offsetWidth + 'px'
              });
           
              $('#slidingMenuDesc > div').each(function(i){
                  var $this = $(this);
                  $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
              });
           
              $menu.bind('mouseleave',function(){
                    moveTo($selected,400);
                    })
                  .append($moving)
                  .find('li')
                  .not('.move')
                  .bind('mouseenter',function(){
                    var $this = $(this);
                    var offsetLeft = $this.offset().left - 20;
                    //slide in the description
                    $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
                    //move the absolute div to this item
                    moveTo($this,400);
                    })
                    .bind('mouseleave',function(){
                    var $this = $(this);
                    var offsetLeft = $this.offset().left - 20;
                    //slide out the description
                    $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
                    });;
           
              function moveTo($elem,speed){
                  $moving.stop(true).animate({
                    top      : $elem[0].offsetTop + 'px',
                    width  : $elem[0].offsetWidth + 'px'
                  }, speed, 'easeOutExpo');
              }
            }) ;
        });
      </script> <style>
          span.reference{
              position:fixed;
              left:10px;
              bottom:10px;
              font-size:14px;
          }
          span.reference a{
  color:#aaa;
  text-decoration:underline;
          }
body {
    background-image: url('http://i.imgur.com/aWBoFtV.jpg') !important;
    background-repeat: no-repeat;
    }
      </style>
<div>
    <span class="reference"> TSR 2013/2014 | Editado pela <a alt="Web Designer Roy" target="_Blank" href="http://tsrnwd.forumeiros.com">Equipe TSR</a> | Hospedado por <a alt="Forumeiros" target="_Blank" href="http://www.forumeiros.com">Forumeiros.</a> </span>
</div>
 
<div class="slidingMenuDesc" id="slidingMenuDesc">
   
   <div>
       <span>Logue-se ao Portal</span>
   </div>
   
   <div>
       <span>Leia as regras do cla</span>
   </div>
   
   <div>
       <span>Peca ja seu recrutamento</span>
   </div>
   
   <div>
       <span>Veja nosso sistema de testes</span>
   </div>
   
   <div>
       <span>Registre-se no forum</span>
   </div>
   
   <div>
       <span>Logue-se no forum</span>
   </div>
   
</div>
 
<ul class="slidingMenu" id="slidingMenu">
   
   <li>
       <a href="/forum">Forum</a>
   </li>
   
   <li>
       <a title="" href="/portal">Portal</a>
   </li>
   
   <li>
       <a title="" href="/t33-regras-do-cla">Regras</a>
   </li>
   
   <li>
       <a title="" href="/h2-">Recrutamento</a>
   </li>
   
   <li>
       <a title="" href="/t474-leiasistema-de-testes">Testes</a>
   </li>
   
   <li>
       <a title="" href="/register">Registre-se</a>
   </li>
   
   <li>
       <a title="" href="/login">Login</a>
   </li>
   
</ul>

Painel de Controle Módulos HTML & JAVASCRIPT Gestão das páginas HTML