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="img-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="img-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 class="img-ibm">
                            <img 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 class="img-globo">
                            <img src="img/g1.png" alt="Site da Globo">
                            <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript.</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>
        &copy; João da Silva 2014
    </footer>

    <footer>
        &copy; João da Silva 2014
    </footer>
</body>

CSS

.portfolio li{ display: inline-block;

border: 8px solid black;
background-color: #FAFFFC;
width:45%;
box-sizing: border-box;
padding: 16px;
margin-right: 16px;
margin-bottom: 16px;

}

.portfolio img{ width: 100%; }

.img-bmw{ float:left;

} .img-uol{ float:left;

} .img-ibm{ float:left;

} .img-globo{ float:left;

}