"App Features"
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 class="section feature" id="feature"> <div class="container"> <div class="row"> <div class="col-12"> <div class="section-title"> <h2>App Features</h2> <p>Demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee idea of denouncing pleasure and praising</p> </div> </div> </div> <div class="row bg-elipse"> <div class="col-lg-4 align-self-center text-center text-lg-right"> <!-- Feature Item --> <div class="feature-item"> <!-- Icon --> <div class="icon"> <i class="tf-circle-compass"></i> </div> <!-- Content --> <div class="content"> <h5>Beautiful Interface Design</h5> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising</p> </div> </div> <!-- Feature Item --> <div class="feature-item"> <!-- Icon --> <div class="icon"> <i class="tf-tools-2"></i> </div> <!-- Content --> <div class="content"> <h5>Unlimited Features</h5> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising</p> </div> </div> </div> <div class="col-lg-4 text-center"> <!-- Feature Item --> <div class="feature-item mb-0"> <!-- Icon --> <div class="icon"> <i class="tf-chat"></i> </div> <!-- Content --> <div class="content"> <h5>Full free chat</h5> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising</p> </div> </div> <div class="app-screen"> <img class="img-fluid" src="https://technext.github.io/lifetrackr/images/phones/i-phone-screen.png" alt="app-screen"> </div> <!-- Feature Item --> <div class="feature-item"> <!-- Icon --> <div class="icon"> <i class="tf-hourglass"></i> </div> <!-- Content --> <div class="content"> <h5>24/7 support by real people</h5> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising</p> </div> </div> </div> <div class="col-lg-4 text-center text-lg-left align-self-center"> <!-- Feature Item --> <div class="feature-item"> <!-- Icon --> <div class="icon"> <i class="tf-mobile"></i> </div> <!-- Content --> <div class="content"> <h5>Retina ready greaphics</h5> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising</p> </div> </div> <!-- Feature Item --> <div class="feature-item"> <!-- Icon --> <div class="icon"> <i class="tf-layers"></i> </div> <!-- Content --> <div class="content"> <h5>IOS & android version </h5> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising</p> </div> </div> </div> </div> </div> </section>
/*=== MEDIA QUERY ===*/ @import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Open+Sans:400,400i,700"); body { font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; color: #5e5e5e; font-weight: 400; line-height: 1; } h1 { font-size: 60px; } h2 { font-size: 48px; } h3 { font-size: 36px; } h4 { font-size: 30px; } h5 { font-size: 20px; } h6 { font-size: 16px; } .feature .feature-item .icon { margin-bottom: 25px; } .feature .feature-item .icon i { font-size: 48px; color: #7d71d3; } .feature .feature-item .content h5 { text-transform: uppercase; font-weight: 600; margin-bottom: 15px; } .feature .feature-item:not(:last-child) { margin-bottom: 80px; } @media (max-width: 768px) { .feature .feature-item { margin-bottom: 80px; } } .feature .app-screen { margin: 40px 0; } .feature .feature-content h2, .feature .feature-content p { margin-bottom: 25px; } @media (max-width: 768px) { .feature .feature-content h2, .feature .feature-content p { text-align: center; } } @media (max-width: 768px) { .feature .testimonial { text-align: center; } } .feature .testimonial p { font-family: "Josefin Sans", sans-serif; margin-bottom: 10px; font-style: italic; color: #242424; } .feature .testimonial ul.meta li { font-size: 12px; margin-right: 10px; } .feature .testimonial ul.meta li img { height: 40px; width: 40px; border-radius: 100%; } /*# sourceMappingURL=maps/style.css.map */

Related: See More


Questions / Comments: