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 message, and encourage them to take a desired action by signing up. It includes a prominent call to action headline, supporting text, and a sign-up form with plenty of room for action-oriented text.

<section class="py-5 bg-light">
	<div class="container">
		<div class="row justify-content-center align-items-center">
			<div class="col-lg-6 mb-5 mb-lg-0">
				<div class="pe-lg-3">
					<h1 class="display-3 fw-bold mb-2 mb-md-3">The Future of Web Design Begins 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 consectetur adipiscing elit semper.</p>
				</div>
				<div class="row">
					<div class="col-sm-6 mb-3 mb-sm-0">
						<div class="d-flex">
							<div class="flex-shrink-0">
								<div class="text-primary">
									<svg class="bi bi-chat-right-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
									<path d="M14 0a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"></path></svg>
								</div>
							</div>
							<div class="ms-3">
								<h6 class="mb-0">24/7</h6>
								<p>Customer Support</p>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="d-flex">
							<div class="text-primary">
								<svg class="bi bi-shield-fill-check" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
								<path d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647z" fill-rule="evenodd"></path></svg>
							</div>
							<div class="ms-3">
								<h6 class="mb-0">99.99%</h6>
								<p>Uptime Guarantee</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="ps-lg-5">
					<div class="card shadow-lg border border-primary text-white text-left h-100">
						<div class="card-body bg-primary p-4 p-xl-5">
							<h2 class="pb-3 text-center">Take Web Design to the Next Level - Start Today!</h2>
							<form>
								<div class="mb-3">
									<label class="form-label" for="name">Full Name</label> <input class="form-control" id="name" type="text">
								</div>
								<div class="mb-3">
									<label class="form-label" for="email">Email Address</label> <input class="form-control" id="email" type="email">
								</div>
								<div class="mb-3">
									<label class="form-label" for="phone">Phone Number</label> <input class="form-control" id="phone" type="number">
								</div><button class="btn btn-dark btn-lg" type="submit">Get Started</button>
								<p class="mt-3 small fst-italic text-light">*Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top