[HTML] Layout 2
2 participantes
Página 1 de 1
[HTML] Layout 2
- 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>
O que acharam?
Se tiverem dúvidas, basta postar aqui que responderei.
Abraços e boa jornada a todos.
Alice
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos