The footer

Again, the footer element contains a DIV that constrains the width of footer content. NAV elements are again used to contain the copyright link, and any other links appropriate for the footer.

<footer id='footer'>
    <div class='center responsive_page_width'>
        <nav class='float_left'>
            <a target='_blank' href='https://www.crossadaptive.com'>Copyright 2017 CrossAdaptive</a>
        </nav>
        <nav class='float_right'>
            <a href='#'>A footer link</a>
        </nav>
    </div>
</footer>

CSS

As previously discussed, the sizing and positioning of the footer is mainly orchastrated by the CSS related to the HTML5 Page Structure. Here the default line-height and colour is set. These are likely to be overriden by a user project.

BODY > FOOTER
{
    line-height:80px;
    color:#aaa;
}

Like before, flex is used to position elements within the footer.

BODY > FOOTER > DIV
{
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
}

Next