Curso Criando um Site do Zero - Aula 10 - Criando Anúncios

Nesta aula criaremos as divs dos anúncios. Os anúncios serão inseridos na main.

Os anúncios serão dispostos da seguinte forma, 03 colunas para desktop, 02 colunas para tablet e 01 coluna para smartphone.

Nosso html ficará da seguinte maneira:

<main>
    <div class="ind-anuncio">
        <div class="ind-anuncio-title">Carro 1</div>
        <div class="ind-anuncio-image"><img src="../images/anuncios/Fusca-Imagem.jpg" alt="Carro 1"></div>
        <div class="ind-anuncio-texto">Fusca 2015<br>Nova geração de veículos</div>
    </div>

    <div class="ind-anuncio">
        <div class="ind-anuncio-title">Carro 1</div>
        <div class="ind-anuncio-image"><img src="../images/anuncios/Fusca-Imagem.jpg" alt="Carro 1"></div>
        <div class="ind-anuncio-texto">Fusca 2015<br>Nova geração de veículos</div>
    </div>

    <div class="ind-anuncio">
        <div class="ind-anuncio-title">Carro 1</div>
        <div class="ind-anuncio-image"><img src="../images/anuncios/Fusca-Imagem.jpg" alt="Carro 1"></div>
        <div class="ind-anuncio-texto">Fusca 2015<br>Nova geração de veículos</div>
    </div>

    <div class="ind-anuncio">
        <div class="ind-anuncio-title">Carro 1</div>
        <div class="ind-anuncio-image"><img src="../images/anuncios/Fusca-Imagem.jpg" alt="Carro 1"></div>
        <div class="ind-anuncio-texto">Fusca 2015<br>Nova geração de veículos</div>
    </div>
</main>

Repare no código acima que temos uma div principal com a classe ind-anúncio. Dentro desta classe principal, temos uma div separada para o título, outra para a imagem e uma terceira para a descrição do anúncio.

Após criar os anúncios no html, estilizaremos esses anúncios no css. O código da estilização ficará da seguinte forma:

.ind-anuncio{float: left; font-family: Verdana,sans-serif; font-size: 16px; }
    .ind-anuncio-title{float: left; width: 100%; padding: 10px 0; text-align: center; color: #FFFFFF; background: #000000; font-weight: bold;}
    .ind-anuncio-image{float: left; width: 100%;}
    .ind-anuncio-image img{width: 100%; max-height: 150px;}
    .ind-anuncio-texto{float: left; width: 100%; padding: 10px 0; text-align: center; line-height: 25px;}

/*Smartphone*/
@media only screen and (max-width: 480px){
    .ind-anuncio{width: 95%; height: 200px; margin: 5px 2.5% 150px 2.5%;}
}

/*Tablet*/
@media only screen and (min-width: 481px) and (max-width: 768px){
    .ind-anuncio{width: 45%; height: 200px; margin: 20px 2.5% 100px 2.5%;}
}

/*Desktop*/
@media only screen and (min-width: 769px){
    .ind-anuncio{width: 20%; height: 300px; margin: 30px 2.5% 30px 2.5%;}
}

O resultado final do nosso anúncio ficará assim: