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

Blockquote no lugar de listas

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;
}
1 resposta
solução!

Lucas, boa tarde!

Eu acredito que sim, talvez o problema não seja, nem usar o blockquote, mas de fato elas são uma lista de blockquotes, então seria interessante colocar uma lista. Assim você deixa o código mais semântico até para você.

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software