{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-promo" %}
{% set title = "Promo Blocks 34" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body>
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    <!-- Promo Block -->
    <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall" data-options='{direction: "reverse", settings_mode_oneelement_max_offset: "150"}'>
      <div class="divimage dzsparallaxer--target w-100 g-bg-cover g-bg-black-opacity-0_3--after" style="height: 120%; background-image: url(../../../assets/img-temp/1920x1080/img52.jpg);"></div>

      <div class="container g-pt-100">
        <div class="row justify-content-between align-items-center">
          <div class="col-md-6 col-lg-7 g-mb-100">
            <!-- Content Info -->
            <div class="mb-5">
              <h1 class="g-color-white g-font-weight-600 g-font-size-50 mb-3">Fast. Flexible. Leaders.</h1>
              <p class="g-color-white g-font-size-18">Unify Marketing is a comprehensive, creation and management solution that helps business providers manage their shifts with complete accuracy. Our Unify management software Unify Marketing has earned us the position of market leaders for unscheduled business providers.</p>
            </div>
            <a class="btn u-btn-primary g-font-weight-500 g-font-size-12 text-uppercase g-px-25 g-py-13 mr-3" href="#!">
              Our Services
              <i class="g-pos-rel g-top-minus-1 ml-2 fa fa-angle-right"></i>
            </a>
            <a class="btn u-btn-black g-font-weight-500 g-font-size-12 text-uppercase g-px-25 g-py-13" href="#!">
              Our Works
              <i class="g-pos-rel g-top-minus-1 ml-2 fa fa-angle-right"></i>
            </a>
            <!-- End Content Info -->
          </div>

          <div class="col-md-6 col-lg-4 g-mb-100">
            <!-- Join Form -->
            <form class="g-bg-white rounded g-px-30 g-py-40">
              <div class="text-center">
                <h2 class="h3 g-font-weight-600 g-mb-35">Join Unify Marketing</h2>
              </div>

              <input class="form-control rounded g-px-20 g-py-12 mb-3" type="text" placeholder="Your Name">
              <input class="form-control rounded g-px-20 g-py-12 mb-3" type="email" placeholder="Your Email">
              <input class="form-control rounded g-px-20 g-py-12 mb-3" type="text" placeholder="Your Password">

              <div class="g-mb-35">
                <button class="btn btn-block u-btn-primary g-font-weight-500 g-font-size-12 text-uppercase g-px-25 g-py-13" type="submit">Submit</button>
              </div>

              <div class="text-center mb-3">
                <h3 class="h5">Join with</h3>
              </div>

              <div class="row no-gutters">
                <div class="col">
                  <a class="btn btn-block u-btn-facebook g-font-weight-500 g-font-size-12 text-uppercase g-rounded-left-3 g-rounded-right-0 g-px-25 g-py-13" href="page-works-1.html">
                    <i class="mr-2 fa fa-facebook"></i>
                    Facebook
                  </a>
                </div>
                <div class="col">
                  <a class="btn btn-block u-btn-twitter g-font-weight-500 g-font-size-12 text-uppercase g-rounded-left-0 g-rounded-right-3 g-px-25 g-py-13" href="page-works-1.html">
                    <i class="mr-2 fa fa-twitter"></i>
                    Twitter
                  </a>
                </div>
              </div>
            </form>
            <!-- End Join Form -->
          </div>
        </div>
      </div>
    </section>
    <!-- End Promo Block -->

    {% include "html/assets/include/nunjucks/partials/blocks/content/content-demo-1.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
  <script src="{{ root }}assets/vendor/masonry/dist/masonry.pkgd.min.js"></script>
  <script src="{{ root }}assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>
  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.carousel.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of carousel
      $.HSCore.components.HSCarousel.init('.js-carousel');

      // initialization of masonry
      $('.masonry-grid').imagesLoaded().then(function () {
        $('.masonry-grid').masonry({
          columnWidth: '.masonry-grid-sizer',
          itemSelector: '.masonry-grid-item',
          percentPosition: true
        });
      });
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
  <!-- End JS Plugins Init. -->
</body>
</html>