終於又來到了這個網頁的尾聲，用 footer 來結尾，想要呈現的樣式如下：

footer 的內容不用太多，但目標要明確，比如在 header 沒有呈現的補充資訊，
個人不太喜歡 header 跟 footer 有重複的資訊，比較希望有分工的概念，
這樣也可以幫助使用者不用一下子接收到太多的資訊，會有選擇障礙，使用上也不便利!!

HTML 如下

<div class="footer">
        <div class="container">
            <p class="footer-text">Copyright © 2019 MusicIsLife All Rights Reserved.</p>
            <ul class="footer-menu">
                <li><a href="#"><i class="fas fa-globe-americas"></i></a></li>
                <li><a href="#"><i class="fab fa-facebook"></i></a></li>
                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <div class="clearfix"></div>
            </ul>
        </div>
    </div>

沒有太多特別的地方，滿好理解的。

scss 如下

.footer {
    border-top: 3px solid $lead-color;
    height: 50px;
    background: #e0e0e0;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
這邊為了讓 footer 固定在下方，所以使用了 position，左右撐開，固定於下方。
    .footer-text {
        float: left;
        color: #333;
        font-size: 18xp;
        line-height: 50px;
    }

    .footer-menu {
        float: right;
        line-height: 50px;

        li {
            float: left;

            .fa-globe-americas,
            .fa-facebook,
            .fa-instagram,
            .fa-twitter {
                color: $lead-color;
                font-size: 18px;
                margin-right: 1em;
            }
        }


    }

}

其他沒有太多特別的地方，
codepen https://codepen.io/hnzxewqw/pen/wvwNyEK