Curso de Design Responsivo Aula 12 Criando sessão destaque

Nessa vídeo aula vamos criar a sessão de destaque do nosso projeto, utilizaremos poucas marcação, mas muitos estilos já usados e novos serão aplicados, além de ver o mesmo resultado em um site real online.

Código HTML desenvolvido na vídeo aula

<section class="fundoVerdeGrama limpa">
            <div class="conteudo">
                <div class="caixa-g-6 caixa-m-6">
                    <div class="caixa destaque fundoDestaque1">
                        <h2>Como podemos mudar o mundo?</h2>
                        <h3>Com uma atitude real de carinho e amor de cada vez!</h3>
                        <span>
                            <a href="#" title="Pedir castração">Pedir Castração</a>
                        </span>
                    </div>
                </div>
                <div class="caixa-g-6 caixa-m-6">
                    <div class="caixa destaque fundoDestaque2">
                        <h2>Castrar seu animal</h2>
                        <h3>É um ato de amor e responsabilidade!</h3>
                        <span>
                            <a href="#" title="Pedir castração">Pedir Castração</a>
                        </span>
                    </div>
                </div>
            </div>
        </section>

Código CSS desenvolvido na vídeo aula

.destaque {
    border: 5px solid #30CF2D;
    min-height: 400px
}
.destaque h2,h3 {
    margin-left: 20px;
    font-weight: bold;
    text-align: left;
    line-height: 1.2;
    text-shadow: 2px 2px #330033
}
.destaque h2 {
    position: absolute;
    top: 10px;
    font-size: 2em
}
.destaque h3 {
    position: absolute;
    bottom: 70px;
    font-size: 1.3em
}
.fundoDestaque1 {
    background-image: url(../uploads/fundoDestaque1.jpg);
    background-size: 100% 100%
}
.fundoDestaque2 {
   background-image: url(../uploads/fundoDestaque2.png);
   background-repeat: no-repeat;
   background-size: 80%;
   background-position: 45px 120px
}
.destaque span {
    position: absolute;
    left: 0;
    bottom: 0;
    display: table;
    width: 100%;
    height: 60px;
    background-color: rgba(0,0,0,.3)
}
.destaque span a {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
    color: #99FF00;
    display: table-cell;
    vertical-align: middle
}
.destaque span a:hover {
   background-color: rgba(0,0,0,.5) 
}

.fundoVerdeGrama {
    color: #99FF00;
    background-color: #019934
}

 



Hospedagem Profissional de Sites