Announcing a free plan for small teams

<!-- 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: 130%; background-image: url(../../assets/img/1920x1080/img1.jpg);"></div>

  <!-- Content -->
  <div class="js-scroll-effect position-relative"
       data-scroll-effect="smoothFadeToBottom">
    <div class="container space-top-2 space-bottom-1 space-top-md-3">
      <div class="text-center w-lg-80 mx-auto space-bottom-2 space-bottom-md-3">
        <h1 class="display-4 font-size-md-down-5 text-white font-weight-normal mb-0">Announcing a free plan for small teams</h1>
      </div>

      <!-- Author -->
      <div class="text-center">
        <div class="u-avatar mx-auto mb-2">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
        </div>
        <span class="d-block">
          <a class="text-white h6 mb-0" href="#">Andrea Gard</a>
        </span>
      </div>
      <!-- End Author -->
    </div>
  </div>
  <!-- End Content -->
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.scroll-effect.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of scroll effect component
    $.HSCore.components.HSScrollEffect.init('.js-scroll-effect');
  });
</script>