Início
phpBB3 
PunBB
Invision
Eae pessoal, refiz a homepage do PunBB aqui, tentei deixar um pouco responsiva e tudo mais.. Deem uma olhada e caso gostem, é só implantar no fórum 
HTML
CSS
Download da page com todos os arquivos (normalize, modernizr, etc..)
http://www.4shared.com/rar/3nDAdCH7ce/Homepage.html
HTML
- Código:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PunBB Forumeiros</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shotcut icon" href="img/punbb.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<nav class="main-width">
<div class="logo">
<a href="#"><img src="img/punbb.png" alt="PunBB Community" title="Homepage" /></a>
</div>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Códigos</a></li>
<li><a href="#">Fórum</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main class="main-width">
<a class="query-logo" href="#"><img src="img/punbb.png" alt="PunBB Community" title="Homepage" /></a>
<h2>PunBB Forumeiros</h2>
<p class="upper left">Desenvolvimento, análise e criação de códigos...</p>
<br class="clear">
<p class="content left"> Nosso fórum propôe uma forma fácil e intuitiva pra a edição dos templates PunBB da plataforma Forumeiros, aliado a códigos Javascripts e jQuery para tornar a interface ainda mais amigável e agradável da maior plataforma de fóruns gratuitos do mundo!<br><br> Os utilizadores apreciam PunBB pela sua rapidez e leveza gráfica. Sua facilidade de utilização permite aos usuários se comunicarem de modo simples! </p>
<section class="side-logo">
<a href="#"><img src="img/punbb.png" alt="PunBB Community" title="Acessar o fórum" /></a>
</section>
<br class="clear">
<button class="acess"><a href="#">» Acessar o fórum</a></button>
</main>
<footer>
<section class="footer main-width">
<ul>
<li><a href="#">Contato</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Cookies</a></li>
<li><a href="#">Forumeiros</a></li>
</ul>
<div class="copyright">
2013 - <span id="year"></span> | JScript (João Carlos) & <a href="http://jscript.forumeiros.com/forum">PunBB Forumeiros</a>
</div>
</section>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script async defer>
var d = new Date();
var x = document.getElementById("year");
x.innerHTML=d.getFullYear();
</script>
</body>
</html>
CSS
- Código:
@charset="UTF-8";
body{
background-color: #1d3652;
background-image: radial-gradient(center, #2e5785, #1d3652);
background-image: -moz-radial-gradient(center, #2e5785, #1d3652);
background-image: -webkit-radial-gradient(center, #2e5785, #1d3652);
background-image: -o-radial-gradient(center, #2e5785, #1d3652);
background-image: -ms-radial-gradient(center, #2e5785, #1d3652);
font-family: 'Open Sans',Arial,Verdana,sans-serif !important;
}
img{
vertical-align: middle;
}
a {
color: #225985;
text-decoration: none;
}
a:hover {
color: #328586;
}
header{
background: #282828;
}
nav{
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
}
nav li{
display: inline-block;
padding: 28px 0px 28px 3px;
margin: 0 0 0 20px;
}
nav li a{
color: #fff;
font-size: 12px;
}
nav li a.active, nav li a:hover{
text-shadow: 0px 0px 10px #FFF;
color: #fff;
}
.main-width{
max-width: 980px;
margin: 0 auto;
}
.logo img{
width: 40px;
float: left;
padding: 0 18px 0 0;
margin: 18px 0 0 0;
border-right: #1c1c1c 1px solid;
box-shadow: #303030 1px 0 0;
}
h2{
color: #FFF;
text-shadow: 1px 2px 2px #000;
font-size: 60px;
font-family: Georgia,serif;
font-weight: normal;
}
.upper{
color: #FFF;
text-shadow: 0px 1px 1px #000;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.left{
float: left;
}
main p{
color: #FFF;
}
.side-logo{
float: right;
}
.side-logo img{
width: 200px;
margin: -100px 0 0 0;
}
.content{
width: 50%;
color: #FFF;
text-shadow: 0px 1px 1px #000;
}
.clear{
clear: both;
}
.acess{
border-top: #ffe56c 2px solid!important;
border: #d17900 1px solid;
border-bottom-width: 2px;
background-color: #f8ae00;
background-image: linear-gradient(top, #febe00, #e88600);
background-image: -moz-linear-gradient(top, #febe00, #e88600);
background-image: linear-gradient(top, #febe00, #e88600);
background-image: linear-gradient(top, #febe00, #e88600);
border-radius: 10px;
padding: 5px 20px;
display: block;
}
.acess a{
color: #fff;
text-shadow: 1px 1px 1px #A45E00;
}
.query-logo{
display: none;
}
.query-logo img{
width: 100px;
margin: 50px 0 0 0;
}
footer{
background: #282828;
margin: 100px 0 0;
padding: 30px 30px 25px 30px;
color: #8A8989;
font-size: 12px;
border-top: #2f2f2f 2px solid;
overflow: hidden;
}
.footer a{
color: #8A8989;
}
.footer ul{
margin: 0;
padding: 0;
}
.footer li{
display: inline-block;
}
.footer li:after{
content: "-";
padding: 0 0 0 5px;
color: #8A8989;;
}
.footer li:last-child:after{
content: "";
}
.copyright{
float: right;
margin: -15px 0 0 0;
}
@media (max-width: 980px) {
.side-logo{
display: none;
}
main{
text-align: center;
}
.content{
width: 100%;
}
.left{
float: none;
}
.acess{
width: 80%;
margin: 50px auto 0 auto;
padding: 20px;
}
nav ul, footer{
text-align: center;
}
nav li a{
font-size: 17px;
}
nav li{
margin: 0 3%;
}
.logo{
display: none;
}
footer{
overflow: hidden;
}
.copyright{
width: 100%;
clear: both;
margin: 10px;
}
.query-logo{
display: block;
}
h2{
margin: -1px 0 0 0;
}
}
Download da page com todos os arquivos (normalize, modernizr, etc..)
http://www.4shared.com/rar/3nDAdCH7ce/Homepage.html
