Usar blockquotes do lugar de criar listas atrapalharia futuramente ou deixaria meu código menos sermantico ??
HTML:
<body>
<main>
<h1 class="titulo-principal">Portfolio</h1>
<div class="conteudo-textual">
<p>Veja abaixo a lista dos meus projetos mais relevantes:</p>
<blockquote class="bmw">
<figure>
<img class="img-bmw" src="img/bmw.png" alt="site da bmw">
<figcaption><a href="http://bmw.com">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</blockquote>
<blockquote class="uol">
<figure>
<img class="img-uol" src="img/uol.png" alt="site da uol">
<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>
</blockquote>
<blockquote class="ibm">
<figure>
<img class="img-ibm" src="img/ibm.png" alt="site da ibm">
<figcaption><a href="http://ibm.com">IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</a></figcaption>
</figure>
</blockquote>
<blockquote class="g1">
<figure>
<img class="img-g1" src="img/g1.png" alt="site da g1">
<figcaption><a href="http://g1.com.br">G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
</figure>
</blockquote>
</div>
</main>CSS:
blockquote{
border: 8px solid black;
background-color: #FAFFFC;
padding: 16px;
box-sizing: border-box;
margin: 16px;
margin-left: 0;
width: 300px;
height: 250px;
}
figure img{
width: 250px;
}
figcaption{
color: #851944;
text-align: justify;
text-decoration: underline;
}
.bmw{
float: left;
}
.uol{
float: right;
position: relative;
right: 90px;
}
.ibm{
float: left;
position: relative;
bottom: 20px;
}
.g1{
float: right;
position: relative;
right: 90px;
bottom: 20px;
}
main{
padding-bottom: 100px;
}
