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 an explainer video. The play button is designed to capture the user’s attention and encourage them to take a desired action. It is built using Bootstrap for consistent styling.

<section class="py-5 min-vh-100 d-flex align-items-center position-relative">
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-lg-7">
				<div class="text-center">
					<h1 class="display-3 fw-bold">For Quick Designing, there is <span class="text-primary">Bootstrap</span></h1>
					<p class="lead py-3 py-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat erat quis pulvinar consectetur adipiscing elit semper.</p><a class="mx-auto bg-primary text-white d-flex align-items-center justify-content-center rounded-circle" href="" style="width: 60px;height: 60px;"><svg class="bi bi-play-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
					<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path></svg></a>
				</div>
			</div>
		</div><a class="position-absolute bottom-0 start-50 translate-middle text-primary" href="#scrollToContent"><svg class="bi bi-arrow-down" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
		<path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" fill-rule="evenodd"></path></svg></a>
	</div>
</section>
To top