Bootstrap Templates - Features - 4

Bootstrap Templates - Features - 4 lets you showcase 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 4 -->
	<section class="features-4">
	<div class="container text-center">
	<div class="row">
	<div class="col-12">
	<h2>Better design for your content.</h2>
	<h3 class="mx-auto">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden</h3>
	<img src="https://i.imgur.com/NN3sHwM.png" class="img-fluid test py-4" alt="Phone">
	<div class="row">
	<div class="col-12 col-md-6">
	<div class="py-4">
	<i class="fa fa-code" aria-hidden="true"></i>
	<h4>Retina Ready</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div>
	<div class="py-4">
	<i class="fa fa-keyboard-o" aria-hidden="true"></i>
	<h4>Feel Our Design</h4>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</p>
	</div>
	</div>
	<div class="col-12 col-md-6">
	<div class="py-4">
	<i class="fa fa-star-o" aria-hidden="true"></i>
	<h4>Happy Customers</h4>
	<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
	</div>
	<div class="py-4">
	<i class="fa fa-link" aria-hidden="true"></i>
	<h4>Variety of Designs</h4>
	<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

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

CSS Code:

	/* start of features 4 */
	.features-4 {
	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-4 h2 {
	font-size: 2.625rem;
	font-weight: 300;
	margin-top: 0.3em;
	margin-bottom: 0.5em;
	}
	.features-4 h3 {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.4;
	margin-top: 0.3em;
	margin-bottom: 2.5em;
	opacity: 0.7;
	}
	.features-4 h4 {
	font-size: 1.125rem;
	margin-top: 0.6em;
	margin-bottom: 1.2em;
	font-weight: 700;
	}
	.features-4 p {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 1.125rem;
	font-weight: 300;
	margin-top: 0.3em;
	margin-bottom: 0.5em;
	opacity: 0.7;
	}
	.features-4 .fa {
	font-size: 2.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}
	@media (min-width: 768px) {
	.features-4 h3 {
	width: 65%;
	}
	}
	/* end of features 4 */

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