[HTML] Layout 1

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:


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