Struggling with frontend development and creating a layout in html, css3, and bootstrap 4? I've managed to incorporate a subtle animation in the background (https://codepen.io/mohaiman/pen/MQqMyo) but now facing issues with overlap when adding a footer div. Could it be a positioning problem? Check out the attached image and share your valuable insights.
<div class="page-header image" data-parallax="true" style="background-image: url('./assets/eCommerce_service.png');">
<div class="filter"></div>
<br>
<div class="container-home">
<div class="row">
<div class="mx-auto col-md-8 col-lg-6">
<div class="motto text-center">
<img src="assets/logo.png" class="d-block img-fluid">
</div>
</div>
<div class="mx-auto col-md-8">
<div class="motto text-center">
<h1 class="presentation-title presentation-font">WEBBNET DIGITAL</h1>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdjOF6IWFyQxQ-n1WKfUzpyrqYN2gU4iexFAsz6gqrADIioXA/viewform"
class="btn btn-round" target="_blank"><i class="fa fa-play">
</i>Get free session</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="section section-about-us area">
<div class="container">
<div class="row">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="title"><strong>Kolkata's Most <span style="color:#de6b28">Trendiest</span> Agency</strong></h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-7 mx-auto">
<p>Webbnet Digital is the most creative and trendiest digital marketing agency of Kolkata. We offer some of the highest demanding motion
graphics logos, posters banners and all sorts of online promotion.
</p>
</div>
<div class="col-sm-12 col-md-3 ml-auto margin">
<img src="assets/seo_home.png" class="img-rounded img-responsive">
</div>
</div>
</div>
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>