Ir para o conteúdo
AriOps

- O Site Tal

Mensagens Recomendadas

AriOps    0
AriOps

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Platonic    0
Platonic

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...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
AriOps    0
AriOps

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
djthyrax    11
djthyrax

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
David Pintassilgo    5
David Pintassilgo

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.

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade