Portfolio
<div class="container">
<p>Veja abaixo a lista dos meus projetos mais relevantes.</p>
<ul class="portfolio">
<li>
<a href="http://bmw.com">
<figure >
<img class="projeto-bmw" src="img/bmw.png" alt="Site da BMW">
<figcaption>BMW.com: reformulação de design e implementação de HTML, CSS, JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://uol.com.br">
<figure >
<img class="projeto-uol"src="img/uol.png" alt="Front-Page da UOL">
<figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://www.ibm.com.br">
<figure >
<img class="projeto-ibm" src="img/ibm.png" alt="Site da IBM">
<figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end.</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://g1.com.br">
<figure >
<img class="projeto-g1"src="img/g1.png" alt="Site da Globo">
<figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaS</figcaption>
</figure>
</a>
</li>
</ul>
</div>
</main>
<img src="img/eu.jpg" alt="Foto do João da Silva">
<aside class="navegacao-site">
<nav>
<h1>João da Silva</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfólio</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-sociais">
<li><a href="https://github.com/joaodasilva" class="github">Github</a></li>
<li><a href="https://twitter.com/joaodasilva" class="twitter">Twitter</a></li>
<li><a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">LinkedIn</a></li>
</ul>
</aside>
<footer>
© João da Silva 2014
</footer>
<footer>
© João da Silva 2014
</footer>
</body>CSS .portfolio li{ display: inline-block; border: 8px solid #000; box-sizing: border-box; padding: 16px; margin: 16px; background-color: #FAFFFC; width: 40%; height: 300px; }
.img{ width: 40%; }
.projeto-bmw{ position: absolute; top:350px; left: 180px; }
