Footer parallax

Footer documentation

  1. Home
  2. Footers
  3. Footer parallax

Variants

Base Parallax Minimal

Usage

<header> 
    ...
</header>
<div class="header-title"> 
    ...
</div>
<div class="footer-parallax-container"> 
    ...
</div>
<footer class="footer-sides footer-parallax">
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-md-3 footer-left">
                    <h4>CONTACTS</h4>
                    <ul class="fa-ul text-s">
                        <li><i class="fa-li fa fa-map-marker"></i> PO Box 16122, Collins Street West, Victoria 8007, United States.</li>
                        <li><i class="fa-li fa fa-envelope"></i> federico@pixor.it</li>
                        <li><i class="fa-li fa fa-mobile-phone"></i> (+39) 320 33022256</li>
                    </ul>
                </div>
                <div class="col-md-6 footer-center">
                    <div class="btn-group navbar-social">
                        <div class="btn-group social-group">
                            <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
                            <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
                            <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                            <a target="_blank" href="#"><i class="fa fa-youtube"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 footer-right">
                    <h4>ABOUT</h4>
                    <p>
                        Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam
                    </p>
                </div>
            </div>
            <div class="row copy-row">
                <div class="col-md-12 copy-text">
                    ALL RIGHT RESERVED | FRAMEWORK Y | ENVATO
                </div>
            </div>
        </div>
    </div>
    <!-- SCRIPTS AND STYLES HERE -->
</footer>

Main settings

Name Type Description
Parallax Mixed You must insert the page content into a container with class footer-parallax-container.
Example: 

<body>
    <header> 
        ... 
    </header>
    ...
    <div class="footer-parallax-container">
        <div class="section-empty">
            <div class="container content">
                ...
            </div>
        </div>
    </div>
</body>
Full width size CSS class To set a full width horizontal menu add class wide-area to navbar object. Example: <header><div class="navbar navbar-default over wide-area" role="navigation"> ... </div></header>.
Lists and icons

Lists and icons are part of list component. Complete documentation here