Announcing a free plan for small teams

Free design collaboration for freelancers and startups.

HTML:

          
            <!-- Hero Section -->
            <div class="u-space-3-top u-space-0--lg position-relative">
              <div class="d-lg-flex align-items-lg-center min-height-100vh--lg position-relative">
                <div class="container u-space-2 u-space-bottom-0--lg">
                  <!-- Blog -->
                  <div class="w-lg-40">
                    <!-- Link -->
                    <div class="u-space-3-bottom">
                      <a class="text-secondary" href="#">
                        <span class="fa fa-arrow-left small mr-2"></span>
                        Go Back
                      </a>
                    </div>
                    <!-- End Link -->

                    <!-- Author -->
                    <div class="media align-items-center mb-4">
                      <div class="d-flex mr-3">
                        <img class="img-fluid u-sm-avatar rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <h4 class="d-inline-block mb-0">
                          <a class="d-block h6 mb-0" href="#">Andrea Gard</a>
                        </h4>
                      </div>
                    </div>
                    <!-- End Author -->

                    <!-- Info -->
                    <div class="mb-4">
                      <h1 class="text-primary font-weight-bold">Announcing a free plan for small teams</h1>
                      <p class="lead">Free design collaboration for freelancers and startups.</p>
                    </div>
                    <!-- End Info -->
                  </div>
                  <!-- End Blog -->
                </div>

                <!-- Sidebar Image -->
                <div class="col-lg-6 position-absolute-top-right-0--lg px-lg-0">
                  <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll min-height-100vh--lg"
                       data-options='{direction: "normal"}'>
                    <!-- Apply your Parallax background image here -->
                    <div class="divimage dzsparallaxer--target" style="height: 130%; background-image: url(../../assets/img/900x900/img1.jpg);"></div>
                  </div>
                </div>
                <!-- End Sidebar Image -->
              </div>
            </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>