1
resposta

Ao invés de montar uma lista, utilizei o float

Olá, galera! Eu pensei no código de uma forma diferente da resolução. Sei que o importante é alcançar o resultado desejado, e é por isso que decidi postar a forma como fiz caso alguém tenha interesse em ter uma visão alternativa. No meu HTML, coloquei o seguinte código:

<figure class="portfolio-box bmw">
    <img src="images/bmw.png" alt="Imagem do site da BMW.com" class="img-portfolio-box">
    <figcaption>
        <a href="http://bmw.com">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a>
    </figcaption>
</figure>

<figure class="portfolio-box uol">
    <img src="images/uol.png" alt="Imagem do site da UOL.com.br" class="img-portfolio-box">
    <figcaption>
        <a href="http://uol.com.br">UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a>
    </figcaption>
</figure>

<figure class="portfolio-box ibm">
    <img src="images/ibm.png" alt="Imagem do site da IBM.com" class="img-portfolio-box">
    <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="portfolio-box g1">
    <img src="images/g1.png" alt="Imagem do site do G1.com" class="img-portfolio-box">
    <figcaption>
        <a href="https://g1.globo.com">G1.com.br: aplicação de progressive enhancement em conjunto com aplicação back-end</a>
    </figcaption>
</figure>

No caso, declarei a class portfolio-box e depois uma class para cada elemento. No CSS, utilizei o seguinte código:

.portfolio-box {
    width: 45%;
    box-sizing: border-box;
    border: 8px solid black;
    text-align: center;
    margin: 16px;
    padding: 16px;
}

.img-portfolio-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.bmw {
    float: left;
}

.uol {
    float: left;
}

.ibm {
    float: left;
    clear: left;
}

.g1 {
    float: left;
    margin-bottom: 100px;
}

No caso do G1, eu adicionei um margin-bottom de 100px porque o footer estava em cima (mesmo problema demonstrado nas aulas).

Enfim, espero que ajude alguém :-)

1 resposta

Oi, Victor, tudo bem?

Valeu por compartilhar a sua solução! Ela é muito bem-vinda!

Bons estudos!