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:

Como faço uma página assim? 5kowaq

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

por **Fraise** 22.07.15 23:04

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>