Pessoal, não vi a resolução do professor até terminar o meu site. Porém, me deparei com outra maneira de faz, a qual demonstrarei abaixo:
HTML a partir do <main>
<main>
<h1>Portfolio</h1>
<div class="central">
<article>
<p>Veja abaixo a lista dos meus projetos mais relevantes</p>
<div id="BMW" class="box">
<a href="http://www.bmw.com/com/en/" target="_blank">
<figure>
<img src="img/bmw.png" alt="BMW">
<figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</div>
<div id="UOL" class="box">
<a href="http://www.uol.com.br" target="_blank">
<figure>
<img src="img/uol.png" alt="UOL">
<figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</div>
<div id="IBM" class="box">
<a href="https://www.ibm.com/br-pt/" target="_blank">
<figure>
<img src="img/ibm.png" alt="IBM">
<figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
</figure>
</a>
</div>
<div id="G1" class="box">
<a href="http://g1.globo.com" target="_blank">
<figure>
<img src="img/g1.png" alt="G1">
<figcaption>G1.globo.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</div>
</article>
</div>
</main>E o arquivo portfolio.css completo
main {
padding-bottom: 50px;
}
.box {
width: 350px;
padding: 16px;
text-align: center;
border: 3px solid black;
box-sizing: border-box;
background-color: #FAFFFC;
box-shadow: 3px 3px 7px grey;
margin-bottom: 12px;
}
.box:hover {
box-shadow: 2px 2px 5px grey;
}
.box:active {
box-shadow: 1px 1px 3px grey;
}
img {
margin-bottom: 3px;
}
#BMW {
float: left;
}
#UOL {
float: right;
}
#IBM {
float: left;
}
#G1 {
float: right;
}Essa alternativa é tão válida quanto a anterior?
E uma segunda dúvida:
Tive que dimensionar o tamanho das 4 caixas com uma largura fixa em pixels para que a imagem não ultrapassasse o box. Tentei aplicar apenas nas tags <img> a função "width: 100%", porém as caixas se moldavam ao tamanho da frase sem quebra de linha. Em resumo minha dúvida seria: qual a opção correta a ser aplicada ao meu modelo de código para que a imagem se adeque ao tamanho da caixinha com quebra de linha no texto e não o contrário?
