Template com CSS Grid - #4 Aside e Footer

Nesse tutorial desenvolveremos a barra lateral, aside, e o rodapé do nosso template, footer.

Footer e Aside com HTML e CSS

index.html

No html criaremos as seções de aside e footer:

<aside>
    <div class="subjects">
        <p><strong>Assuntos do momento</strong></p>
        <ol>
            <li>Novidades</li>
            <li>Esporte</li>
            <li>Casas</li>
            <li>Famosos</li>
            <li>Famosos</li>
            <li>Famosos</li>
        </ol>
    </div>

    <div class="ads-aside">
        <img src="./img/ads-aside.jpg" alt="">
    </div>
</aside>


<footer>
    <p>
    Endereço <br>
    Telefone <br>
    Email</p>
</footer>

lib/css/style.css

Na nossa folha de estilos realizaremos o design dos elementos criados no aside e no footer:

aside{grid-area: aside;}
    .subjects{margin-top: 10px; text-align: center;}
    .subjects ol{column-count: 2; line-height: 30px;}
    .ads-aside{margin-top: 20px;}

footer{
    grid-area: footer;
    box-shadow: 0 10px 20px #ccc;
    background: #eee;
    padding: 20px 0;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    margin: 30px -5% -10px -5%;
}

Não esqueça de incluir também o footer na div container:

.container{
    display:grid;
    grid-template-columns: 65% 30%;
    justify-content: space-between;
    padding: 10px 5%;
    grid-template-areas:
        "header header"
        "main aside"
        "footer footer"
    ;
}

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de ajuda nos códigos? webdesignemfoco@gmail.com