Eu fiz o código completamente diferente, fazendo os elementos flutuarem ao invés de fazer uma lista, porém o visual ficou bem semelhante ao do enunciado, isso seria considerado errado?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio - João da Silva</title>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1 class="titulo-principal">portfolio</h1>
<div class="container">
<p>Veja abaixo a lista dos meus projetos mais relevantes</p>
<figure class="projeto-bmw">
<img class="imagem" src="img/bmw.png" alt="Imagem site da BMW">
<figcaption><a href="https://www.bmw.com/en/index.html">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
</figure>
<figure class="projeto-uol">
<img class="imagem" src="img/uol.png" alt="Imagem site da Uol">
<figcaption><a href="https://www.uol.com.br/">UOL.com.br:reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
</figure>
<figure class="projeto-ibm">
<img class="imagem" src="img/ibm.png" alt="Imagem site da IBM">
<figcaption><a href="https://www.ibm.com/br-pt/">IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</a></figcaption>
</figure>
<figure class="projeto-g1">
<img class="imagem" src="img/g1.png" alt="Imagem site do G1">
<figcaption><a href="https://g1.globo.com/">G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
</figure>
</div>
</main>
<img class="minha-foto" src="img/eu.jpg" alt="Foto de João da Silva">
<aside class="navegacao-site">
<nav>
<h1>João da Silva</h1>
<ul>
<li><a href="#">home</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="bio.html">sobre mim</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="#">contato</a></li>
</ul>
</nav>
<ul class="icones-redes-sociais">
<li><a class="github" href="#">Github</a></li>
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</aside>
<footer class="rodape-pagina">© João da Silva 2014</footer>
</body>
</html>.lista-projetos{
display: inline-block;
}
figure{
border: 8px solid #000;
box-sizing: border-box;
padding: 16px;
margin: 16px;
background-color: #FAFFFC;
width: 40%;
height: 300px;
}
.imagem{
width: 100%;
}
p{
text-align:justify;
}
.projeto-bmw{
float: left;
clear: left;
}
.projeto-uol{
float: left;
clear: right;
}
.projeto-ibm{
float: left;
clear: left;
}
.projeto-g1{
float: left;
clear: right;
}