"App Feature Style 1"
Bootstrap 3.3.0 Snippet by kiibriia

<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; }

Related: See More


Questions / Comments: