Página inicial para servidor de SA-MP

4 participantes

Ir para baixo

Tópico resolvido Página inicial para servidor de SA-MP

Mensagem por PrisoN†BreaK 01.12.15 14:38

Detalhes da questão


Endereço do fórum: http://tatudm.forumeiros.com/forum
Versão do fórum: PhpBB3

Descrição


Código:


<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Editavel</title>
      <meta name="description" content="Editavel" />
      <meta name="keywords" content="SA:MP - RPG" />
      <meta name="author" content="Codrops" />
      <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
                <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
      <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
  </head>
<style>
  /* General styles for all menus */
.cbp-spmenu {
  background: #163c52;
  position: fixed;
}

.cbp-spmenu h3 {
  color: #afdefa;
  font-size: 1.9em;
  padding: 20px;
  margin: 0;
  font-weight: 300;
  background: #0d77b6;
}

.cbp-spmenu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
}

.cbp-spmenu a:hover {
  background: #1c5f85;
}

.cbp-spmenu a:active {
  background: #afdefa;
  color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.cbp-spmenu-vertical a {
  border-bottom: 1px solid #1c5f85;
  padding: 1em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
  width: 100%;
  height: 150px;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
  height: 100%;
  width: 20%;
  float: left;
}

.cbp-spmenu-horizontal a {
  float: left;
  width: 20%;
  padding: 0.8em;
  border-left: 1px solid #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
  left: -240px;
}

.cbp-spmenu-right {
  right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
  left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
  right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
  top: -150px;
}

.cbp-spmenu-bottom {
  bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
  top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
  bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.cbp-spmenu-push-toright {
  left: 240px;
}

.cbp-spmenu-push-toleft {
  left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

  .cbp-spmenu-horizontal {
      font-size: 75%;
      height: 110px;
  }

  .cbp-spmenu-top {
      top: -110px;
  }

  .cbp-spmenu-bottom {
      bottom: -110px;
  }

}

@media screen and (max-height: 26.375em){

  .cbp-spmenu-vertical {
      font-size: 90%;
      width: 190px;
  }

  .cbp-spmenu-left,
  .cbp-spmenu-push-toleft {
      left: -190px;
  }

  .cbp-spmenu-right {
      right: -190px;
  }

  .cbp-spmenu-push-toright {
      left: 190px;
  }
}
  /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
  font-family: 'fontawesome';
  src:url('../fonts/fontawesome.eot');
  src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
      url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
      url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
#lixo {
display:none;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #0f354b;
    background: #273749 url("http://i68.servimg.com/u/f68/19/22/11/16/untitl10.jpg") top no-repeat;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}


.main,
.container > header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
  padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0;
  float: left;
  font-weight: 400;
}

.container > header span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container > header nav {
  float: right;
}

.container > header nav a {
  display: block;
  float: left;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  color: transparent;
  margin: 0 0.1em;
  border: 4px solid #0f354b;
  text-indent: -8000px;
}

.container > header nav a:after {
  content: attr(data-info);
  color: #0f354b;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.container > header nav a:hover:after {
  opacity: 1;
}

.container > header nav a:hover {
  background: #0f354b;
}

.main > section {
  max-width: 260px;
  width: 90%;
  margin: 0 auto;
}

.main > section h2 {
  font-weight: 300;
  color: #ccc;
}

.main > section button {
  border: none;
  background: #0f354b;
  color: #fff;
  padding: 1.5em;
  display: block;
  width: 100%;
  cursor: pointer;
  margin: 10px 0;
  font-size: 0.8em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
  background: #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
  background: #0d77b6;
}

.main > section button.disabled {
  background: #aaa;
  pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
  font-family: 'fontawesome';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  color: #0f354b;
  -webkit-font-smoothing: antialiased;
  text-indent: 8000px;
  padding-left: 8px;
}

.container > header nav a:hover:before {
  color: #fff;
}

.icon-drop:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\f060";
}
span.eddyeowna{
            background: #0f354b;
                                position:fixed;
            right:0px;
            bottom:30px;
            font-size:12px;
              -webkit-animation-name: bounceInDown;
                  animation-name: bounceInDown;
}
        span.eddyeowna a{
            color:#fff;
            text-transform:uppercase;
            text-decoration:none;
            margin-right:30px;
}
        span.eddyeowna a:hover{
            color:#000;
}
                  </style>
  <body class="cbp-spmenu-push">
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Fórum</h3>
                  <a href="/forum">Acessar</a>
                  <a href="/login">Logar</a>
                  <a href="/register">Registrar-se</a>
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores</h3>
        <a href="samp://editavel">SA-MP</a>
    
      </nav>
      <div class="container">
        <header class="clearfix">
            <span class="animated BounceInUp">BEM-VINDO AO FÓRUM DO SERVIDOR TATU DM</span>
        </header>
        <div class="main">
            <section class="buttonset">
                                  <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
              <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
              <button id="showLeftPush" class="animated bounceInUp">Fórum</button>
              <button id="showRightPush" class="animated bounceInDown">Servidores</button>
            </section>
        </div>
      </div>
            <span class="eddyeowna">
  
      <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
      <script src="http://asusgames.esy.es/CSS/classie.js"></script>
      <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            menuRight = document.getElementById( 'cbp-spmenu-s2' ),
            menuTop = document.getElementById( 'cbp-spmenu-s3' ),
            menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
            showLeft = document.getElementById( 'showLeft' ),
            showRight = document.getElementById( 'showRight' ),
            showTop = document.getElementById( 'showTop' ),
            showBottom = document.getElementById( 'showBottom' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            showRightPush = document.getElementById( 'showRightPush' ),
            body = document.body;
        showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };

        function disableOther( button ) {
            if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
            }
            if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
            }
            if( button !== 'showTop' ) {
              classie.toggle( showTop, 'disabled' );
            }
            if( button !== 'showBottom' ) {
              classie.toggle( showBottom, 'disabled' );
            }
            if( button !== 'showLeftPush' ) {
              classie.toggle( showLeftPush, 'disabled' );
            }
            if( button !== 'showRightPush' ) {
              classie.toggle( showRightPush, 'disabled' );
            }
        }
      </script>
          <div id="lixo">
      <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language=JavaScript>
<!--
var mensagem="";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
  <script language="JavaScript">
    function protegercodigo() {
    if (event.button==2||event.button==3){
    }
    document.onmousedown=protegercodigo
</script>
  </body>
</html>

Eu gostaria de uma pagina inicial tipo essa:


Mais com o tema do natal, alguém pode mim ajuda?
PrisoN†BreaK
PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Página inicial para servidor de SA-MP

Mensagem por Hancki 01.12.15 19:53

Olá!

Pode ser mais específico relativamente às mudanças que deseja fazer para algo natalício?

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Página inicial para servidor de SA-MP

Mensagem por IsmaelS. 01.12.15 19:57

Boa noite!

Assim amigo?
Código:


<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Editavel</title>
      <meta name="description" content="Editavel" />
      <meta name="keywords" content="SA:MP - RPG" />
      <meta name="author" content="Codrops" />
      <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
                <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
      <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
  </head>
<style>
  /* General styles for all menus */
.cbp-spmenu {
  background: #163c52;
  position: fixed;
}

.cbp-spmenu h3 {
  color: #afdefa;
  font-size: 1.9em;
  padding: 20px;
  margin: 0;
  font-weight: 300;
  background: #0d77b6;
}

.cbp-spmenu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
}

.cbp-spmenu a:hover {
  background: #1c5f85;
}

.cbp-spmenu a:active {
  background: #afdefa;
  color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.cbp-spmenu-vertical a {
  border-bottom: 1px solid #1c5f85;
  padding: 1em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
  width: 100%;
  height: 150px;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
  height: 100%;
  width: 20%;
  float: left;
}

.cbp-spmenu-horizontal a {
  float: left;
  width: 20%;
  padding: 0.8em;
  border-left: 1px solid #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
  left: -240px;
}

.cbp-spmenu-right {
  right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
  left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
  right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
  top: -150px;
}

.cbp-spmenu-bottom {
  bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
  top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
  bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.cbp-spmenu-push-toright {
  left: 240px;
}

.cbp-spmenu-push-toleft {
  left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

  .cbp-spmenu-horizontal {
      font-size: 75%;
      height: 110px;
  }

  .cbp-spmenu-top {
      top: -110px;
  }

  .cbp-spmenu-bottom {
      bottom: -110px;
  }

}

@media screen and (max-height: 26.375em){

  .cbp-spmenu-vertical {
      font-size: 90%;
      width: 190px;
  }

  .cbp-spmenu-left,
  .cbp-spmenu-push-toleft {
      left: -190px;
  }

  .cbp-spmenu-right {
      right: -190px;
  }

  .cbp-spmenu-push-toright {
      left: 190px;
  }
}
  /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
  font-family: 'fontawesome';
  src:url('../fonts/fontawesome.eot');
  src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
      url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
      url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
#lixo {
display:none;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #0f354b;
    background: #273749 url("http://7-themes.com/data_images/out/7/6791475-free-christmas-wallpaper.jpg") top no-repeat;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}


.main,
.container > header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
  padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0;
  float: left;
  font-weight: 400;
}

.container > header span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container > header nav {
  float: right;
}

.container > header nav a {
  display: block;
  float: left;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  color: transparent;
  margin: 0 0.1em;
  border: 4px solid #0f354b;
  text-indent: -8000px;
}

.container > header nav a:after {
  content: attr(data-info);
  color: #0f354b;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.container > header nav a:hover:after {
  opacity: 1;
}

.container > header nav a:hover {
  background: #0f354b;
}

.main > section {
  max-width: 260px;
  width: 90%;
  margin: 0 auto;
}

.main > section h2 {
  font-weight: 300;
  color: #ccc;
}

.main > section button {
  border: none;
  background: #0f354b;
  color: #fff;
  padding: 1.5em;
  display: block;
  width: 100%;
  cursor: pointer;
  margin: 10px 0;
  font-size: 0.8em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
  background: #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
  background: #0d77b6;
}

.main > section button.disabled {
  background: #aaa;
  pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
  font-family: 'fontawesome';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  color: #0f354b;
  -webkit-font-smoothing: antialiased;
  text-indent: 8000px;
  padding-left: 8px;
}

.container > header nav a:hover:before {
  color: #fff;
}

.icon-drop:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\f060";
}
span.eddyeowna{
            background: #0f354b;
                                position:fixed;
            right:0px;
            bottom:30px;
            font-size:12px;
              -webkit-animation-name: bounceInDown;
                  animation-name: bounceInDown;
}
        span.eddyeowna a{
            color:#fff;
            text-transform:uppercase;
            text-decoration:none;
            margin-right:30px;
}
        span.eddyeowna a:hover{
            color:#000;
}
                  </style>
  <body class="cbp-spmenu-push">
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Fórum</h3>
                  <a href="/forum">Acessar</a>
                  <a href="/login">Logar</a>
                  <a href="/register">Registrar-se</a>
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores</h3>
        <a href="samp://editavel">SA-MP</a>
   
      </nav>
      <div class="container">
        <header class="clearfix">
            <span class="animated BounceInUp">BEM-VINDO AO FÓRUM DO SERVIDOR TATU DM</span>
        </header>
        <div class="main">
            <section class="buttonset">
                                  <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
              <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
              <button id="showLeftPush" class="animated bounceInUp">Fórum</button>
              <button id="showRightPush" class="animated bounceInDown">Servidores</button>
            </section>
        </div>
      </div>
            <span class="eddyeowna">
 
      <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
      <script src="http://asusgames.esy.es/CSS/classie.js"></script>
      <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            menuRight = document.getElementById( 'cbp-spmenu-s2' ),
            menuTop = document.getElementById( 'cbp-spmenu-s3' ),
            menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
            showLeft = document.getElementById( 'showLeft' ),
            showRight = document.getElementById( 'showRight' ),
            showTop = document.getElementById( 'showTop' ),
            showBottom = document.getElementById( 'showBottom' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            showRightPush = document.getElementById( 'showRightPush' ),
            body = document.body;
        showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };

        function disableOther( button ) {
            if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
            }
            if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
            }
            if( button !== 'showTop' ) {
              classie.toggle( showTop, 'disabled' );
            }
            if( button !== 'showBottom' ) {
              classie.toggle( showBottom, 'disabled' );
            }
            if( button !== 'showLeftPush' ) {
              classie.toggle( showLeftPush, 'disabled' );
            }
            if( button !== 'showRightPush' ) {
              classie.toggle( showRightPush, 'disabled' );
            }
        }
      </script>

          <div id="lixo">
      <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language=JavaScript>
<!--
var mensagem="";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
  <script language="JavaScript">
    function protegercodigo() {
    if (event.button==2||event.button==3){
    }
    document.onmousedown=protegercodigo
</script>
  </body>
</html>
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Página inicial para servidor de SA-MP

Mensagem por PrisoN†BreaK 02.12.15 13:54

IsmaelS. escreveu:Boa noite!

Assim amigo?
Código:


<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Editavel</title>
      <meta name="description" content="Editavel" />
      <meta name="keywords" content="SA:MP - RPG" />
      <meta name="author" content="Codrops" />
      <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
                <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
      <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
  </head>
<style>
  /* General styles for all menus */
.cbp-spmenu {
  background: #163c52;
  position: fixed;
}

.cbp-spmenu h3 {
  color: #afdefa;
  font-size: 1.9em;
  padding: 20px;
  margin: 0;
  font-weight: 300;
  background: #0d77b6;
}

.cbp-spmenu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
}

.cbp-spmenu a:hover {
  background: #1c5f85;
}

.cbp-spmenu a:active {
  background: #afdefa;
  color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.cbp-spmenu-vertical a {
  border-bottom: 1px solid #1c5f85;
  padding: 1em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
  width: 100%;
  height: 150px;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
  height: 100%;
  width: 20%;
  float: left;
}

.cbp-spmenu-horizontal a {
  float: left;
  width: 20%;
  padding: 0.8em;
  border-left: 1px solid #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
  left: -240px;
}

.cbp-spmenu-right {
  right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
  left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
  right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
  top: -150px;
}

.cbp-spmenu-bottom {
  bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
  top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
  bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.cbp-spmenu-push-toright {
  left: 240px;
}

.cbp-spmenu-push-toleft {
  left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

  .cbp-spmenu-horizontal {
      font-size: 75%;
      height: 110px;
  }

  .cbp-spmenu-top {
      top: -110px;
  }

  .cbp-spmenu-bottom {
      bottom: -110px;
  }

}

@media screen and (max-height: 26.375em){

  .cbp-spmenu-vertical {
      font-size: 90%;
      width: 190px;
  }

  .cbp-spmenu-left,
  .cbp-spmenu-push-toleft {
      left: -190px;
  }

  .cbp-spmenu-right {
      right: -190px;
  }

  .cbp-spmenu-push-toright {
      left: 190px;
  }
}
  /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
  font-family: 'fontawesome';
  src:url('../fonts/fontawesome.eot');
  src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
      url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
      url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
#lixo {
display:none;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #0f354b;
    background: #273749 url("http://7-themes.com/data_images/out/7/6791475-free-christmas-wallpaper.jpg") top no-repeat;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}


.main,
.container > header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
  padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0;
  float: left;
  font-weight: 400;
}

.container > header span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container > header nav {
  float: right;
}

.container > header nav a {
  display: block;
  float: left;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  color: transparent;
  margin: 0 0.1em;
  border: 4px solid #0f354b;
  text-indent: -8000px;
}

.container > header nav a:after {
  content: attr(data-info);
  color: #0f354b;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.container > header nav a:hover:after {
  opacity: 1;
}

.container > header nav a:hover {
  background: #0f354b;
}

.main > section {
  max-width: 260px;
  width: 90%;
  margin: 0 auto;
}

.main > section h2 {
  font-weight: 300;
  color: #ccc;
}

.main > section button {
  border: none;
  background: #0f354b;
  color: #fff;
  padding: 1.5em;
  display: block;
  width: 100%;
  cursor: pointer;
  margin: 10px 0;
  font-size: 0.8em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
  background: #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
  background: #0d77b6;
}

.main > section button.disabled {
  background: #aaa;
  pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
  font-family: 'fontawesome';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  color: #0f354b;
  -webkit-font-smoothing: antialiased;
  text-indent: 8000px;
  padding-left: 8px;
}

.container > header nav a:hover:before {
  color: #fff;
}

.icon-drop:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\f060";
}
span.eddyeowna{
            background: #0f354b;
                                position:fixed;
            right:0px;
            bottom:30px;
            font-size:12px;
              -webkit-animation-name: bounceInDown;
                  animation-name: bounceInDown;
}
        span.eddyeowna a{
            color:#fff;
            text-transform:uppercase;
            text-decoration:none;
            margin-right:30px;
}
        span.eddyeowna a:hover{
            color:#000;
}
                  </style>
  <body class="cbp-spmenu-push">
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Fórum</h3>
                  <a href="/forum">Acessar</a>
                  <a href="/login">Logar</a>
                  <a href="/register">Registrar-se</a>
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores</h3>
        <a href="samp://editavel">SA-MP</a>
    
      </nav>
      <div class="container">
        <header class="clearfix">
            <span class="animated BounceInUp">BEM-VINDO AO FÓRUM DO SERVIDOR TATU DM</span>
        </header>
        <div class="main">
            <section class="buttonset">
                                  <center><h2><span class="animated BounceInUp">ACESSO RÁPIDO</span></h2></center>
              <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
              <button id="showLeftPush" class="animated bounceInUp">Fórum</button>
              <button id="showRightPush" class="animated bounceInDown">Servidores</button>
            </section>
        </div>
      </div>
            <span class="eddyeowna">
  
      <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
      <script src="http://asusgames.esy.es/CSS/classie.js"></script>
      <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            menuRight = document.getElementById( 'cbp-spmenu-s2' ),
            menuTop = document.getElementById( 'cbp-spmenu-s3' ),
            menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
            showLeft = document.getElementById( 'showLeft' ),
            showRight = document.getElementById( 'showRight' ),
            showTop = document.getElementById( 'showTop' ),
            showBottom = document.getElementById( 'showBottom' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            showRightPush = document.getElementById( 'showRightPush' ),
            body = document.body;
        showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };

        function disableOther( button ) {
            if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
            }
            if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
            }
            if( button !== 'showTop' ) {
              classie.toggle( showTop, 'disabled' );
            }
            if( button !== 'showBottom' ) {
              classie.toggle( showBottom, 'disabled' );
            }
            if( button !== 'showLeftPush' ) {
              classie.toggle( showLeftPush, 'disabled' );
            }
            if( button !== 'showRightPush' ) {
              classie.toggle( showRightPush, 'disabled' );
            }
        }
      </script>

          <div id="lixo">
      <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language=JavaScript>
<!--
var mensagem="";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
  <script language="JavaScript">
    function protegercodigo() {
    if (event.button==2||event.button==3){
    }
    document.onmousedown=protegercodigo
</script>
  </body>
</html>
Sim exatamente assim, mais eu gostaria com outra imagem, outros botões, caindo flocos de neve, e tocando uma musica natalina, tem como? Vi isso em outro fórum no ano passado, mais eles já tiraram.
PrisoN†BreaK
PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Página inicial para servidor de SA-MP

Mensagem por IsmaelS. 02.12.15 18:14

Boa tarde!

Tentei algo:
Código:
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Editavel</title>
      <meta name="description" content="Editavel" />
      <meta name="keywords" content="SA:MP - RPG" />
      <meta name="author" content="Codrops" />
      <link rel="shortcut icon" href="http://asusgames.esy.es/cloud.ico">
                <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen"/>
      <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
  </head>
<style>
  /* General styles for all menus */
.cbp-spmenu {
  background: #7E3830;
  position: fixed;
}

.cbp-spmenu h3 {
    color: #FFFFFF;
    font-size: 1.9em;
    padding: 20px;
    margin: 0;
    font-weight: 300;
    background: rgba(212, 53, 21, 0.55);
}
 
.cbp-spmenu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
}

.cbp-spmenu a:hover {
  background: #1c5f85;
}

.cbp-spmenu a:active {
  background: #afdefa;
  color: #0f354b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.cbp-spmenu-vertical a {
  border-bottom: 1px solid rgb(255, 255, 255);
  padding: 1em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
  width: 100%;
  height: 150px;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
  height: 100%;
  width: 20%;
  float: left;
}

.cbp-spmenu-horizontal a {
  float: left;
  width: 20%;
  padding: 0.8em;
  border-left: 1px solid #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
  left: -240px;
}

.cbp-spmenu-right {
  right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
  left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
  right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
  top: -150px;
}

.cbp-spmenu-bottom {
  bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
  top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
  bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.cbp-spmenu-push-toright {
  left: 240px;
}

.cbp-spmenu-push-toleft {
  left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

  .cbp-spmenu-horizontal {
      font-size: 75%;
      height: 110px;
  }

  .cbp-spmenu-top {
      top: -110px;
  }

  .cbp-spmenu-bottom {
      bottom: -110px;
  }

}

@media screen and (max-height: 26.375em){

  .cbp-spmenu-vertical {
      font-size: 90%;
      width: 190px;
  }

  .cbp-spmenu-left,
  .cbp-spmenu-push-toleft {
      left: -190px;
  }

  .cbp-spmenu-right {
      right: -190px;
  }

  .cbp-spmenu-push-toright {
      left: 190px;
  }
}
  /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
  font-family: 'fontawesome';
  src:url('../fonts/fontawesome.eot');
  src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
      url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
      url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
#lixo {
display:none;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #0f354b;
    background: #273749 url("http://www.hdwallpaperscool.com/wp-content/uploads/2013/12/animated-christmas-hd-wallpapers-cool-desktop-images-widescreen.jpg") top no-repeat;
}

a {
  color: #f0f0f0;
  text-decoration: none;
}


.main,
.container > header {
  width: 90%;
    max-width: 47em;
    margin: 61px auto;
    padding: 0 1.875em 6.125em 3.875em;
}
.container > header {
  padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0;
  float: left;
  font-weight: 400;
}

.container > header span {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container > header nav {
  float: right;
}

.container > header nav a {
  display: block;
  float: left;
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  color: transparent;
  margin: 0 0.1em;
  border: 4px solid #0f354b;
  text-indent: -8000px;
}

.container > header nav a:after {
  content: attr(data-info);
  color: #0f354b;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.container > header nav a:hover:after {
  opacity: 1;
}

.container > header nav a:hover {
  background: #0f354b;
}

.main > section {
  max-width: 260px;
  width: 90%;
  margin: 0 auto;
}

.main > section h2 {
  color: #ccc;
}

.main > section button {
  border: none;
  background: #7E3830;
  color: #fff;
  padding: 1.5em;
  display: block;
  width: 100%;
  cursor: pointer;
  margin: 10px 0;
  font-size: 0.8em;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
  background: #1c5f85;
    -webkit-transition:background 0.5s ease-out;
      -moz-transition:background 0.5s ease-out;
      -o-transition:background 0.5s ease-out;
      -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
  background: #0d77b6;
}

.main > section button.disabled {
  background: #aaa;
  pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
  font-family: 'fontawesome';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  color: #0f354b;
  -webkit-font-smoothing: antialiased;
  text-indent: 8000px;
  padding-left: 8px;
}

.container > header nav a:hover:before {
  color: #fff;
}

.icon-drop:before {
  content: "\e000";
}

.icon-arrow-left:before {
  content: "\f060";
}
span.eddyeowna{
            background: #0f354b;
                                position:fixed;
            right:0px;
            bottom:30px;
            font-size:12px;
              -webkit-animation-name: bounceInDown;
                  animation-name: bounceInDown;
}
        span.eddyeowna a{
            color:#fff;
            text-transform:uppercase;
            text-decoration:none;
            margin-right:30px;
}
        span.eddyeowna a:hover{
            color:#000;
}
                  </style>
  <body class="cbp-spmenu-push">
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>Fórum</h3>
                  <a href="/forum">Acessar</a>
                  <a href="/login">Logar</a>
                  <a href="/register">Registrar-se</a>
      </nav>
      <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Servidores</h3>
        <a href="samp://editavel">SA-MP</a>
   
      </nav>
      <div class="container">
        <header class="clearfix">
            <span><span style="color: #FF2020;">BEM-VINDO AO FÓRUM DO SERVIDOR TATU DM</span></span>
        </header>
        <div class="main">
            <section class="buttonset">
                                  <center><h2><span class=""><span style="color: #FF2020;">ACESSO RÁPIDO</span></span></h2></center>
              <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
              <button id="showLeftPush" class="animated bounceInUp">Fórum</button>
              <button id="showRightPush" class="animated bounceInDown">Servidores</button>
            </section>
        </div>
      </div>
            <span class="eddyeowna">
 
      <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
      <script src="http://asusgames.esy.es/CSS/classie.js"></script>
      <script>

       
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            menuRight = document.getElementById( 'cbp-spmenu-s2' ),
            menuTop = document.getElementById( 'cbp-spmenu-s3' ),
            menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
            showLeft = document.getElementById( 'showLeft' ),
            showRight = document.getElementById( 'showRight' ),
            showTop = document.getElementById( 'showTop' ),
            showBottom = document.getElementById( 'showBottom' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            showRightPush = document.getElementById( 'showRightPush' ),
            body = document.body;
        showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };

        function disableOther( button ) {
            if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
            }
            if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
            }
            if( button !== 'showTop' ) {
              classie.toggle( showTop, 'disabled' );
            }
            if( button !== 'showBottom' ) {
              classie.toggle( showBottom, 'disabled' );
            }
            if( button !== 'showLeftPush' ) {
              classie.toggle( showLeftPush, 'disabled' );
            }
            if( button !== 'showRightPush' ) {
              classie.toggle( showRightPush, 'disabled' );
            }
        }
      </script>

          <div id="lixo">
      <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language=JavaScript>
<!--
var mensagem="";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
  <script language="JavaScript">
    function protegercodigo() {
    if (event.button==2||event.button==3){
    }
    document.onmousedown=protegercodigo
</script>
  </body>
</html>

Caso prefira outro fundo de imagem apenas encontre este link (http://www.hdwallpaperscool.com/wp-content/uploads/2013/12/animated-christmas-hd-wallpapers-cool-desktop-images-widescreen.jpg) e altere para a que desejar, enquanto aos flocos de neve não consegui tal.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Página inicial para servidor de SA-MP

Mensagem por PrisoN†BreaK 03.12.15 12:53

Ok, mesmo assim obrigado pela ajuda, pode marca o tópico como resolvido e fecha-lo.
PrisoN†BreaK
PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Página inicial para servidor de SA-MP

Mensagem por MateusAnjosV 06.12.15 15:56

Página inicial para servidor de SA-MP Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
MateusAnjosV
MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos