Como faço uma página assim?

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como faço uma página assim?

Mensagem por Pattricia em 22/07/15, 07:03 pm

Olá!
Vi no fórum http://www.wasd.in/ esta página e gostaria de saber como fazê-la:



Sei que é em HTML, queria colocar como página inicial.


Última edição por Pattricia em 22/07/15, 08:00 pm, editado 1 vez(es)
avatar

Pattricia
Nível 9

Feminino
Inscrito dia : 23/01/2014
Mensagens : 161
Pontos Ativos : 226

Ver perfil do usuário http://winxclubfairies.forumeiros.com/

Resolvido Re: Como faço uma página assim?

Mensagem por Fraise em 22/07/15, 07:04 pm

Olá!

Aqui está o código da página:
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Ac4JIGg.png" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,500,700,400italic,500italic,700italic" />
<title>WASD Fórum</title>
</head>
<style>
@charset "iso-8859-1";
/* Documento CSS por Je4n */
/* É proibida a cópia total ou parcial deste Layout.  */
/* Background por GraphicBurge */
/* Acesse www.wasd.in & www.je4n.wasd.in */


* {
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
*::selection {
background: #0DC5FF none repeat scroll 0 0;
color: #FFFFFF;
}
 *::-moz-selection {
background: #0DC5FF none repeat scroll 0 0;
color: #FFFFFF;
}
a, a:visited, a:hover, a:active {
   text-decoration: none;
}
a:hover {
   border-bottom: none;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
}
html, body {
   background-color: #085a78;
   background-image: url(http://i.imgur.com/O3qorj3.jpg);
   background-size: 100% 100%;
   font-family: Tahoma;
   color: #FFF;
   margin: 0;
   position: relative;
   overflow: auto;
   font-size: 11px;
}
.container {
   margin-left: auto;
   margin-right: auto;
   width: 830px;
}
#topo {
   background: rgba(0, 0, 0, 0.5); /* Opção 2 */
   background: #1c1f25;
   width: 100%;
   height: 55px;
   line-height: 55px;
   -khtml-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   border-bottom: 3px solid #0DC5FF;
}
.logo {
   background-color: #0DC5FF;
   cursor: pointer;
   float: left;
   width: auto;
   height: 45px;
   line-height: 45px;
   padding-left: 10px;
   padding-right: 10px;
   margin-top: -53px;
   background-repeat: no-repeat;
   z-index: 100;
   font-family: Ubuntu;
   font-size: 13px;
   color: #FFF;
   text-transform: uppercase;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   font-weight: bold;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
}
.logo:hover {
   background-color: #08A9DB;
}
.posi-meio {
   margin-top: 55px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: Ubuntu;
   font-weight: 500;
   line-height: 1.1;
   color: #FFF;
}
h1 {
   color: #fff;
   font-size: 42px;
   text-shadow: rgba(0, 0, 0, .4) 0 1px 1px;
   letter-spacing: 4px;
   font-weight: bold;
   line-height: 0px;
}
h2 {
   color: #FFF;
   font-size: 22px;
   text-shadow: rgba(0, 0, 0, .4) 0 1px 1px;
}
.botao-entrar {
   background-color: transparent;
   border: 1px solid #FFFFFF;
   cursor: pointer;
   float: left;
   width: auto;
   height: 45px;
   line-height: 45px;
   padding-left: 10px;
   padding-right: 10px;
   margin-right: 8px;
   z-index: 100;
   font-family: Ubuntu;
   color: #fff;
   font-size: 13px;
   text-transform: uppercase;
   text-shadow: none;
   font-weight: bold;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
.botao-entrar:hover {
   color: #0DC5FF;
   border: 1px solid #0DC5FF;
}
.botao-entrar.vermelho {
   background-color: transparent;
   border: 1px solid #FFF;
}
.botao-entrar.vermelho:hover {
   color: #FF0D0D;
   border: 1px solid #FF0D0D;
}
.botao-entrar a {
   text-decoration: none;
   outline-style: none;
   color:inherit;
}
.botao-entrar a:hover {
   text-decoration: none;
   outline-style: none;
   color:inherit;
}
#facebook-wasd {
   background: url(http://i.imgur.com/SQ6JqvU.png);
   background-position: left top;
   width: 30px;
   height: 30px;
   z-index: 100;
   cursor: pointer;
   float: right;
   margin-top: -46px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
}
#facebook-wasd:hover {
   background-position: left bottom;
}
footer {
   background: rgba(0, 0, 0, 0.5); /* Opção 2 */
   background: #1c1f25;
   text-shadow: 0 1px 0 #272727;
   color: #FFFFFF;
   position: absolute;
   bottom: 0;
   float: left;
   font-family: Ubuntu;
   font-weight: bold;
   font-size: 12px;
   width: 100%;
   height: 55px;
   line-height: 55px;
   -khtml-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px;
   border-top: 3px solid #0DC5FF;
}
</style>
<body>
<div id="topo"></div>
<div class="container">
  <div class="logo">WASD Fórum</div>
  <div style="float: right;"><a id="facebook-wasd" href="https://www.facebook.com/wasdforum" target="_blank"></a></div>
</div>
<div class="container">
  <div class="posi-meio">
    <h1>Bem-vindo ao WASD.in!</h1>
    <h2>O <strong>WASD Fórum</strong> é um ambiente virtual feito com o intuito de compartilhar ideias e disponibilizar conteúdos de diversas áreas, sendo assim um Fórum bem democrático no que diz respeito aos Direitos Humanos. A principal finalidade do fórum é coletar e compartilhar dados, visando espalhar o conhecimento para todos aqueles que desejam obter de forma legal, ressaltando que não trabalhamos com pirataria nem afins. Nosso fórum disponibiliza vários conteúdos dos mais simples aos mais complexos sem fins lucrativos. Todos os membros do fórum em si tem como foco mostrar que é possível compartilhar um conteúdo bom e de graça. <em>Nem tudo que é bom precisa ser necessariamente pago. Enjoy.</em><br>
      <br>
      O Maior trabalho  existente é aquele que você faz capitalmente de graça mas mesmo assim ganha muito com ele. Ganha consideração, reconhecimento, até mesmo um sorriso.. e não há dinheiro no mundo que pague por isso. </h2>
  </div>
  <a class="botao-entrar" href="http://www.wasd.in/forum">Ir para o Fórum</a> <a class="botao-entrar vermelho" href="http://www.google.com.br">Sair daqui</a> </div>
<footer>
  <div class="container"> Layout desenvolvido por Je4n.
    <div style="float: right;">É proibida a cópia total ou parcial deste Layout. Fórum hospedado pela comunidade <a href="http://www.forumeiros.com" target="_blank"><font color="#FFFFFF">forumeiros.com</font></a></div>
  </div>
</footer>
</body>
</html>

Use no seu próprio risco, pois como pode ver no footer da página não é permitida a cópia. Piscada

Cumprimentos.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5034
Pontos Ativos : 6714

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Como faço uma página assim?

Mensagem por Pattricia em 22/07/15, 08:00 pm

Resolvido Muito feliz
avatar

Pattricia
Nível 9

Feminino
Inscrito dia : 23/01/2014
Mensagens : 161
Pontos Ativos : 226

Ver perfil do usuário http://winxclubfairies.forumeiros.com/

Resolvido Re: Como faço uma página assim?

Mensagem por Fraise em 22/07/15, 08:12 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5034
Pontos Ativos : 6714

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum