Footer: Default

<footer class="footer">
    <div class="top">
        <div class="wrap">Footer Layout Top</div>
    </div>
    <div class="main">
        <div class="wrap">Footer Layout Main</div>
    </div>
    <div class="bottom">
        <div class="wrap">Footer Layout Bottom</div>
    </div>
</footer>

<br><br>

<footer class="footer center">
    <div class="main">
        <div class="wrap">
            <p class="title footer">Atomic Package</p>
            <p class="subTitle footer">APBCSS UI Kit for everyone to share and enjoy.</p>
        </div>
    </div>
</footer>

<br><br>

<footer class="footer">
    <div class="main center">
        <div class="wrap">
            <ul class="menuList align">
                <li>Features</li>
                <li>Pricing</li>
                <li>About</li>
                <li>Facebook</li>
                <li>Twitter</li>
            </ul>
        </div>
    </div>
    <div class="bottom gray center">
        <div class="wrap">
            <p class="subTitle footer">APBCSS UI Kit for everyone to share and enjoy.</p>
        </div>
    </div>
</footer>

<br><br>

<footer class="footer">
    <div class="main flex">
        <div class="wrap">
            <div class="box menuList">
                <dl class="menuList">
                    <dt>PRODUCT</dt>
                    <dd>
                        <a href="">Tour</a>
                    </dd>
                    <dd>
                        <a href="">Features</a>
                    </dd>
                    <dd>
                        <a href="">Pricing</a>
                    </dd>
                    <dd>
                        <a href="">Terms</a>
                    </dd>
                </dl>

                <dl class="menuList">
                    <dt>CUSTOMERS</dt>
                    <dd>
                        <a href="">Sign in</a>
                    </dd>
                    <dd>
                        <a href="">Support</a>
                    </dd>
                    <dd>
                        <a href="">FAQs</a>
                    </dd>
                    <dd>
                        <a href="">Testimonials</a>
                    </dd>
                </dl>

                <dl class="menuList">
                    <dt>
                        <a href="">ABOUT US</a>
                    </dt>
                    <dd>
                        <a href="">Our Story</a>
                    </dd>
                    <dd>
                        <a href="">Offices</a>
                    </dd>
                    <dd>
                        <a href="">Press</a>
                    </dd>
                </dl>

                <dl class="menuList">
                    <dt>
                        <a href="">FOLLOW US</a>
                    </dt>
                    <dd>
                        <a href="">Facebook</a>
                    </dd>
                    <dd>
                        <a href="">Twitter</a>
                    </dd>
                    <dd>
                        <a href="">Tour</a>
                    </dd>
                    <dd>
                        <a href="">Pinterest</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="wrap right">
            <p class="btn large"><a href="">Default</a></p>
        </div>
    </div>
    <div class="bottom">
        <div class="wrap flex">
            <h4 class="title">Awesome</h4>
            <ul class="textList align ml-40">
                <li>
                    <a href="">Privacy</a>
                </li>
                <li>・</li>
                <li>
                    <a href="">TSA</a>
                </li>
                <li>・</li>
                <li>
                    <p class="copyright">© 2017 Atomic Package</p>
                </li>
            </ul>
        </div>
    </div>
</footer>

<br><br>

<footer class="footer">
    <div class="main center">
        <div class="wrap">
            <p class="title footer">Atomic Package</p>
            <ul class="menuList align">
                <li>Features</li>
                <li>Pricing</li>
                <li>About</li>
                <li>Facebook</li>
                <li>Twitter</li>
            </ul>
        </div>
    </div>
    <div class="bottom">
        <div class="wrap">
            <p class="copyright center">© 2017 Atomic Package</p>
        </div>
    </div>
</footer>