"Value app using bootstrap 4"
Bootstrap 4.0.0 Snippet by Sunlimetech

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Value App using bootstrap 4</title> <meta name="description" content="Value App"> <meta name="keywords" content="Value App"> <!-- Meta information - for search engines --> <meta property="og:title" content="Value App"> <meta property="og:type" content="website"> <meta property="og:url" content="#"> <meta property="og:image" content="imgs/ogimage.png"> <!-- 3rd party css files --> <link rel="shortcut icon" href="https://sunlimetech.com/portfolio/valueapp/favicon.ico"> <link href="https://sunlimetech.com/portfolio/valueapp/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"> <!-- Internal css files --> <link href="css/styles.css" rel="stylesheet"> </head> <body> <!-- Header section --> <section id="header"> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-5"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/header.png" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/header.png" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/header.png" alt="Third slide"> </div> </div> <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> --> </div> </div> <div class="col-sm-12 col-md-7 pt-4 text-sm-center text-md-left text-center"> <div class="header-right-contents pt-5"> <img class="img-fluid mb-5" src="https://sunlimetech.com/portfolio/valueapp/imgs/logo.png" alt="Value App" /> <h1 class="text-large pt-1 mb-5">Perfect app that makes your everyday life so much easier!</h1> <p> <button type="button" class="btn btn-outline-success btn-lg px-5 text-uppercase mr-md-4 mr-sm-0 btn-rounded strong mb-3">Download</button> <button type="button" class="btn btn-outline-secondary btn-lg px-5 text-uppercase btn-rounded strong mb-3">Learn More</button> </p> <div class="icons"> <a href="#!"><i class="fa fa-apple fa-2x text-success mr-5"></i></a> <a href="#!"><i class="fa fa-android fa-2x text-success mr-5"></i></a> <a href="#!"><i class="fa fa-windows fa-2x text-success"></i></a> </div> </div> </div> </div> </div> </section> <!-- //Header section --> <!-- Services section --> <section id="services" class="bg-success text-white mt-1"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h2 class="mt-4">Clean and simple Landing page for Apps</h2> <p class="pt-2 pb-4"> Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum In publishing and graphic design, lorem ipsum is a a document or visual presentation.generator. </p> </div> </div> <div class="row text-center pt-4"> <div class="col-md-4 col-sm-6 mb-5"> <i class="fa fa-code fa-5x mb-4"></i> <h3 class="pb-2">Very Smart</h3> <p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry.</p> </div> <div class="col-md-4 col-sm-6 mb-5"> <i class="fa fa-desktop fa-5x mb-4"></i> <h3 class="pb-2">Responsive</h3> <p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry.</p> </div> <div class="col-md-4 col-sm-12 mb-5"> <i class="fa fa-circle fa-5x mb-4"></i> <h3 class="pb-2">Crisp & clear</h3> <p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry.</p> </div> </div> </div> </section> <!-- //Services section --> <!-- Features section --> <section id="features" class="bg-lgray"> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 pt-4"> <div id="carouselExampleIndicators1" class="carousel slide features" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/features.png" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/features.png" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://sunlimetech.com/portfolio/valueapp/imgs/features.png" alt="Third slide"> </div> </div> <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> --> </div> </div> <div class="col-sm-12 col-md-6 pt-4"> <div class="header-right-contents"> <h4 class="text-gray text-xxlarge">Features availalbe with Easy perfect free app</h4> <ul class="list-unstyled mt-5 feature-listing"> <li> <span class="text-success text-large">Beautiful, modern design</span> <p>Duis bibendum diam non erat facilaisis tincidunt</p> </li> <li> <span class="text-success text-large">Easy to customize</span> <p>Duis bibendum diam non erat facilaisis tincidunt</p> </li> <li> <span class="text-success text-large">Developer Friendly</span> <p>Duis bibendum diam non erat facilaisis tincidunt</p> </li> <li> <span class="text-success text-large">Fully Responsive</span> <p>Duis bibendum diam non erat facilaisis tincidunt</p> </li> </li> </div> </div> </div> </div> </section> <!-- //Features section --> <!-- //Buy now section --> <div class="desgned-by text-center p-5 bg-success text-white"> <a class="btn btn-danger btn-lg text-white" href="https://www.fiverr.com/sunlimetech/design-and-fix-your-bootstrap-4-issues" target="_blank" role="button">Buy now in $10</a> </div> <!-- //Buy now section --> <!-- Testiminials section --> <section id="testiminials"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center mb-2"><i class="fa fa-quote-left text-success"></i></h1> <div id="testimonial-slider" class="owl-carousel"> <div class="testimonial"> <div class="pic"> <img src="https://sunlimetech.com/portfolio/valueapp/imgs/t-pic1.png" class="img-rounded"> </div> <div class="testimonial-profile"> <h3 class="title">williamson</h3> <span class="post">Web Developer</span> </div> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris. </p> </div> <div class="testimonial"> <div class="pic"> <img src="https://sunlimetech.com/portfolio/valueapp/imgs/t-pic2.png" class="img-rounded"> </div> <div class="testimonial-profile"> <h3 class="title">williamson</h3> <span class="post">Web Designer</span> </div> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris. </p> </div> <div class="testimonial"> <div class="pic"> <img src="https://sunlimetech.com/portfolio/valueapp/imgs/t-pic3.png"> </div> <div class="testimonial-profile"> <h3 class="title">williamson</h3> <span class="post">Logo Designer</span> </div> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris. </p> </div> </div> </div> </div> </div> </section> <!-- //Testiminials section --> <!-- Sunscription section --> <section id="sunscription" class="bg-lgray"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <i class="fa fa-envelope fa-4x text-green mb-3"></i> <h3 class="text-gray">Get Notified of any updates!</h3> <p>Subscribe to our newsletter to be notified about new version release</p> </div> </div> <div class="row"> <div class="col-lg-3"></div> <div class="col-lg-6"> <div class="input-group input-group-lg"> <input type="email" class="form-control" placeholder="sunlimetech@gmail.com" aria-label="Search for..."> <span class="input-group-btn"> <button class="btn btn-success" type="button">Subscribe</button> </span> </div> </div> <div class="col-lg-3"></div> </div> </section> <!-- //Sunscription section --> <!-- Footer section --> <section id="footer"> <footer> <div class="container"> <div class="row flex-center"> <a href="#"><i class="fa fa-twitter fa-3x mr-4"></i></a> <a href="#"><i class="fa fa-facebook fa-3x mr-4"></i></a> <a href="#"><i class="fa fa-vimeo fa-3x mr-4"></i></a> <a href="#"><i class="fa fa-pinterest-p fa-3x"></i></a> <div class="col-sm-12 text-center pt-4"> <a href="#" class="text-medium mr-3">Terms of use</a><span class="mr-3">|</span> <a href="#" class="text-medium mr-3">Support</a><span class="mr-3">|</span> <a href="#" class="text-medium mr-3">Help</a> </div> </div> </div> </footer> </section> <!-- Footer section --> <!-- Developed by section --> <div class="desgned-by text-center p-3 bg-success text-white"> <p class="mb-0">Design and developed by <a href="https://www.sunlimetech.com" class="text-white" target="_blank" title="Web, andriod and IOS development">Sunlimetech</a> with <i class="fa fa-heart text-danger"></i></p> </div> <!-- Developed by section --> </body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> </html>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #b2b2b2; } /************************************************************************/ /**************************** Helper Clases *****************************/ /************************************************************************/ h1, h2, h3, h4, h5, h6, p { margin: 0 0 10px 0; } a, a:visited { color: #abafae !important; webkit-transition: color 0.5s; /* Safari */ transition: color 0.5s; text-decoration: none !important; } a:hover, a:focus { color: #28a745 !important; webkit-transition: color 0.5s; /* Safari */ transition: color 0.5s; text-decoration: none !important; } /************************************/ /************ Buttons ***************/ /************************************/ .btn-rounded{ border-bottom-left-radius: 25px !important; border-bottom-right-radius: 25px !important; border-top-left-radius: 25px !important; border-top-right-radius: 25px !important; border-width:2px; } /************************************/ /******* Border Classes ************/ /************************************/ .border-radius { border-radius: 4px; } .no-radius { border-radius: 0; } .border-blue { border: 1px solid #3a74c4; } .border-black { border: 1px solid #000000; } .border-grey { border: 2px solid #eee; } .border-dashed { border-style: dashed; } /************************************/ /******* Color clases default *****/ /************************************/ .text-green { color: #28a745 !important; } .text-gray{ color: #b2b2b2 !important; } .text-white { color: #ffffff !important; } .text-black { color: #000000 !important; } /************************************/ /******* Background classes ********/ /************************************/ .bg-green { background: #28a745 !important; } .bg-gray { background: #b2b2b2 !important; } .bg-lgray { background: #f8f8fa !important; } .bg-white { background: #ffffff !important; } .bg-black { background: #000000 !important; } /************************************/ /************ Font sizes ************/ /************************************/ .text-small { font-size: 16px; } .text-xsmall { font-size: 12px; } .text-medium { font-size: 18px !important; } .text-large { font-size: 28px !important; } .text-xlarge { font-size: 32px !important; } .text-xxlarge { font-size: 36px !important; } .text-xxxlarge { font-size: 40px !important; } @media (max-width: 768px) { .text-small { font-size: 14px !important; } .text-medium { font-size: 16px !important; } .text-large { font-size: 24px !important; } .text-xlarge { font-size: 28px !important; } .text-xxlarge { font-size: 32px !important; } .text-xxxlarge { font-size: 36px !important; } .heading { max-width: 100% !important; } } @media (max-width: 767px) { } /***********************************************/ /***************** General classes *************/ /***********************************************/ .strong { font-weight: bold !important; } .flex-center { display: flex; justify-content: center; align-items: center; height: 100%; } section{ padding: 50px 0; } .icon-10x{ font-size:5rem; } /***********************************************/ /******************** Header *******************/ /***********************************************/ .carousel .carousel-inner .carousel-item img{ max-width:250px; margin:0 auto; } .carousel.features .carousel-inner .carousel-item img{ max-width:350px; margin:0 auto; } .carousel-indicators { bottom: -30px; } .carousel-indicators .active { background-color: #28a745; } .carousel-indicators li { background-color: #b2b2b2; } .icons .fa{ webkit-transition: color 0.5s; transition: color 0.5s; } .icons .fa:hover{ color: #b2b2b2 !important; } #footer .fa:hover{ color:#28a745 !important; transition:0.5s ease all; } @media (max-width: 768px) {} @media (max-width: 767px) {} /***********************************************/ /****************** Feature ********************/ /***********************************************/ ul.feature-listing li{ position: relative; margin-left: 3.3em; } ul.feature-listing li:before{ position: absolute; font-family: FontAwesome; display: inline-block; margin-left: -1.3em; /* same as padding-left set on li */ width: 1.3em; /* same as padding-left set on li */ color:#ddd; font-size:40px; } ul.feature-listing li:first-child:before{ content: "\f108"; /* FontAwesome Unicode */ } ul.feature-listing li:nth-child(2):before{ content: "\f187"; /* FontAwesome Unicode */ } ul.feature-listing li:nth-child(3):before{ content: "\f121"; /* FontAwesome Unicode */ } ul.feature-listing li:last-child:before{ content: "\f10a"; /* FontAwesome Unicode */ } @media (max-width: 768px) {} @media (max-width: 767px) {} /***********************************************/ /***************** Page name : ****************/ /***********************************************/ @media (max-width: 768px) {} @media (max-width: 767px) {} /***********************************************/ /******************** Footer *******************/ /***********************************************/ .footer {} @media (max-width: 768px) {} @media (max-width: 767px) {} .testimonial{ margin: 0 20px 50px; } .testimonial .pic{ display: inline-block; width: 90px; height: 90px; border-radius: 50%; margin: 0 15px 15px 0; } .testimonial .pic img{ width: 100%; height: auto; border-radius: 50%; border: 1px solid #35b653; padding: 2px; } .testimonial .testimonial-profile{ display: inline-block; position: relative; top: 15px; } .testimonial .title{ display: block; font-size: 30px; font-weight: bold; color: #bababa; text-transform: capitalize; margin: 0; } .testimonial .post{ display: block; font-size: 14px; color: #28a745; letter-spacing: 4px; padding: 0 5px; } .testimonial .description{ padding: 20px 22px; background: #28a745; font-size: 15px; color: #fff; line-height: 25px; margin: 0; position: relative; } .testimonial .description:before, .testimonial .description:after{ content: ""; border-width: 18px 0 0 18px; border-style: solid; border-color: #35b653 transparent transparent; position: absolute; bottom: -18px; left: 0; } .testimonial .description:after{ border-width: 18px 18px 0 0; left: auto; right: 0; } .owl-theme .owl-controls{ margin-top: 10px; margin-left: 30px; } .owl-theme .owl-controls .owl-buttons div{ margin: 7px; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 50%; background: #28a745 !important; opacity: 1 !important; } .owl-prev:before, .owl-next:before{ content: "\f053"; font-family: 'FontAwesome'; font-size: 20px; color: #ffffff !important; } .owl-next:before{ content: "\f054"; }
$(document).ready(function() { $("#testimonial-slider").owlCarousel({ items: 2, itemsDesktop: [1000, 2], itemsDesktopSmall: [979, 2], itemsTablet: [768, 1], pagination: false, navigation: true, navigationText: ["", ""], autoPlay: true }); });

Related: See More


Questions / Comments: