[HTML] Layout 2

Ir em baixo

[HTML] Layout 2 Empty [HTML] Layout 2

Mensagem por Alice em Sab 07 Jun 2014, 19:02

Resultado:
Tudo parecia simplesmente perfeito naquele momento. A Stylist sorria e sentia-se leve como uma pluma. Os aplausos e o fim do choro animavam a jovem que cantava e dançava alegremente. Brincava com sua Pokémon.

O contraste do golpe negro com o dourado da argola, criou um efeito que teve um resultado melhor que o esperado pela jovem. As pessoas aplaudiam e aos poucos mais se juntavam para assistir. A menina assistia finalmente com um sorriso, procurando a Pokémon quando esta sumia. Finalmente uma expressão alegre.

Mais aplausos e Melissa desejou poder congelar o momento. Sua primeira apresentação, simples e de poucos recursos, havia juntado um grupo de pessoas considerável para uma primeira tentativa. Todos pareciam se divertir. A apresentação encerrava, deixando a criança brincar com a argola. Shuppet tentando passar pelo objeto, sumindo e reaparecendo, entretendo a menina. As pessoas parecendo aguardar por mais algo. Tinha como melhorar?

Infelizmente, tudo piorou. A jovem sentiu as dores familiares espalharem por seu corpo, não evitando uma leve careta de dor. A respiração se tornava difícil e tudo ficou fora de foco. Só teve tempo de amaldiçoar sua própria saúde mentalmente, antes de cair inconsciente. Shuppet se aproximava da garota, olhando-a com preocupação e confusão, não acostumada ainda a fragilidade de White.


Esse layout é bem simples de ser implementado nos posts. Para começar, precisamos de uma imagem, dessa vez mais comprida do que larga para ter o efeito desejado. Começaremos com este código:

Código:
<div style="text-align:justify; width:75%;margin:0 auto;border-radius:20px;border-right:2px TIPO DE BORDA COR DA BORDA;padding:15px;"><div style="float:left; margin-right:15px; margin-bottom:5px;"><img src=INSIRA A URL DA IMAGEM AQUI width=200></div>

Adicione a url da imagem escolhida na área solicitada para iniciar. Logo depois substitua o texto COR DA BORDA pelo código html da cor desejada. Recomendo que pegue o código neste site.

O texto TIPO DE BORDA deve ser substituído por dotted (pontinhos), dashed (tracejado) ou solid (linha continua). Deixe um espaço em branco entre o tipo de borda e a cor dela.

O código border-radius define o arredondado da borda. Deixei o padrão como 20px, igual ao do exemplo, mas você pode aumentar este número para ter uma borda mais arredondada, ou reduzi-lo para ter uma borda mais reta.

Feitos esses ajustes, digite seu post normalmente. Recomendo que deixe uma linha em branco entre um parágrafo e outro para melhorar a leitura do post e deixar visualmente mais atraente.

Após encerrar o post, adicione o código:
Código:
</div><div style="clear:both;"></div>
para não desconfigurar o layout do fórum e pronto. Layout criado e aplicado.

O que acharam?
Se tiverem dúvidas, basta postar aqui que responderei.
Abraços e boa jornada a todos.
Alice
Alice


Voltar ao Topo Ir em baixo

[HTML] Layout 2 Empty Re: [HTML] Layout 2

Mensagem por Emme Roinuj em Sab 27 Ago 2016, 23:55

Usei esse e tô amando :3

Já vou com ele nas minhas rotas o/
Emme Roinuj
Emme Roinuj


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