Blocos horizontais [inserindo produtos]. HTML5 CSS3 aula 32

Nesse vídeo vemos a primeira parte de como criar blocos para serem posicionados horizontalmente em seu site. Não é o layout mais funcional do mundo mas é algo interessante de propor em um site.

Código fonte HTML:

...<!depois da section do menu>
</section>
<div class="bloco">
      <section class="canecas">
            <h2>Canecas</h2>
            <ol>
                  <li>
                        <a href="caneca01.html">
                              <figure>
                                    <img class="imagens" src="css/img/caneca/01.png">
                                    <figcaption>Coelho R$20,00</figcaption>
                              </figure>
                        </a>
                  </li>
            </ol>
      </section>
      <section class="camisas">
            <h2>Camisas</h2>
            <ol>
                  <li>
                        <a href="camisa01.html">
                              <img class="imagens" src="css/img/camisas/01.png">
                              <figcaption>Camisa R$30,00</figcaption>
                        </a>
                  </li>
            </ol>
      </section>
</div>

Código fonte CSS:

Assista ao vídeo:

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.