Front – Multipurpose Responsive Template

Learn More

HTML:

          
            <!-- Hero Section -->
            <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
              <!-- Apply your Parallax background image here -->
              <div class="divimage dzsparallaxer--target" style="height: 135%; background-image: url(../../assets/img/1920x1080/img6.jpg);"></div>

              <!-- Content -->
              <div class="d-lg-flex align-items-lg-center height-100vh--lg">
                <div class="container space-3 space-0--lg mt-lg-5">
                  <div class="w-md-75 w-lg-50">
                    <h1 class="display-4 font-size-48--md-down text-white mb-6">Front – Multipurpose Responsive Template</h1>

                    <a class="js-go-to btn btn-light btn-wide" href="javascript:;"
                       data-target="#caseStudiesContent"
                       data-type="static">
                      Learn More
                    </a>
                  </div>
                </div>
              </div>
              <!-- End Content -->
            </div>
            <!-- End Hero Section -->

CSS library:

        
          <link rel="stylesheet" href="assets/vendor/dzsparallaxer/dzsparallaxer.css">

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>