Cover Hero Page Block

678 ViewsFreeFrontend.dev

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>

Related Code Examples

Video Cover Snippet

This code snippet is a video cover section designed to capture the user’s attention, engage them with the content, and […]

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 […]

Cover Hero Component

This code snippet is a hero section that uses four icons to capture the user’s attention and encourage them to […]

Hero Section with Play Button

This code snippet represents a responsive, full-viewport hero section with a prominent play button used to showcase a video, typically […]

Hero with Sign-up Form

This free code snippet is a responsive, visually appealing hero section designed to capture the user’s attention, communicate the main […]

Cover Hero with Stats

This code snippet is for a simple hero section at the top of a website, built using Bootstrap for responsiveness […]