[HTML] Layout 1

Ir em baixo

[HTML] Layout 1 Empty [HTML] Layout 1

Mensagem por Alice em Sab 07 Jun 2014, 18:45

Resultado:

Uma Estranha na Noite

A garota é estranha. Estamos nesse beco há horas e ela continua parada, olhando a mão. O sangue de Purrloin já está seco. Não entendo essa fixação dela pelo vermelho. O sol já passou por cima de nossas cabeças e começa a se por do outro lado. Deve estar bonito. Gosto dessa hora do dia, em que o céu fica colorido de laranja e rosa. Se bem que essa cidade tem rosa até demais. Entretanto, sou um Pokémon fiel e não me afastarei da garota.


- Drow?


Minha voz não tem efeito sobre ela. Ela continua olhando para o sangue. Acho que ela nunca matou um Pokémon antes, mas não parece remorso o que ela sente. É mais como se a cor a hipnotizasse. Uma mexa de cabelo escorrega pelo braço, caindo um pouco para frente. É um lindo tom azulado. Exatamente um dos tons que o céu assume enquanto a lua sobe e o sol se retira para dormir. Gosto da cor. Também gosto dos olhos dela. Apesar de assustadores, possuem uma cor linda e exótica.


As horas continuam passando e a iluminação está cada vez mais rara. Ela não deve mais estar vendo o tom do vermelho, já que começa a olhar para os lados quando escuta um ruído. Encosto a cabeça na parede e olho para cima. Do meu assento, no chão e de frente para minha mais nova parceira, consigo ver a primeira estrela que ilumina o céu. Ainda tímida no meio das nuvens e meio escondida pelos últimos raios do sol, mas definitivamente brilhante e linda. Linda como minha parceira. Misteriosa e distante como ela. Tentei inutilmente entrar em sua mente com meus poderes psíquicos, mas não encontrei nada. Absolutamente nada. Ela não é retardada nem nada, porém não tem pensamentos. Seu cérebro é uma escuridão nebulosa, como uma noite de neblina no inverno. Só dava para vislumbrar um homem, ou um Pokémon, balançando um pêndulo. Será uma memória?


- Come litle children, come with me...


Ela volta a cantar, chamando minha atenção. Por que será que ela canta essa música? Eu nunca a ouvi antes. Frente a frente, num beco escuro, há horas... E ainda não sei nada da mulher que acompanharei até a morte...


Muito bem, irei ensinar aqui a como fazer o layout que usei nas minhas duas primeiras rotas.

O primeiro passo é escolher uma imagem. No meu caso, devido ao vínculo da biografia com o Hypno, eu escolhi essa:

[HTML] Layout 1 Tumblr_m3ptl6fXu41qfdr6ho1_500

É importante que a imagem seja levemente mais comprida do que alta, do contrário irá desfigurar e o resultado não será bom.

Com a imagem em mãos, devidamente tratada se for necessário, vamos ao código:

Código:
<div style="margin:auto; width:500px;border:3px COR DA BORDA solid;padding:5px;border-radius:25px 25px 0 0;background-image:url(INSIRA AQUI A URL DA IMAGEM);background-repeat:no-repeat;background-size:510px 239px;">

Na parte solicitada, insira a URL da imagem, preservando os parênteses.

COR DA BORDA deverá ser substituído pelo código HTML da cor desejada para a borda, inclusive com o #. Sugiro olhar neste site o código das cores.

Logo depois desse código, insira esse:
Código:
<div style="margin-top:238px;text-align:center;color:INSIRA A COR DO TEXTO;font-family:Georgia;font-weight:bold;font-size:20px">TÍTULO DA ROTA OU DO POST</div>

Essa parte irá inserir o título abaixo da imagem.

INSIRA A COR DO TEXTO deverá ser substituído pela cor HTML do título. Recomendo usar a mesma da borda para deixar o layout harmonioso e o ideal é que ambos combinem com a imagem.

O código font-family é a fonte do título. Você pode trocar Georgia por serif, sans-serif, cursive, fantasy, ou monospace. Essas são as famílias genéricas e serão reconhecidas em qualquer navegador. Não recomendo tentar usar outra, pois correrá o risco dela não ser reconhecida em outros computadores.

Logo em seguida insira esse código:
Código:
<div style="text-align:justify;color:COR DO POST;font-family:Georgia;">

Essa linha irá garantir que todo o seu texto tenha a cor (substituir COR DO POST pelo código HTML da cor desejada) e a fonte desejados. Novamente você pode substituir Georgia em font-family por outra das listadas anteriormente.

Com toda a preparação finalizada, finalmente chegamos a parte do post propriamente dito. Sempre que for começar um parágrafo insira esse código:
Código:
<p style="text-indent:50px;">
E sempre que for encerrar um parágrafo insira este outro código:
Código:
</p>
Isso irá garantir que a primeira linha de cada parágrafo tenha o espaçamento de inicio e irá garantir o espaçamento entre os parágrafos.
Quando encerrar todo o post, adicione:
Código:
</div></div>
para não desconfigurar o layout do fórum e pronto! Layout finalizado.

Vale ressaltar que o uso de BB code está completamente liberado no meio do layout que  ele não será afetado. Contudo, caso queira adicionar uma imagem entre dois parágrafos, não deverá tratá-la como um parágrafo, deixando de adicionar nessa parte em especifico os códigos de parágrafo.

Espero que tenham gostado e que tenha ficado claro o tutorial.

Qualquer dúvida, é só responder aqui e explico melhor.
Alice
Alice


Voltar ao Topo Ir em baixo

[HTML] Layout 1 Empty Re: [HTML] Layout 1

Mensagem por ~Adryan em Qua 09 Jul 2014, 18:08

O meu saiu todo errado nos codes, fiz tudo certo mas não saiu como o seu.
~Adryan
~Adryan


Voltar ao Topo Ir em baixo

[HTML] Layout 1 Empty Re: [HTML] Layout 1

Mensagem por Ayzen em Qui 10 Jul 2014, 09:27




AQUI É O TÍTULO DO SEU POSTE OU DA SUA MENSAGEM  


AQUI VOCÊ DIGITA O SEU POSTE


Código:
<div style="margin:auto; width:90%;border:3px #87CEFA solid;padding:5px;border-radius:25px 25px 0 0;background-image:url(http://i.imgur.com/2a6PKDR.gif);background-repeat:no-repeat;background-size:100%;">
<div style="margin-top:50%;text-align:center;color:#FF1493;font-family:forte;font-weight:normal;font-size:20px">

AQUI É O TÍTULO DO SEU POSTE OU DA SUA MENSAGEM  </div>
<div style="text-align:justify;color:black;font-family:Verdana;">
AQUI VOCÊ DIGITA O SEU POSTE
</div></div>


Oi Adryan,

tente usar esse código acima. a cor dele é azul claro de código #87CEFA se quiser usar outra cor HTML, procure aqui. É só substituir o código #87CEFA, que é azul claro, pelo código da cor que quiser.

A imagem que eu usei está no começo:
Código:
url(http://i.imgur.com/2a6PKDR.gif)
pode substituir por qualquer imagem que queira.

Já a cor do título, é #FF1493, ou seja, rosão. Você pode substituir esse código pelo código da cor que quiser. Espero que ajude. Qualquer dúvida, aqui mesmo ;D
Ayzen
Ayzen


Voltar ao Topo Ir em baixo

[HTML] Layout 1 Empty Re: [HTML] Layout 1

Mensagem por ~Adryan em Qui 10 Jul 2014, 18:37

Valeu Ay, Valeu mesmo.
~Adryan
~Adryan


Voltar ao Topo Ir em baixo

[HTML] Layout 1 Empty Re: [HTML] Layout 1

Mensagem por Rike em Qua 18 Mar 2015, 14:24




Hehe ^^  

 
Peço permissão aqui para usa-lo, vlw Alice por postar e Ayzen por simplificar ainda mais o//

Haha
Rike
Rike


Voltar ao Topo Ir em baixo

[HTML] Layout 1 Empty Re: [HTML] Layout 1

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum