Repositório Códigos HTML
10. Imagens em quadros
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Veja a seguir o código HTML comentado.
<div class="row-fluid">
<div class="image-box span4"><img src="#" alt="img1" class="img-responsive" width="600" height="300" />
<div class="image-box-content">
<p>TEXTO.</p>
<p style="text-align: center;"><a class="btn btn-default" href="#">Read More</a></p>
</div>
</div>
<div class="image-box span4"><img src="#" alt="img2" class="img-responsive" width="600" height="300" />
<div class="image-box-content">
<p>TEXTO</p>
<p style="text-align: center;"><a class="btn btn-default" href="#">Read More</a></p>
</div>
</div>
<div class="image-box span4"><img src="#" alt="img3" class="img-responsive" width="600" height="300" />
<div class="image-box-content">
<p>TEXTO.</p>
<p style="text-align: center;"><a class="btn btn-default" href="#">Read More</a></p>
</div>
</div>
</div>
O trecho em rosa refere-se às imagens.
O trecho em salmão é texto explicativo a ser inserido abaixo da imagem.
O trecho em azul é o link para onde o "Read more!" irá levar. Se quiser que o link vá para um arquivo em específico, suba o arquivo em uma pasta do ambiente, clique com o botão direito sobre o arquivo e copie o endereço do link. Você também pode colocar o link para uma outra página.