<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="features">
<!-- FEATURES LEFT SIDE -->
<div class="col-sm-4 features-left text-right wow fadeInLeft" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible;-webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-duration: 1.5s;">
<!-- FEATURE -->
<div class="feature-items">
<!-- ICON -->
<i class="features-icon fa fa-heart-o"></i>
<h5>Build with love</h5>
<p>
This Is not just a site. its just express design with love. i just tried to build ultimate love with this
</p>
</div>
<!-- end Single Feature item -->
<!-- FEATURE -->
<div class="feature-items">
<!-- ICON -->
<i class="features-icon fa fa-desktop"></i>
<h5>Ultra responsive</h5>
<p>
Lorem ipsum dolor sit amet, ed do eiusmod tempor incididunt ut labore et dolore magna.
</p>
</div>
<!-- end Single Feature item -->
<!-- FEATURE -->
<div class="feature-items">
<!-- ICON -->
<i class="features-icon fa fa-mobile-phone"></i>
<!-- FEATURE HEADING AND DESCRIPTION -->
<h5>Cross-Browser</h5>
<p>
Lorem ipsum dolor sit amet, ed do eiusmod tempor incididunt ut labore et dolore magn.
</p>
</div>
<!-- end Single Feature item -->
</div>
<!-- /END FEATURES LEFT -->
<!-- PHONE IMAGE -->
<div class="col-sm-4">
<div class="features-img wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s" style="visibility: visible;-webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-duration: 1.5s;">
<img src="http://landingpagetemplates.net/landing/demo/images/mobile.png" alt="App Feature Image">
</div>
</div>
<!-- FEATURES RIGHT -->
<div class="col-sm-4 features-right wow fadeInRight" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible;-webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; animation-duration: 1.5s;">
<!-- FEATURE -->
<div class="feature-items">
<!-- ICON -->
<i class="features-icon fa fa-lightbulb-o"></i>
<h5>Slim Scrollbar </h5>
<p>
This is awesome scrollbars compatble with destkop, tablet and phone devices.
</p>
</div>
<!-- end Single Feature item -->
<!-- FEATURE -->
<div class="feature-items">
<!-- ICON -->
<i class="features-icon fa fa-terminal"></i>
<h5>BootStrap 3.3</h5>
<p>
Lorem ipsum dolor sit amet, ed do eiusmod tempor incididunt ut labore et dolore magna.
</p>
</div>
<!-- end Single Feature item -->
<!-- FEATURE -->
<div class="feature-items">
<!-- ICON -->
<i class="features-icon fa fa-bookmark-o"></i>
<h5>Parallax te</h5>
<p>
Lorem ipsum dolor sit amet, ed do eiusmod tempor incididunt ut labore et dolore magna.
</p>
</div><!-- end Single Feature item -->
</div><!-- /END FEATURES RIGHT -->
</div>
<div style="text-align: center;margin-top: 50px;">Snippet Created by <a href="http://bootstrapthemes.co" target="_blank">Bootstrap themes</a></div>
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
/*
Section Feature
*/
body {
font-family: 'Open Sans', sans-serif;
font-weight:400;
}
.feature-items {
padding: 20px 10px;
clear: both;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.feature-items:hover {
background-color: #F9F9F9;
border-radius: 5px;
}
.feature-items i,
.feature-item i {
display: inline-block;
font-size: 30px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
position: relative;
z-index: 1;
color: #eec400;
overflow: hidden;
border: 2px solid #FFFFFF;
border-radius: 50%;
box-shadow: 0 0 0 2px #eec400;
margin-bottom: 10px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.feature-items:hover i,
.feature-item:hover i {
color: #ffffff;
background: #eec400;
}
.feature-items h5 {
font-size: 22px;
margin-bottom: 10px;
font-weight:400;
}
.features-left,
.features-right {
margin-top: 20px;
}
