Homepage PunBB Community
4 participantes
Página 1 de 1
Homepage PunBB Community
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
Re: Homepage PunBB Community
você não colocou lá no seu fórum de teste? que eu me esqueci do nome...
queria ver como ficou
queria ver como ficou
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Homepage PunBB Community
Opa, foi mal esqueci de fazer upload aqui..
Veja: https://googledrive.com/host/0Bxaa_QAP8kJtdzJLX0tEMGRPUGc/index.html
Não sei se vai estar legal ai
Veja: https://googledrive.com/host/0Bxaa_QAP8kJtdzJLX0tEMGRPUGc/index.html
Não sei se vai estar legal ai
Re: Homepage PunBB Community
Muito bem escrito seu HTML5, faz um tempo que não vejo um código nesse nível,
Uma vez falei aqui que não era possível definir um documento no modo HTML5 na forumeiros
Por isso que eu queria ver em seu fórum se página fica definida mesmo como
<!DOCTYPE html>
ou se ela herda essa definição aqui
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
De qualquer maneira ficou ótimo seu código.
Uma vez falei aqui que não era possível definir um documento no modo HTML5 na forumeiros
Por isso que eu queria ver em seu fórum se página fica definida mesmo como
<!DOCTYPE html>
ou se ela herda essa definição aqui
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
De qualquer maneira ficou ótimo seu código.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Homepage PunBB Community
É mais uma dúvida e não uma afirmação, falo isso porque não vi uma só pagina dentro da forumeiros, que tenha o documento definido como <!DOCTYPE html>,
por isso acredito que não seja possível.
De qualquer maneira, o navegador vai interpretar suas tags HTML5 mantendo a funcionalidade de seu código.
por isso acredito que não seja possível.
De qualquer maneira, o navegador vai interpretar suas tags HTML5 mantendo a funcionalidade de seu código.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Homepage PunBB Community
Sim, gostei bastante também, mas em meu note ficou assim: https://i.imgur.com/ch0VI69.png
E a parte marcada eu queria que subisse um pouco mais...
Obrigado amigo,
JS
E a parte marcada eu queria que subisse um pouco mais...
Obrigado amigo,
JS
Re: Homepage PunBB Community
Olá,
Não ficaria melhor a barra do footer mesmo no fundo, em vez a meio só se for da resolução do PC de cada usuário ...
Não ficaria melhor a barra do footer mesmo no fundo, em vez a meio só se for da resolução do PC de cada usuário ...
IsmaelS.- Membro
- Time Online : 56d 18h 55m 47s
Mensagens : 70
Data de inscrição : 22/02/2014
Re: Homepage PunBB Community
Creio que uma solução bacana seja adicionar um margin no .upper e no .content
- Código:
.content, .upper{
margin: -25px 0 0 0;
}
Tópicos semelhantes
» Botões iguais ao PunBB Community
» [Pedido] Barra de notificações do PunBB Community
» Xlider - Galeria de imagens na homepage
» [Pedido] Barra de notificações do PunBB Community
» Xlider - Galeria de imagens na homepage
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|