• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

AriOps

- O Site Tal

26 mensagens neste tópico

Boas, para inaugurar esta nova secção do fórum vou aqui postar um template feito por mim há uns tempos, que era para usar como site pessoal :D

template_1_thumbnail.png

HTML: (os <br /> são só para se ver a área de escrita, é para substituir por conteúdo)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>O Site Tal</title>
<style type="text/css">
<!--
body {
background-image: url(images/bg.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-repeat: repeat;
}
-->
</style>
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="alinhador" align="center">
<div id="banner"></div>
<div id="menu">
<a href="#" class="menu_item">PortfÓlio</a>
<a href="#" class="menu_item">Projectos</a>
<a href="#" class="menu_item">Artigos</a>
<a href="index.php" class="menu_item" id="active">Home</a>
</div>
<div id="branco">o corpo do site aqui
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>

CSS:

#banner {
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
height: 142px;
width: 768px;
clear: both;
}
#menu {
width: 768px;
clear: both;
text-align: right;
background-image: url(../images/menu_h.jpg);
height: 29px;
}
a.menu_item, a.menu_item:visited {
font-family: Arial;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: dotted;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
display: block;
height: 13px;
float: right;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
}
#branco {
background-color: #FFFFFF;
height: auto;
}
#time {
width: 150px;
float: left;
margin-left: 50px;
margin-top: 122px;
font-family: Arial;
font-size: 13px;
color: #FFFFFF;
}
#slogan {
height: 52px;
width: 225px;
margin-top: 35px;
float: left;
margin-left: 33px;
}

a.menu_item:hover {
background-color: #FFFFFF;
background-image: none;
color: #CCAD33;
}
#active {
background-color: #FFFFFF;
color: #CCAD33;
}
.contentheading {
font-size: 12px;
font-family: Arial;
color: #CC3333;
text-transform: uppercase;
}
.contentpaneopen {
font-family: Arial;
color: #CC3333
}

As imagens, juntamente com os ficheiros index.htm e template_css.css estão disponíveis para download a partir daqui:

http://www.ptattacks.com/modelo.zip

Exemplo em funcionamento: http://www.ptattacks.com/modelo/

Cumps, AriOps :P

Edit:

Protegido com a licença seguinte:

logo_deed.gif

Atribuição-Uso Não-Comercial 2.5

By:

logo_dcdesigns_teste.jpg

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Template muito bom, simples atrente com boas cores! Ja agora, se depois ninguem se importar, alguem pode fazer um tutorial onde quando se passa o rato por cima do botao o botao muda a cor (neste caso o template possui os botoes que quando passo o rato por cima muda a cor ), mas please, façam um tutorial para noobs mesmo :P sff

Cumps...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mete um link para um site de exemplo no post inicial. Dá jeito para a malta ver logo como fica.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Está muito bom, e as imagens que o h4rrier aplicou tambem ficaram bem enquadradas !

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ups, só agora reparei que me esqueci de mudar o titulo do site :P

Vou mudar agora :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ah uma coisa que me esqueci de mencionar, se puderem depois deixem aqui os links para os sites onde usaram o template só para eu dar uma vista de olhos de como ficou :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Passado para Link !

Corrige "Créditos" ficou com os caracteres marados.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Template muito bom, simples atrente com boas cores! Ja agora, se depois ninguem se importar, alguem pode fazer um tutorial onde quando se passa o rato por cima do botao o botao muda a cor (neste caso o template possui os botoes que quando passo o rato por cima muda a cor ), mas please, façam um tutorial para noobs mesmo :P sff

Cumps...

isso é tudo css. #branco:hover { background-color:#000000; } por exemplo, vai mudar o background "branco" para preto qd metes o rato por cima (hover) :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Adicionado o meu logo no primeiro post ;)

Mais ninguém está a usar o template?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu vou usar tb! :D quando o site estiver feito eu logo mostro! :P

Arranja ai um logo pequenininho para meter no fundo das paginas.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Aqui tens, um branco e um preto pequenos e a versão branca do maior  :D

se precisares de ainda mais pequenos diz :P

textonlyut1.jpg

textonlyblackhp5.jpg

logodcdesignstestewhitecx0.jpg

Cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O branco pequeno serve! :P

Já tá o site todo montado, só falta o conteudo! :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Edit no 1º post:

Mudada a licença da Creative Commons para a Portuguesa (finalmente) :(

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora