Repositório Códigos HTML
12. Block Numbers
First Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Veja a seguir o código HTML comentado.
<div class="row-fluid">
<div class="span4">
<div class="blocknumber_box">
<div class="blocknumber_icon">1</div>
<div class="blocknumber_content">
<h5>Título</h5>
<p>Texto.</p>
</div>
</div>
</div>
<div class="span4">
<div class="blocknumber_box">
<div class="blocknumber_icon">b</div>
<div class="blocknumber_content">
<h5>Título</h5>
<p>Texto.</p>
</div>
</div>
</div>
<div class="span4">
<div class="blocknumber_box">
<div class="blocknumber_icon"><i class="fa fa-gift"> </i></div>
<div class="blocknumber_content">
<h5>Título</h5>
<p>Texto.</p>
</div>
</div>
O trecho em amarelo claro refere-se ao elemento (número/letra/ícone) que vai dentro do círculo redondo.
Os trechos em salmão são relativos aos títulos e texto explicativo a ser inserido abaixo da imagem. O código <h5> antes e depois do título refere-se ao nível de cabeçalho (tamanho e formatação).