Repositório Códigos HTML

12. Block Numbers

1
First Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Código

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

Comentário

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