Video Cover Snippet


This code snippet is a video cover section designed to capture the user’s attention, engage them with the content, and encourage them to take a desired action. It is built with Bootstrap, featuring a prominent video play button, call to action message, and button, and is designed to be responsive to different screen sizes.

<section class="py-5 d-flex align-items-center position-relative min-vh-100">
	<div class="container">
		<div class="d-none d-lg-flex justify-content-center align-items-center col-md-6 position-absolute top-0 end-0" style="background-image: url(https://freefrontend.dev/assets/square.png);background-position: center;background-size:cover; height:100%;">
			<a class="bg-white d-flex align-items-center justify-content-center rounded-circle" href="" style="width:100px;height: 100px;"><svg class="bi bi-play-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" 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 class="row">
			<div class="col-lg-6">
				<h1 class="display-3 fw-bold mb-4">Our mission is to provide <span class="text-primary">Best</span> Services</h1><a class="btn btn-lg btn-primary" href="">Get Started</a>
			</div>
			<div class="col-lg-6">
				<div class="d-lg-none d-block position-relative mt-4">
					<img alt="" class="img-fluid" src="https://freefrontend.dev/assets/square.png">
					<div class="position-absolute translate-middle top-50 start-50">
						<a class="mx-auto bg-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>
		</div>
	</div>
</section>
To top