Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Mesmo resultado de jeito diferente. Continua correto?

<!DOCTYPE html>
<html>
    <head>

        <title>Portfólio - João da Silva</title>
        <meta charset="utf-8">
        <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 id="titulo-principal">Portfólio</h1>
            <div class="texto-principal">
                <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
                <ul>
                    <li><figure class="blocos">
                            <img src="img/bmw.png" alt="foto BMW" id="bmw">
                            <figcaption>BMW.com:reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="blocos" id="uol">
                            <img src="img/uol.png" alt="foto UOL">
                            <figcaption>UOL.com.br:reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="blocos" id="ibm">
                            <img src="img/ibm.png" alt="foto IBM">
                            <figcaption>IBM.com: aplicação de enhancement em conjunto com aplicação back-end</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="blocos" id="g1">
                            <img src="img/g1.png" alt="foto G1">
                            <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </li>
                </ul>        
            </div>            

        </main>
        <img src="img/eu.jpg" alt="foto de João da Silva" class="joao">
        <aside class="barra-de-navegacao">
            <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">Sobre mim</a></li>
                    <li> <a href="blog.html">Blog</a> </li>
                    <li> <a href="contato.html">Contato</a> </li>
                </ul>
            </nav>
            <ul class="icons">
                <li><a class="github"href="https://github.com/joaodasilva">Github</a></li>
                <li><a class="twitter"href="https://twitter.com/joaodasilva">
                    Twitter
                </a></li>
                <li>
                    <a class="linkedin"href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
        <footer id="rodape-pagina">
            &copy; João da Silva 2014
        </footer>

    </body>

</html>
.blocos{
    border: solid 8px black;
    background-color: #FAFFFC;
    padding: 16px;
    box-sizing: border-box;
    width: 355px;
    height: 280px;
}
figcaption{
    text-decoration: underline;
    color: #8A0868;
}
#bmw{
    width: 320px;
}
#uol{
    position: relative;
    bottom: 280px;
    float: right;
}
#ibm{
    margin-top: 16px;
}
#g1{
    position: relative;
    bottom: 280px;
    float: right;
}
1 resposta
solução!

Se deu o mesmo visual está correto sim. Porém, da forma como você fez, qualquer redimensionamento da tela vai quebrar o seu layout. Faça o teste, deixe a tela parcialmente maximizada.

Além disso, ao utilizar IDs, você está deixando o seu layout estático. Se você quiser um dia colocar os mesmos ícones em outro lugar também, você precisará criar outros IDs com nomes parecidos tipo #g1-2, #ibm-2, etc, e isso irá poluir o seu CSS.