Repositório Códigos HTML
8. Caixas de destaque personalizadas
Título
Ênfase A Lorem ipsum ...
Ênfase B Lorem ipsum ...
Ênfase C Lorem ipsum ...
Ênfase A Lorem ipsum ...
Ênfase B Lorem ipsum ...
Ênfase C Lorem ipsum ...
Ênfase A Lorem ipsum ...
Ênfase B Lorem ipsum ...
Ênfase C Lorem ipsum ...
Ênfase A Lorem ipsum ...
Ênfase B Lorem ipsum ...
Ênfase C Lorem ipsum ...
Ênfase A Lorem ipsum ...
Ênfase B Lorem ipsum ...
Ênfase C Lorem ipsum ...
...
...
...
...
Veja a seguir o código HTML comentado.
<div class="prom-box prom-box-info" style="position: inherit;">
<h2><strong><span color="#009ACD" style="color: #009acd;">Título</span></strong></h2>
<p><span color="#009ACD" style="color: #009acd;"><strong><span>Ênfase A</span> </strong></span>Lorem ipsum ...<br /><span color="#009ACD" style="color: #009acd;"><strong>Ênfase B </strong></span>Lorem ipsum ...<br /><span color="#009ACD" style="color: #009acd;"><strong> Ênfase C </strong></span>Lorem ipsum ...</p>
</div>
O trecho em azul claro é a imagem (caixa) de fundo. Cada caixa tem sua cor pré-definida.
O trecho em amarelo claro refere-se à formatação do Título.
Os trechos em salmão referem-se aos textos que devem ser substituídos pelo conteúdo. Aqui basta inserir os textos, cuidando para não apagar nenhuma demarcação HTML. Importante manter relação do ícone com o título da caixa.
O código em verde é a cor das fontes.