Bootstrap Templates - Features - 5

Bootstrap Templates - Features - 5 lets you display the main features of your product on your website. The template is fully responsive and was built using the Bootstrap 4 framework.

The design and PSD for this template was provided by Designmodo, I have simply written the HTML & CSS for their design. If you would like to download the PSD you can do so here https://designmodo.com/startup/sources/

For a live preview of this template click here.

Template Requirements

• Bootstrap 4
• Font awesome 4.7

Implementation

For this to work you must meet the requirements listed above.

To make it as easy as possible to incorporate my templates into your own website design I've created two snippet files which you can view at the bottom of this post. The first snippet has the HTML code and the second one has the CSS code. To add these to your website begin by copying the HTML code and pasting it into your websites html file. Finally copy the CSS code and paste it into your websites stylesheet. That's all, Now the block should be working.

HTML Code:

	<!-- Features 5 -->
	<section class="features-5">
	<div class="container h-100 d-flex align-items-center text-center">
	<div class="row">
	<div class="col-12 pb-4">
	<h2 class="pb-4">Create Something Amazing</h2>
	<h3 class="mx-auto">We have created a new product that will help designers, developers and companies create websites for their startups quickly and easily.</h3>
	</div>
	<div class="col-12 col-md-4 py-2">
	<div class="card rounded-top">
	<img src="https://i.imgur.com/diYHXAd.png" class="img-fluid rounded-top" alt="">
	<div class="py-4">
	<h4 class="py-2">Better Conversions</h4>
	<p class="px-5">Generate leads and sales with our effective call-to-action blocks from buttons to testimonials to forms.</p>
	</div>
	</div>
	</div>
	<div class="col-12 col-md-4 py-2">
	<div class="card rounded-top">
	<img src="https://i.imgur.com/LbzyLOR.png" class="img-fluid rounded-top" alt="">
	<div class="py-4">
	<h4 class="py-2">Committed Support</h4>
	<p class="px-5">We are here for you. Our dedicated team is committed in providing excellent support.<br><br></p>
	</div>
	</div>
	</div>
	<div class="col-12 col-md-4 py-2">
	<div class="card rounded-top">
	<img src="https://i.imgur.com/pVebqZk.png" class="img-fluid rounded-top" alt="">
	<div class="py-4"">
	<h4 class="py-2">Designed to Impress</h4>
	<p class="px-5">Carefully crafted precise design, with harmonious typography and perfect padding.<br><br></p>
	</div>
	</div>
	</div>
	<div class="col-12 pt-4">
	<a href="https://www.learnwd.com/"><button type="button" class="btn btn-primary">Get Started With Startup</button></a>
	</div>
	</div>
	</div>
	</section>

view raw Bootstrap-Templates-Features-5.html hosted with ❤ by GitHub

CSS Code:

	/* start of features 5 */
	.features-5 {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	background: #e2f1f9;
	background-size: cover;
	background-position: center;
	overflow-x: hidden;
	padding: 100px 0;
	color: #141414;
	}
	.features-5 .card {
	margin: 20px 0;
	background: #ffffff;
	}
	.features-5 h2 {
	font-size: 2.625rem;
	font-weight: 400;
	}
	.features-5 h3 {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.4;
	opacity: 0.7;
	}
	.features-5 h4 {
	font-size: 1.75rem;
	color: #ff0000;
	}
	.features-5 p {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 1.125rem;
	font-weight: 300;
	opacity: 0.7;
	}
	.features-5 .btn {
	padding: 16px 38px;
	background: #ff0000;
	border: 1px solid #ff0000;
	}
	.features-5 .btn:hover {
	background: #0370f7;
	border: 1px solid #0370f7;
	}
	.rounded-top {
	border-top-left-radius: 0.5rem!important;
	border-top-right-radius: 0.5rem!important;
	}
	@media (min-width: 992px) {
	.features-5 {
	height: 100vh;
	min-height: 850px;
	padding-top: 0;
	padding-bottom: 0;
	}
	}
	@media (min-width: 768px) {
	.features-5 h3 {
	width: 50%;
	}
	}
	/* end of features 5 */

view raw Bootstrap-Templates-Features-5.css hosted with ❤ by GitHub