Footer: Style 4

Start building fast, beautiful and modern looking websites in no time using our theme.

Example


<footer id="footer" class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="row cols-xs-space cols-sm-space cols-md-space">
                <div class="col-md-4 col-lg-2">
                    <div class="col">
                       <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
                          Main menu
                       </h4>

                       <ul class="footer-links">
                            <li>
                                <a href="#" title="Home">
                                    Home
                                </a>
                            </li>
                            <li>
                                <a href="#" title="About us">
                                    About us
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Services">
                                    Services
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Blog">
                                    Blog
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Contact">
                                    Contact
                                </a>
                            </li>
                        </ul>
                     </div>
                </div>

                <div class="col-md-4 col-lg-2">
                    <div class="col">
                       <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
                           Help and support
                       </h4>

                       <ul class="footer-links">
                            <li>
                                <a href="#" title="Help center">
                                    Help center
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Discussions">
                                    Discussions
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Contact support">
                                    Contact support
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Knowledge center">
                                    Knowledge center
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Jobs">
                                    FAQ
                                </a>
                            </li>
                        </ul>
                     </div>
                </div>

                <div class="col-md-4 col-lg-3">
                    <div class="col">
                       <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
                           Our services
                       </h4>

                       <ul class="footer-links">
                            <li>
                                <a href="#" title="Help center">
                                    Concept
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Discussions">
                                    UI/UX design
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Contact support">
                                    Web developement
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Knowledge center">
                                    Custom solutions
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Jobs">
                                    Branding
                                </a>
                            </li>
                        </ul>
                     </div>
                </div>

                <span class="space-sm-only-3"></span>

                <div class="col-md-4 col-lg-2">
                    <div class="col">
                        <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
                            From the blog
                        </h4>

                        <ul class="footer-links">
                            <li>
                                <a href="#" title=""><?php echo $mediumTitle_1; ?></a>
                                <small class="footer-link-date">June 20, <?php echo date('Y'); ?></small>
                            </li>
                            <li class="">
                                <a href="#" title=""><?php echo $mediumTitle_2; ?></a>
                                <small class="footer-link-date">June 18, <?php echo date('Y'); ?></small>
                            </li>
                            <li class="">
                                <a href="#" title=""><?php echo $mediumTitle_3; ?></a>
                                <small class="footer-link-date">March 30, <?php echo date('Y'); ?></small>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-md-4 col-lg-3">
                    <div class="col">
                        <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
                            Check our feed
                        </h4>

                        <div class="photostream">
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                            <span class="photo-wrapper">
                                <a href="PATH_TO_IMAGE" data-fancybox>
                                    <img src="PATH_TO_IMAGE">
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer-bottom">
        <div class="container">
            <div class="row row-cols-xs-spaced flex flex-items-xs-middle">
                <div class="col col-sm-7 col-xs-12">
                    <div class="copyright text-xs-center text-sm-left">
                        Copyright © 2018                        <a href="#" target="_blank" title="Webpixels - Official Website">
                            <strong class="strong-400">Webpixels</strong>
                        </a> -
                        All rights reserved
                    </div>
                </div>
                <div class="col col-sm-5 col-xs-12">
                    <div class="text-xs-center text-sm-right">
                        <ul class="social-media social-media--style-1-v4">
                            <li>
                                <a href="#" class="facebook" target="_blank" data-toggle="tooltip" data-original-title="Facebook">
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="instagram" target="_blank" data-toggle="tooltip" data-original-title="Instagram">
                                    <i class="fa fa-instagram"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dribbble" target="_blank" data-toggle="tooltip" data-original-title="Dribbble">
                                    <i class="fa fa-dribbble"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dribbble" target="_blank" data-toggle="tooltip" data-original-title="Github">
                                    <i class="fa fa-github"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>