GameZer Online


Você não está conectado. Conecte-se ou registre-se

GameZer Online » Programação » Recursos » Página HTML [Medio]

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

1Página HTML [Medio] Empty Página HTML [Medio] Qua Fev 13, 2013 8:06 am

rck

rck

É uma pagina html cinza escuro, que eu fiz para vocês. Espero que gostem. Razz

Código:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Página HTML</title>
</head>
<style> 
  body {
    color: #fff;
    background-color: #000;
    font-family: Segoe UI;
    font-size: 12px;
    margin-left: 0px;
    margin-right: 0px;
    background-image:url('http://fc09.deviantart.net/fs70/f/2011/127/4/d/black_wood_background_by_egosumpotens-d3fst0k.jpg'); background-attachment:fixed;
background-position:center;
    min-width: 1024px;
  }

a {
color: #fff;
text-decoration:none;
}
 
  #menu {
    border:2px solid #444;
    width: 500px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#292929', endColorstr = '222222');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#292929', endColorstr = '#222222')";
background-image: -moz-linear-gradient(top, #292929, #222222);
background-image: -ms-linear-gradient(top, #292929, #222222);
background-image: -o-linear-gradient(top, #292929, #222222);
background-image: -webkit-linear-gradient(top, #292929, #222222);
background-image: linear-gradient(top, #292929, #222222);
    font-size: 25px;
    border-radius: 5px;
 margin: 0 auto;
    margin-top: 10px;
  }
  #creditos {
    border-top:2px solid #444;
  background-color: #000;
  position: fixed;
  bottom: 0px;
    width: 100%;
    opacity: .6;
  }
  #conteudo {
    border:2px solid #444;
    border-radius: 5px;
    background-color: #222;
    width: 70%;
    margin-top: 10px;
    margin-bottom: 20px;
    float: left;
    margin-left: 6px;
    margin-right: 10px;
  }
    #modulo {
      border:2px solid #333;
margin-top: 10px;
    border-radius: 5px;
    background-color: #1f1f1f;
    width: 27%;
    float: left;
  }
.margem {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
  span.opcao {
    color: #bababa;
    padding-left: 8px;
    padding-right: 8px;
  }
  span.opcao:hover {
    color: #fff;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#2e2e2e', endColorstr = '#424242');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#2e2e2e', endColorstr = '#424242')";
background-image: -moz-linear-gradient(top, #2e2e2e, #424242);
background-image: -ms-linear-gradient(top, #2e2e2e, #424242);
background-image: -o-linear-gradient(top, #2e2e2e, #424242);
background-image: -webkit-linear-gradient(top, #2e2e2e, #424242);
background-image: linear-gradient(top, #2e2e2e, #424242);
  }
  #superior {
    font-size: 45px;
  }
  </style>
<body>

<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
  <div id="creditos"><center>Pagina feita por rck. Agradecimentos ao Firenando e ao Google pelo apoio, e a <a href="http://www.forumeiros.com">forumeiros</a> por hospedar esta pagina gratuitamente</center></div>
<!-- Considere-se avisado-->

 
  <div id="superior"><center>Nome ou banner do fórum</center></div>
 
  <div id="menu"><center>
    <a href=/forum><span class="opcao">Início</span></a>
    <a href=/portal><span class="opcao">Portal</span></a>
    <a href=/t1-><span class="opcao">Regras</span></a>
    <a href="/login"><span class="opcao">Login</span></a>
    <a href="/register"><span class="opcao">Registrar</span></a></center>
  </div>
  <div id="conteudo">
    <div class="margem">
   
    <h1><center>Sejam bem-vindos ao nosso fórum.</center></h1>Agradecemos pela sua preferência ao escolher um conteúdo de boa qualidade.<br><br>
      <h2>Regras:</h2>
      <b>É proibido:</b><br>
      -Floodar<br>
      -Desrespeitar<br>
      -Mandar vírus<br>
      -Se passar por moderador<br>
-Falar de Restart<br>
-Matar<br>
    Que se dane, vou só pular linhas.<br>-<br>-<br>-<br>-<br>-<br>-<br><hr><br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>-
    </div></div>
 
    <div id="modulo"><div class="margem">
      <h1><center>Parceiros</center></h1><hr><center><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /></center>
    </div></div>

  <div id="modulo"><div class="margem">
      <h1><center>Membro do mês</center></h1><hr>
<center><img src="http://www.tresd1.com.br/img/sem-avatar.jpg"><br>Fulano de tal</center>

</div>  </div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>
  </body>
</html>

Previo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]



Última edição por rck em Qua Fev 20, 2013 4:58 pm, editado 1 vez(es)

2Página HTML [Medio] Empty Re: Página HTML [Medio] Qua Fev 13, 2013 8:26 am

Admin

Admin

Ficou bem legal, gostei. xD

3Página HTML [Medio] Empty Re: Página HTML [Medio] Qua Fev 13, 2013 10:51 am

Jose Hamizaki

Jose Hamizaki
Ficou legal, parabens.

4Página HTML [Medio] Empty Re: Página HTML [Medio] Qua Fev 13, 2013 2:30 pm

rck

rck

Lancei outro modelo de pagina para quem prefere o menu e o logo na mesma linha, excelente para destacar conteudo.

A largura minima do corpo aumenta de 1024px para 1100px, diferença que só é percebida por quem utiliza celular ou computador antigo de baixa resolução.

Previo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Código:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Página HTML</title>
</head>
<style> 
  body {
    color: #fff;
    background-color: #000;
    font-family: Segoe UI;
    font-size: 12px;
    margin-left: 0px;
    margin-right: 0px;
    background-image:url('http://fc09.deviantart.net/fs70/f/2011/127/4/d/black_wood_background_by_egosumpotens-d3fst0k.jpg'); background-attachment:fixed;
background-position:center;
    min-width: 1100px;
  }

a {
color: #fff;
text-decoration:none;
}
 
  #menu {
    border:2px solid #444;
    width: 500px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#292929', endColorstr = '222222');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#292929', endColorstr = '#222222')";
background-image: -moz-linear-gradient(top, #292929, #222222);
background-image: -ms-linear-gradient(top, #292929, #222222);
background-image: -o-linear-gradient(top, #292929, #222222);
background-image: -webkit-linear-gradient(top, #292929, #222222);
background-image: linear-gradient(top, #292929, #222222);
    font-size: 25px;
    border-radius: 5px;
    margin-right: 30px;
    margin-top: 10px;
    float:right;
  }
  #creditos {
    border-top:2px solid #444;
  background-color: #000;
  position: fixed;
  bottom: 0px;
    width: 100%;
    opacity: .6;
  }
  #conteudo {
    border:2px solid #444;
    border-radius: 5px;
    background-color: #222;
    width: 70%;
    margin-top: 10px;
    margin-bottom: 20px;
    float: left;
    margin-left: 6px;
    margin-right: 10px;
  }
    #modulo {
      border:2px solid #333;
margin-top: 10px;
    border-radius: 5px;
    background-color: #1f1f1f;
    width: 27%;
    float: left;
  }
.margem {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
  span.opcao {
    color: #bababa;
  padding-left: 8px;
    padding-right: 8px;
  }
  span.opcao:hover {
    color: #fff;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#2e2e2e', endColorstr = '#424242');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#2e2e2e', endColorstr = '#424242')";
background-image: -moz-linear-gradient(top, #2e2e2e, #424242);
background-image: -ms-linear-gradient(top, #2e2e2e, #424242);
background-image: -o-linear-gradient(top, #2e2e2e, #424242);
background-image: -webkit-linear-gradient(top, #2e2e2e, #424242);
background-image: linear-gradient(top, #2e2e2e, #424242);
  }
  #superior {
    font-size: 45px;
    float:left;
    margin-left: 20px;
  }
  </style>
<body>

<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
<!-- Ao remover os creditos, voce pode ser processado judicialmente-->
  <div id="creditos"><center>Pagina feita por rck. Agradecimentos ao Firenando e ao Google pelo apoio, e a <a href="http://www.forumeiros.com">forumeiros</a> por hospedar esta pagina gratuitamente</center></div>
<!-- Considere-se avisado-->

 
  <div id="superior"><center>Nome ou banner do fórum</center></div>
 
  <div id="menu"><center>
    <a href=/forum><span class="opcao">Início</span></a>
    <a href=/portal><span class="opcao">Portal</span></a>
    <a href=/t1-><span class="opcao">Regras</span></a>
    <a href="/login"><span class="opcao">Login</span></a>
    <a href="/register"><span class="opcao">Registrar</span></a></center>
  </div>
  <div id="conteudo">
    <div class="margem">
   
    <h1><center>Sejam bem-vindos ao nosso fórum.</center></h1>Agradecemos pela sua preferência ao escolher um conteúdo de boa qualidade.<br><br>
      <h2>Regras:</h2>
      <b>É proibido:</b><br>
      -Floodar<br>
      -Desrespeitar<br>
      -Mandar vírus<br>
      -Se passar por moderador<br>
-Falar de Restart<br>
-Matar<br>
    Que se dane, vou só pular linhas.<br>-<br>-<br>-<br>-<br>-<br>-<br><hr><br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>--<br>-<br>-<br>-
    </div></div>
 
    <div id="modulo"><div class="margem">
      <h1><center>Parceiros</center></h1><hr><center><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /><img src="http://cybercerebro.com.br/wp-content/uploads/2012/03/seu-banner-aqui.gif" width="120px" height="60px" /></center>
    </div></div>

  <div id="modulo"><div class="margem">
      <h1><center>Membro do mês</center></h1><hr>
<center><img src="http://www.tresd1.com.br/img/sem-avatar.jpg"><br>Fulano de tal</center>

</div>  </div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>

    <div id="modulo"><div class="margem">
      <h1><center>Outro widget</center></h1><hr>Sem ideia melhor</div>
</div>
  </body>
</html>



Última edição por rck em Qua Fev 20, 2013 5:01 pm, editado 1 vez(es)

5Página HTML [Medio] Empty Re: Página HTML [Medio] Qua Fev 13, 2013 2:56 pm

Jose Hamizaki

Jose Hamizaki
Ola, muito bom, naquela parte preta debaixo de Seja Bem Vindo teria como por Noticias?

6Página HTML [Medio] Empty Re: Página HTML [Medio] Qua Fev 13, 2013 3:00 pm

rck

rck

Sim, basta editar a pagina html.

Claro que você tambem precisa ter um pouco de noção, se não vai fazer um estrago ou não vai conseguir editar.

7Página HTML [Medio] Empty Re: Página HTML [Medio] Sex Fev 15, 2013 3:49 pm

RafsEstevam

RafsEstevam
Programador
Programador
rck, a 2.0 ficou perfeita, se você colocasse cada aba do menu separada com cantos arredondados e um hover de preto para branco e o texto de branco para preto, ficaria 4EVER Perfect

8Página HTML [Medio] Empty Re: Página HTML [Medio] Sex Fev 15, 2013 3:51 pm

Admin

Admin

Eita, nem vi que teve a 2.0...

Obrigado por atualizar. xD

9Página HTML [Medio] Empty Re: Página HTML [Medio] Sáb Fev 16, 2013 6:49 am

A Fofa

A Fofa
Olá,

Adorei! Bom trabalho Very Happy

Até mais Wink

10Página HTML [Medio] Empty Re: Página HTML [Medio] Qua Fev 20, 2013 5:03 pm

rck

rck

Bug corrigido.


Ao invez de paddading eu usei espaço para dar uma pequena ajustada no layout, e isto não deu certo porque a forumeiros apagou os caracteres especiais para espaço. Desculpem o transtorno.

Agora vocês irão ter exatamente a pagina do previo.

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

GameZer Online » Programação » Recursos » Página HTML [Medio]

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