Footer

There are 6 predefined footers.

Footer 1

HTML example:

 <!--
    START: Footer

    Additional Classes:
        .nk-footer-transparent
-->
<footer class="nk-footer">
    <div class="nk-footer-cont">
        <div class="container text-center">
            <div class="nk-social">
                <ul>
                    <li><a class="nk-social-twitter" href="https://twitter.com/"><span><span class="nk-social-front fa fa-twitter"></span><span class="nk-social-back fa fa-twitter"></span></span></a></li>
                    <li><a class="nk-social-facebook" href="https://www.facebook.com/"><span><span class="nk-social-front fa fa-facebook"></span><span class="nk-social-back fa fa-facebook"></span></span></a></li>
                    <li><a class="nk-social-dribbble" href="https://dribbble.com/"><span><span class="nk-social-front fa fa-dribbble"></span><span class="nk-social-back fa fa-dribbble"></span></span></a></li>
                    <li><a class="nk-social-instagram" href="https://www.instagram.com/"><span><span class="nk-social-front fa fa-instagram"></span><span class="nk-social-back fa fa-instagram"></span></span></a></li>
                    <li><a class="nk-social-behance" href="https://behance.com/"><span><span class="nk-social-front fa fa-behance"></span><span class="nk-social-back fa fa-behance"></span></span></a></li>
                </ul>
            </div>

            <div class="nk-footer-text">
                <p>2018 © Design by Unvab. Code by nK</p>
            </div>
        </div>
    </div>
</footer>

Footer 2

HTML example:

 <!--
    START: Footer

    Additional Classes:
        .nk-footer-transparent
-->
<footer class="nk-footer" style="background-color: #fff;">
    <div class="nk-footer-cont nk-footer-cont-md">
        <div class="container text-center">
            <div class="row vertical-gap sm-gap align-items-center">
                <div class="col-lg-5 order-lg-3 text-lg-right">
                    <div class="nk-social">
                        <ul>
                            <li><a class="nk-social-twitter" href="https://twitter.com/"><span><span class="nk-social-front fa fa-twitter"></span><span class="nk-social-back fa fa-twitter"></span></span></a></li>
                            <li><a class="nk-social-facebook" href="https://www.facebook.com/"><span><span class="nk-social-front fa fa-facebook"></span><span class="nk-social-back fa fa-facebook"></span></span></a></li>
                            <li><a class="nk-social-dribbble" href="https://dribbble.com/"><span><span class="nk-social-front fa fa-dribbble"></span><span class="nk-social-back fa fa-dribbble"></span></span></a></li>
                            <li><a class="nk-social-instagram" href="https://www.instagram.com/"><span><span class="nk-social-front fa fa-instagram"></span><span class="nk-social-back fa fa-instagram"></span></span></a></li>
                            <li><a class="nk-social-behance" href="https://behance.com/"><span><span class="nk-social-front fa fa-behance"></span><span class="nk-social-back fa fa-behance"></span></span></a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-5 text-lg-left">
                    <div class="nk-footer-text">
                        <p>2018 © Design by Unvab. Code by nK</p>
                    </div>
                </div>

                <div class="col-lg-2">
                    <a class="nk-footer-scroll-top-btn-2 nk-anchor " href="#top">
                        Go To Top
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>

Footer 3

HTML example:

 <!--
    START: Footer

    Additional Classes:
        .nk-footer-transparent
-->
<footer class="nk-footer" style="background-color: #101010;">
    <div class="nk-footer-cont nk-footer-cont-md">
        <div class="container text-center">
            <div class="row vertical-gap sm-gap align-items-center">
                <div class="col-lg-5 order-lg-3 text-lg-right">
                    <div class="nk-social text-gray-1">
                        <ul>
                            <li><a class="nk-social-twitter" href="https://twitter.com/"><span><span class="nk-social-front fa fa-twitter"></span><span class="nk-social-back fa fa-twitter"></span></span></a></li>
                            <li><a class="nk-social-facebook" href="https://www.facebook.com/"><span><span class="nk-social-front fa fa-facebook"></span><span class="nk-social-back fa fa-facebook"></span></span></a></li>
                            <li><a class="nk-social-dribbble" href="https://dribbble.com/"><span><span class="nk-social-front fa fa-dribbble"></span><span class="nk-social-back fa fa-dribbble"></span></span></a></li>
                            <li><a class="nk-social-instagram" href="https://www.instagram.com/"><span><span class="nk-social-front fa fa-instagram"></span><span class="nk-social-back fa fa-instagram"></span></span></a></li>
                            <li><a class="nk-social-behance" href="https://behance.com/"><span><span class="nk-social-front fa fa-behance"></span><span class="nk-social-back fa fa-behance"></span></span></a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-5 text-lg-left">
                    <div class="nk-footer-text text-gray">
                        <a href="#" class="nk-btn nk-btn-no-bg text-white mt-10"><span class="pe-7s-download"></span> Download Resume</a>
                    </div>
                </div>

                <div class="col-lg-2">
                    <a class="nk-footer-scroll-top-btn-2 nk-anchor  text-gray-1" href="#top">
                        Go To Top
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>

Footer 4

HTML example:

 <!--
    START: Footer

    Additional Classes:
        .nk-footer-transparent
-->
<footer class="nk-footer">
    <div class="nk-footer-widgets text-gray">
        <div class="container">
            <div class="row vertical-gap">
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h3 class="h2 ">Say Hi!</h3>
                        <p class="mb-5">
                            <a href="#">[email protected]</a>
                        </p>
                        <p>
                            +44 987 065 901
                        </p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title">The Agency</h4>
                        <div class="nk-links-list text-gray">
                            <ul>
                                <li><a href="#">Projects</a></li>
                                <li><a href="#">News</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Events</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">Career</a></li>
                                <li><a href="#">Legals</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title">Follow Us</h4>
                        <div class="nk-social-2 text-gray">
                            <ul>
                                <li><a class="nk-social-facebook" href="https://www.facebook.com/"><span><span class="nk-social-front">Facebook</span><span class="nk-social-back">Facebook</span></span></a></li>
                                <li><a class="nk-social-dribbble" href="https://dribbble.com/"><span><span class="nk-social-front">Dribbble</span><span class="nk-social-back">Dribbble</span></span></a></li>
                                <li><a class="nk-social-twitter" href="https://twitter.com/"><span><span class="nk-social-front">Twitter</span><span class="nk-social-back">Twitter</span></span></a></li>
                                <li><a class="nk-social-behance" href="https://behance.com/"><span><span class="nk-social-front">Behance</span><span class="nk-social-back">Behance</span></span></a></li>
                                <li><a class="nk-social-instagram" href="https://www.instagram.com/"><span><span class="nk-social-front">Instagram</span><span class="nk-social-back">Instagram</span></span></a></li>
                                <li><a class="nk-social-pinterest" href="https://pinterest.com/"><span><span class="nk-social-front">Pinterest</span><span class="nk-social-back">Pinterest</span></span></a></li>
                                <li><a class="nk-social-linkedin" href="#"><span><span class="nk-social-front">LinkedIn</span><span class="nk-social-back">LinkedIn</span></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title">Copyright</h4>
                        <p>2018 © Design by Unvab. Code by nK</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Footer 5

HTML example:

 <!--
    START: Footer

    Additional Classes:
        .nk-footer-transparent
-->
<footer class="nk-footer" style="background-color: #101010;">
    <div class="nk-footer-widgets text-gray">
        <div class="container">
            <div class="row vertical-gap">
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title text-gray-1">Los Angeles</h4>
                        <p class="mb-7">
                            145 Oliveshka Street, <br>
                            Los Angeles, LA 90003
                        </p>
                        <p class="mb-7">
                            +44 987 065 901
                        </p>
                        <p>
                            [email protected]
                        </p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title text-gray-1">San Francisco</h4>
                        <p class="mb-7">
                            210 Pier Street, <br>
                            San Francisco, CA 94111
                        </p>
                        <p class="mb-7">
                            +44 987 065 902
                        </p>
                        <p>
                            [email protected]
                        </p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title text-gray-1">New York</h4>
                        <p class="mb-7">
                            711 Snow Street, <br>
                            New York, NY 10014
                        </p>
                        <p class="mb-7">
                            +44 987 065 903
                        </p>
                        <p>
                            [email protected]
                        </p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title text-gray-1">Follow Us</h4>
                        <div class="nk-social-2 text-gray">
                            <ul>
                                <li><a class="nk-social-facebook" href="https://www.facebook.com/"><span><span class="nk-social-front">Facebook</span><span class="nk-social-back">Facebook</span></span></a></li>
                                <li><a class="nk-social-dribbble" href="https://dribbble.com/"><span><span class="nk-social-front">Dribbble</span><span class="nk-social-back">Dribbble</span></span></a></li>
                                <li><a class="nk-social-twitter" href="https://twitter.com/"><span><span class="nk-social-front">Twitter</span><span class="nk-social-back">Twitter</span></span></a></li>
                                <li><a class="nk-social-behance" href="https://behance.com/"><span><span class="nk-social-front">Behance</span><span class="nk-social-back">Behance</span></span></a></li>
                                <li><a class="nk-social-instagram" href="https://www.instagram.com/"><span><span class="nk-social-front">Instagram</span><span class="nk-social-back">Instagram</span></span></a></li>
                                <li><a class="nk-social-pinterest" href="https://pinterest.com/"><span><span class="nk-social-front">Pinterest</span><span class="nk-social-back">Pinterest</span></span></a></li>
                                <li><a class="nk-social-linkedin" href="#"><span><span class="nk-social-front">LinkedIn</span><span class="nk-social-back">LinkedIn</span></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="nk-footer-cont nk-footer-cont-sm">
        <a class="nk-footer-scroll-top-btn nk-anchor  text-gray-1" href="#top">
            <span class="pe-7s-angle-up"></span>
        </a>
        
        <div class="container text-center">
            <div class="nk-footer-text text-gray">
                <p>2018 © Design by Unvab. Code by nK</p>
            </div>
        </div>
    </div>
</footer>

Footer 6

HTML example:

 <!--
    START: Footer

    Additional Classes:
        .nk-footer-transparent
-->
<footer class="nk-footer">
    <div class="bg-image">
        <img src="assets/images/footer-1.jpg" alt="" class="jarallax-img">
        <div class="bg-image-overlay" style="background-color: rgba(12, 12, 12, 0.9);"></div>
    </div>

    <div class="nk-footer-widgets text-white">
        <div class="container">
            <div class="row vertical-gap">
                <div class="col-lg-4">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title text-white">About Us</h4>
                        <p class="nk-heading-font">
                            Aenean mattis augue in arcu tempor bibendum. Nam euismod facilisis magna, quis pharetra turpis molestie eu. Integer feugiat arcu sit amet leo ullamcorper feugiat efficitur.
                        </p>
                        <div class="nk-social nk-social-left text-white">
                            <ul>
                                <li><a class="nk-social-twitter" href="https://twitter.com/"><span><span class="nk-social-front fa fa-twitter"></span><span class="nk-social-back fa fa-twitter"></span></span></a></li>
                                <li><a class="nk-social-facebook" href="https://www.facebook.com/"><span><span class="nk-social-front fa fa-facebook"></span><span class="nk-social-back fa fa-facebook"></span></span></a></li>
                                <li><a class="nk-social-dribbble" href="https://dribbble.com/"><span><span class="nk-social-front fa fa-dribbble"></span><span class="nk-social-back fa fa-dribbble"></span></span></a></li>
                                <li><a class="nk-social-instagram" href="https://www.instagram.com/"><span><span class="nk-social-front fa fa-instagram"></span><span class="nk-social-back fa fa-instagram"></span></span></a></li>
                                <li><a class="nk-social-behance" href="https://behance.com/"><span><span class="nk-social-front fa fa-behance"></span><span class="nk-social-back fa fa-behance"></span></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title text-white">Latest Tweets</h4>
                        <div class="nk-twitter-list" data-twitter-count="2"></div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="nk-widget">
                        <h4 class="nk-widget-title text-white">Instagram</h4>
                        <div class="nk-instagram row xs-gap vertical-gap multi-column"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="nk-footer-cont nk-footer-cont-sm">
        <div class="container text-center">
            <div class="nk-footer-text text-white">
                <p>2018 &copy; Design by Unvab. Code by nK</p>
            </div>
        </div>
    </div>
</footer>

 

Was this page helpful?