Curso de Design Responsivo Aula 15 Marcando e estilizando rodapé

Nessa vídeo aula vamos marcar todo nosso rodapé com HTML5 utilizando a tag padrão footer e realizar toda a estilização com CSS3.

Código HTML desenvolvido na vídeo aula

<div class="fundoVerdeFloresta">
            <footer class="conteudo limpa">
                <article class="caixa-g-3 caixa-m-3">
                    <div class="caixa">
                        <h4>Bobrinha</h4>
                        <ul>
                            <li>
                                <span class="icones iconeHome"></span>
                                <a href="http://www.bobrinha.com" title="Home Page">Site Oficial</a>
                            </li>
                            <li>
                                <span class="icones iconeHost"></span>
                                <a href="http://www.hostgator.com.br/1298.html" title="Hospedagem Profissional de Sites">Hospedagem Profissional</a>
                            </li>
                        </ul>
                    </div>
                </article>
                <article class="caixa-g-3 caixa-m-3">
                    <div class="caixa">
                        <h4>Siga-me</h4>
                        <ul>
                            <li>
                                <span class="icones iconeFacebook"></span>
                                <a href="https://www.facebook.com/bobrinhacursos" title="Acompanhe no Facebook">Facebook</a>
                            </li>
                            <li>
                                <span class="icones iconeYoutube"></span>
                                <a href="https://www.youtube.com/c/Bobrinha" title="Acompanhe no Youtube">Youtube</a>
                            </li>
                            <li>
                                <span class="icones iconeTwitter"></span>
                                <a href="https://twitter.com/bobrinhacursos" title="Acompanhe no Twitter">Twitter</a>
                            </li>
                        </ul>
                    </div>
                </article>
                <article class="caixa-g-3 caixa-m-3">
                    <div class="caixa">
                        <h4>Newslleter</h4>
                        <p>Faça parte da nossa lista de emails e receba nossas atualizaçãos</p>
                        <form name="newsletter" method="post">
                            <input type="email" name="email" class="campoNewslleter">
                            <input type="submit" value="Enviar" name="enviar">
                        </form>
                    </div>
                </article>
                <article class="caixa-g-3 caixa-m-3">
                    <div class="caixa">
                        <h4>Denuncie</h4>
                        <p>Maus tratos e abandono de animais são crimes. Lei Federal nº 9.605 / 98</p>
                        <div class="numero">
                            <p>Ligue</p>
                            <span>181</span>
                        </div>
                    </div>
                </article>
            </footer>
        </div>

Código CSS desenvolvido na vídeo aula

.numero {
    color: #228b22;
    font-weight: bold;
    width: 120px;
    height: 120px;
    background-color: #99ff99;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin: 0 auto;
    transform: rotate(50deg);
    padding-top: 20px;
    animation: numero 10s infinite
}
@keyframes numero{
    0% {
        color: #228b22
    }
    25% {
        color: #00c161
    }
    75%{
        color: #00f400
    }
}
.numero p {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 0
}
.numero span {
    font-size: 4em
}


.campoNewslleter {
    padding: 5px;
    background: #33CC33;
    border: 1px solid #006600
}

.icones {
    float: left;
    width: 28px;
    height: 26px;
    background-image: url(../imagens/icones.png)
}
.iconeFacebook {
    background-position:  0 0
}
.iconeYoutube {
    background-position: 28px 0
}
.iconeTwitter {
    background-position: 112px 0
}
.iconeHome {
    background-position: 140px 26px
}
.iconeHost {
    background-position: 110px 26px
}

footer {
    font-size: 0.9em
}
footer h4 {
    font-size: 1.3em;
    text-transform: uppercase;
    padding-bottom: 20px;
    margin: 20px;
    border-bottom: 1px solid #008040
}
footer ul {
    text-indent: 10px
}
footer ul li {
    text-align: left;
    height: 40px
}
footer ul li a {
   color: #33CC33
}
footer ul li a:hover{
    font-weight: bold;
    color: #99ff99;
    text-decoration: underline
}

 



Hospedagem Profissional de Sites