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>