InícioComo faço uma página assim?
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Como faço uma página assim?
por Pattricia 22.07.15 23:03
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.
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 23.07.15 0:00, editado 1 vez(es)
Pattricia- ***
- Membro desde : 23/01/2014
Mensagens : 161
Pontos : 226 -
Re: Como faço uma página assim?
por Fraise 22.07.15 23:04
Olá!
Aqui está o código da página:
Use no seu próprio risco, pois como pode ver no footer da página não é permitida a cópia.
Cumprimentos.
Fraise
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.
Cumprimentos.
Fraise
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045 -
Pattricia- ***
- Membro desde : 23/01/2014
Mensagens : 161
Pontos : 226 -
Re: Como faço uma página assim?
por Fraise 23.07.15 0:12
| Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045 -
Tópicos semelhantes» Como faço um chatbox assim?
» Como ir em outra página assim...
» Como criar uma página assim?
» Como faço para deixar os tópicos assim
» Como criar uma página HTML assim
» Como ir em outra página assim...
» Como criar uma página assim?
» Como faço para deixar os tópicos assim
» Como criar uma página HTML assim
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
