"Amazing Features Project"
Bootstrap 4.1.1 Snippet by Nemra1

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="features" class="features-section"> <div class="container"> <div class="row wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;"> <div class="col-md-12 col-sm-12 features-heading"> <h2>Amazing Features Project</h2> <p>Nulla vitae elit libero, a pharetra augue. Aenean eu leo <br>quam. Pellentesque ornare sem lacinia quam </p> </div> <!--col-md-12--> <div class="col-md-6 col-lg-4 features-text"> <div class="features-wrap"> <div class="features-content"> <h3>Fast Connect</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <!--features-content--> </div> <!--features-wrap--> <div class="features-wrap"> <div class="features-content"> <h3>Fast Update</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <!--features-content--> </div> <!--features-wrap--> <div class="features-wrap"> <div class="features-content"> <h3>Equilizer Support</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <!--features-content--> </div> <!--features-wrap--> </div> <!--col-md-6--> <div class="col-md-4 col-lg-4 hidden-md-down"> <div class="features-img"> <img src="http://jonayed.com/me/aspire/images/features/features-mobile.png" alt="features-img"> </div> <!--features-img--> </div> <!--col-md-4--> <div class="col-md-6 col-lg-4 features-text"> <div class="features-wrap"> <div class="features-content"> <h3>Listen 24/7</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <!--features-content--> </div> <!--features-wrap--> <div class="features-wrap"> <div class="features-content"> <h3>Unique Design</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <!--features-content--> </div> <!--features-wrap--> <div class="features-wrap"> <div class="features-content"> <h3>Clean Design</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <!--features-content--> </div> <!--features-wrap--> </div> <!--col-md-6--> </div> <!--row--> </div> <!--container--> </section>
/*================================================ 6. FEATURES SECTION ==================================================*/ .features-section { padding-top: 60px; padding-bottom: 50px; } .features-heading h2 { color: #212121; text-align: center; font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 400; padding-bottom: 10px; } .features-heading p { color: #212121; text-align: center; font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 300; padding-bottom: 70px; } .features-wrap { background: #fff none repeat scroll 0 0; border: 2px solid #fbcce8; border-radius: 10px; margin-bottom: 50px; padding: 20px 25px 13px; } .features-wrap h3 { color: #212121; text-align: center; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400; padding-bottom: 10px; } .features-wrap p { color: #212121; text-align: center; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 300; } .features-wrap:hover { background: #fff none repeat scroll 0 0; border: 2px solid #fbcce8; border-radius: 10px; margin-bottom: 50px; padding: 20px 25px 13px; box-shadow: 0 7px 10px -3px gray; transition: 1s ease; } .features-img img { display: block; margin: 0px auto; }

Related: See More


Questions / Comments: