Bootstrap Templates - Features - 3

Bootstrap Templates - Features - 3 is a block made to showcase the main features of a mobile application 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 3 -->
	<section class="features-3">
	<div class="container h-100 d-flex align-items-center text-center">
	<div class="row align-items-center justify-content-center">
	<div class="col-12">
	<h2 class="mx-auto">Take a Look at Our Awesome New Product</h2>
	</div>
	<div class="col-12 col-lg-3 text-lg-left order-3 order-lg-1">
	<h3 class="mb-5">Of course we haven’t forgotten about the responsive layout. Create a website with full mobile support.</h3>
	<button type="button" class="btn btn-primany"><i class="fa fa-apple mr-2" aria-hidden="true"></i>Available on Appstore</button>
	</div>
	<div class="col-12 col-lg-5 my-2 order-1 order-lg-2">
	<img class="img-fluid" src="https://i.imgur.com/VFuCoQl.png" alt="">
	</div>
	<div class="col-12 col-lg-3 text-lg-left order-2 order-lg-3">
	<div class="my-5">
	<h4>Full control</h4>
	<p class="mx-auto mx-lg-0">Easily change and tweak your content when you need to, however you want. No more third party vendor lock-in</p>
	</div>
	<div class="my-5">
	<h4>For freelancers and agencies</h4>
	<p class="mx-auto mx-lg-0">Pay once and it’s yours forever. Use it to build as many sites as you need; long form, presentations, splash sites, </p>
	</div>
	<div class="my-5">
	<h4>Cmd + C / Cmd + V</h4>
	<p class="mx-auto mx-lg-0">Edit content in a comfortable manner. It’s as simple as copy and paste.</p>
	</div>
	</div>
	</div>
	</div>
	</section>

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

CSS Code:

	/* start of features 3 */
	.features-3 {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	background: #ffffff;
	background-size: cover;
	background-position: center;
	overflow-x: hidden;
	padding: 100px 0;
	color: #141414;
	}
	.features-3 h2 {
	font-size: 2.625rem;
	font-weight: 300;
	}
	.features-3 h3 {
	font-size: 1.65rem;
	line-height: 1.3;
	font-weight: 300;
	}
	.features-3 h4 {
	font-size: 0.875rem;
	line-height: 1.7;
	font-weight: 700;
	color: #fb0007;
	text-transform: uppercase;
	}
	.features-3 p {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	font-weight: 300;
	width: 85%;
	opacity: 0.8;
	}
	.features-3 .fa {
	font-size: 1rem;
	}
	.features-3 .btn {
	background: #141414;
	color: #ffffff;
	padding: 15px 35px;
	font-weight: 300;
	font-size: 1rem;
	}
	.features-3 .btn:hover {
	background: #333333;
	}
	@media (min-width: 992px) {
	.features-3 {
	height: 100vh;
	min-height: 950px;
	padding-top: 0;
	padding-bottom: 0;
	}
	}
	@media (min-width: 768px) {
	.features-3 h2 {
	width: 55%;
	}
	}
	/* end of features 3 */

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