Passo 8 – Adicionar o conteúdo item “Featured Portfolio”

Agora que temos a nossa base, chegou a hora de colocar-mos os blocos de conteúdo. O primeiro bloco chama-se “Featured  Project”. Vamos adicionar algum HTML:

<div id=”block_featured” class=”block”>
<span class=”block_inside”>

<div class=”image_block”>
<img src=”images/sample_feature.jpg” />
</div>
<div class=”text_block”>
<h2>Eden Website Design</h2>
<small>in <a href=”">web design</a> tagged <a href=”">corporate</a>, <a href=”">web2</a></small>

<p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href=”" class=”button”>View Project</a>
</div>

</span>
</div>

O código em cima fica logo a seguir à <div id=”header></div>. Sem qualquer estilo fica assim:

Duas notas:

1. Note que temos uma <div class=”block”> seguida de um <span class=”block_inside”>. Isto deve-se porque as caixas que estámos a criar têm uma borda dupla, primeiro tem uma borda cinzenta de 1px e dentro uma borda branca de 1px.

2. No botão “View Project”, em vez utilizar uma imagem, criámos a classe “button” edeplois aplicá-la a links normais.

Partilhar esta Entrada