Cover Hero with Stats

628 ViewsFreeFrontend.dev

This code snippet is for a simple hero section at the top of a website, built using Bootstrap for responsiveness and consistent styling. It features a prominently displayed featured image, a call to action message and button, and a showcase of company statistics. This code example is designed to capture the user’s attention and encourage them to take a desired action, while providing a sense of credibility.

<section class="py-5 bg-light">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-6 mb-4 mb-lg-0">
				<div class="pe-lg-3">
					<h1 class="display-3 fw-bold mb-4">Bring Your Ideas to Life with <span class="text-primary">Bootstrap</span></h1>
					<p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat erat quis pulvinar semper.</p>
				</div>
				<div class="d-grid d-sm-flex">
					<a class="btn btn-lg btn-primary me-2 mb-3 mb-sm-0" href="">Get Started</a> <a class="btn btn-lg btn-outline-primary" href="">Learn More</a>
				</div>
			</div>
			<div class="col-lg-6"><img alt="Image Description" class="img-fluid" src="https://freefrontend.dev/assets/square.png"></div>
		</div>
		<div class="row mt-5">
			<div class="col-sm-4 mb-3 mb-sm-0">
				<h2 class="display-5 fw-bold">50k+</h2>
				<p>Happy customers from accross 7 continents</p>
			</div>
			<div class="col-sm-4 mb-3 mb-sm-0">
				<h2 class="display-5 fw-bold">10...</h2>
				<p>Years of experience in web design</p>
			</div>
			<div class="col-sm-4">
				<h2 class="display-5 fw-bold">20k+</h2>
				<p>Users trust our code snippets</p>
			</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 […]