Cover Hero Page Block


This code snippet represents a cover hero section designed to capture the user’s attention and encourage them to take a desired action. It uses Bootstrap to make it responsive, and has a dual background which can be composed of two different images or background colors. The call to action message is prominently displayed, along with an action-oriented button, making it easy for users to take the desired action.

<section class="py-5 d-flex align-items-center min-vh-100 position-relative">
	<div class="container">
		<div class="col-md-4 d-none d-md-block h-100 position-absolute top-0 start-0 bg-primary" style="z-index:-2;">
			 
		</div>
		<div class="col-md-8 h-100 position-absolute top-0 end-0 bg-light" style="z-index:-2;">
			 
		</div>
		<div class="row">
			<div class="col-xl-5 col-lg-6">
				<div class="bg-white p-5 shadow">
					<h1 class="display-3 fw-bold">Experience the power of <span class="text-primary">Bootstrap</span></h1>
					<p class="lead my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat erat quis pulvinar semper.</p><a class="btn btn-lg btn-primary" href="">Get Started</a>
				</div>
			</div>
		</div>
	</div>
</section>
To top