GameZer Online


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

GameZer Online » Programação » Recursos » Página html [Média]

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

1Página html [Média] Empty Página html [Média] Seg Dez 17, 2012 10:55 pm

rck

rck

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

Você gosta do visual do Windows 8 e gostaria de te-lo no seu fórum?

Hoje é o seu dia de sorte, pois eu trouxe a vocês uma página em html que imita o visual dele. Very Happy

Código:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Imitação Win 8</title>
<style type="text/css">
body {
background-color: #000;
background-image: url("http://www.wowwindows8.com/wp-content/uploads/2012/05/Windows-8-Wallpaper-Tile-Room-Blue_2.jpg");
bbackground-repeat: no-repeat;
background-position: center;
color: #fff
}
a {
color: #fff
}
#quadrados {
width: 1250px;
float: left;
}
.forum {
width: 300px;
height: 150px;
background-color: #bd1e4a;
background-image: url("http://i49.tinypic.com/2v0l9nk.png");
float: left;
}
.portal {
width: 300px;
height: 150px;
background-color: #001940;
float: left;
background-image: url("http://i45.tinypic.com/1231sec.png");
}
.login {
width: 300px;
height: 150px;
background-color: #009a00;
float: left;
background-image: url("http://i48.tinypic.com/243rnde.png");
}
.registrar {
width: 300px;
height: 150px;
background-color: #8f0098;
float: left;
background-image: url("http://i46.tinypic.com/52goas.png");
}
.categoria1 {
width: 150px;
height: 150px;
background-color: #8f0098;
float: left;
background-image: url("http://i48.tinypic.com/6ft8nb.png");
}
.categoria2 {
width: 150px;
height: 150px;
background-color: #d24726;
float: left;
background-image: url("http://i48.tinypic.com/6ft8nb.png");
}
.html1 {
width: 150px;
height: 150px;
background-color: #003a93;
float: left;
background-image: url("http://i50.tinypic.com/110vvqd.jpg");
}
.html2 {
width: 150px;
height: 150px;
background-color: #603cbb;
float: left;
background-image: url("http://i50.tinypic.com/110vvqd.jpg");
}
.html3 {
width: 150px;
height: 150px;
background-color: #bd1e4a;
float: left;
background-image: url("http://i50.tinypic.com/110vvqd.jpg");
}
.html4 {
width: 150px;
height: 150px;
background-color: #41010a;
float: left;
background-image: url("http://i50.tinypic.com/110vvqd.jpg");
}
.topico1 {
width: 150px;
height: 150px;
background-color: #000000;
float: left;
background-image: url("http://i46.tinypic.com/1zwj41j.png");
}
.topico2 {
width: 150px;
height: 150px;
background-color: #da532c;
float: left;
background-image: url("http://i46.tinypic.com/1zwj41j.png");
}
.categoria3 {
width: 150px;
height: 150px;
background-color: #00950e;
float: left;
background-image: url("http://i48.tinypic.com/6ft8nb.png");
}

.categoria4 {
width: 150px;
height: 150px;
background-color:#333333;
float: left;
background-image: url("http://i48.tinypic.com/6ft8nb.png");
}
.categoria5 {
width: 150px;
height: 150px;
background-color:#000;
float: left;
background-image: url("http://i48.tinypic.com/6ft8nb.png");
}
.subforum1 {
width: 150px;
height: 150px;
background-color:#001940;
float: left;
background-image: url("http://i50.tinypic.com/29uvz3k.png");
}
.subforum2 {
width: 150px;
height: 150px;
background-color:#d44a27;
float: left;
background-image: url("http://i50.tinypic.com/29uvz3k.png");
}
.subforum3 {
width: 150px;
height: 150px;
background-color:#009a00;
float: left;
background-image: url("http://i50.tinypic.com/29uvz3k.png");
}

#silidebaixo{
width: 100%;
left: 0px;
height: 30px;
bottom: 0px;
position: absolute;
opacity: 0.0;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5;
}
#silidebaixo:hover {
background-color: #000;
width: 100%;
left: 0px;
height: 30px;
bottom: 0px;
position: absolute;
opacity: 1.0!important;
transition-duration: 1s;
}
</style>
</head>
  <body>
    <div id="quadrados"><font size="60px" face="Segoe UI">Bem-vindo</font><br>
<font face="Segoe UI" size="1px"> 
<br><br><br><br><b>

<a href="/forum"><div class="forum"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Fórum</p></div></a>
<a href="/portal"><div class="portal"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Portal</p></div></a>
<a href="/login"><div class="login"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Login</p></div></a>
<a href="/register"><div class="registrar"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Registrar</p></div></a><br>
<a href=/c1-><div class="categoria1"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Categoria 1</p></div></a>
<a href=/c2-><div class="categoria2"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Categoria 2</p></div></a>
<a href=/h1-><div class="html1"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Página 1</p></div></a>
<a href=/h2-><div class="html2"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Página 2</p></div></a>
<a href=/h3-><div class="html3"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Página 3</p></div></a>
<a href=/h4-><div class="html4"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Página 4</p></div></a>
<a href=/t1-><div class="topico1"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Tópico 1</p></div></a>
<a href=/t2-><div class="topico2"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Tópico 2</p></div></a>
<a href=/c3-><div class="categoria3"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Caterogia 3</p></div></a>
<a href=/c4-><div class="categoria4"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Caterogia 4</p></div></a>
<a href=/c5-><div class="categoria5"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>Caterogia 5</p></div></a>
<a href=/f1-><div class="subforum1"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>subfórum 1</p></div></a> 
<a href=/f2-/c5-><div class="subforum2"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>subfórum 2</p></div></a>
<a href=/f3-/c5-><div class="subforum3"><p style="margin-left: 5px;"><br><br><br><br><br><br><br><br><br>subfórum 3</p></div></a>
</div></div></div>

<Script Language='Javascript'>
// Copyright ©️ 2011 - Equipe CrazzY - www.CrazzY.com.br
<!--
document.write(unescape('%20%20%20%20%3C%64%69%76%20%69%64%3D%22%73%69%6C%69%64%65%62%61%69%78%6F%22%3E%0A%45%73%74%61%20%70%E1%67%69%6E%61%20%66%6F%69%20%66%65%69%74%61%20%70%6F%72%20%75%6D%20%75%73%75%61%72%69%6F%20%64%6F%20%73%65%72%76%69%E7%6F%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%66%6F%72%75%6D%65%69%72%6F%73%2E%63%6F%6D%22%3E%66%6F%72%75%6D%65%69%72%6F%73%3C%2F%61%3E%20%63%68%61%6D%61%64%6F%20%72%63%6B%2E%3C%62%72%3E%56%69%73%69%74%65%6D%20%6F%20%73%69%74%65%20%64%6F%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%6C%65%73%70%6F%77%65%72%69%6E%66%6F%2E%66%6F%72%75%6D%65%69%72%6F%73%2E%63%6F%6D%2F%22%3E%72%63%6B%3C%2F%61%3E%2E%0A%3C%2F%64%69%76%3E'));
//-->
</Script>

</body></html>



Última edição por rck em Sáb Dez 22, 2012 1:05 am, editado 2 vez(es) (Motivo da edição : Update 2)

2Página html [Média] Empty Re: Página html [Média] Seg Dez 17, 2012 11:13 pm

Admin

Admin

Bom, poderia ter colocar um efeito de opacidade nas imagens...

3Página html [Média] Empty Re: Página html [Média] Ter Dez 18, 2012 3:11 am

A Fofa

A Fofa
Bonitinha Very Happy
Mas por agora vou usar outra também deste forum Wink

4Página html [Média] Empty Re: Página html [Média] Ter Dez 18, 2012 2:04 pm

SecTioN

SecTioN
Curti !

5Página html [Média] Empty Re: Página html [Média] Sáb Dez 22, 2012 3:43 am

rck

rck

Update 2 lançado.

6Página html [Média] Empty Re: Página html [Média] Ter Dez 25, 2012 6:02 am

Misa Amane

Misa Amane
Se o Windows 8 é assim, caramba O.o

Mas até que gostei da pagina.

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 [Média]

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