"android menu https://pixfort.com/item/megapack/studio"
Bootstrap 4.1.1 Snippet by jeevan123456

<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 ----------> <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> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <header class=""> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light "> <a class="navbar-brand" href="#"> <img src="http://sarto.edge-themes.com/wp-content/uploads/2018/04/landing-img-18.png" alt="Logo" style="width:70px;"> </a> <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">SERVICES</a> </li> <li class="nav-item"> <a class="nav-link" href="#">FEATURES</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CONTACT</a> </li> </ul> </div> </nav> </div> </header> <div class="menu-overlay"></div> <section class="bg-success py-5" id="banner"> <div class="container py-5"> <div class="row py-5"> <div class="col-md-6 text-white"> <h4><span class="badge badge-warning">#1 DESIGN STUDIO IN EUROPE </span></h4> <h2 class="mt-4">Looking for Premium Services? Discover PixFort Studio.</h2> <button type="button" class="btn btn-warning mt-4">Order Services Today</button> </div> </div> </div> </section> <section class="bg-warning py-5" id="services"> <div class="container py-5"> <div class="row"> <div class="col-md-12 text-center"> <small>MADE BY AN ELITE AUTHOR</small> <h2>Get Access to PixFort Builder. </h2> <p>This is just a simple text made for this unique and awesome template, you can replace it with any text. </p> </div> </div> <div class="row mt-4 text-center"> <div class="col-md-3"> <i class="fa fa-tachometer fa-4x text-success"></i> <h4>Pixel Perfect</h4> <p>Made by professionals</p> </div> <div class="col-md-3"> <i class="fa fa-tachometer fa-4x text-success"></i> <h4>SEO Ready</h4> <p>Made by professionals</p> </div> <div class="col-md-3"> <i class="fa fa-tachometer fa-4x text-success"></i> <h4>Product UX</h4> <p>Made by professionals</p> </div> <div class="col-md-3"> <i class="fa fa-tachometer fa-4x text-success"></i> <h4>Web Design</h4> <p>Made by professionals</p> </div> </div> </div> </section> <section class=" py-5" id="services"> <div class="container py-5"> <div class="row"> <div class="col-md-6"> <i class="fa fa-question fa-4x text-success"></i> <h4 class="mt-4">Ask Us a Question</h4> <p>From logo design to website designs and developers are ready to complete perfect your custom jobs. </p> <button type="button" class="btn btn-warning mt-4">Order Services Today</button> </div> <div class="col-md-6"> <p class="font-weight-bold">Can I Pay with PayPal?</p> <p>We provides you with a full management functionality that results in faster revenue, more users, and the ability to serve your users better engaging with them efficiently.</p> <p class="font-weight-bold">How about Refund policy?</p> <p>We provides you with a full management functionality that results in faster revenue, more users, and the ability to serve your users better engaging with them efficiently.</p> <p class="font-weight-bold">Is There a Free Trial? </p> <p>We provides you with a full management functionality that results in faster revenue, more users, and the ability to serve your users better engaging with them efficiently.</p> </div> </div> </div> </section> <section class="bg-success py-5" id="testimonial"> <div class="container py-5"> <div class="row"> <div class="col-md-12 text-center"> <small>MADE BY AN ELITE AUTHOR</small> <h2>Get Access to PixFort Builder. </h2> <p>"I just wanted to share a quick note and let you know that you guys do a really good job. I’m glad I decided to work with you. It’s really great how easy your websites are to update and manage."</p> </div> </div> </div> </section> <section class="py-5" id="testimonial"> <div class="container py-5"> <div class="row"> <div class="col-md-12 text-center"> <small>+50,000 CLIENTS SINCE 2012</small> <h2>Trusted by leading companies. </h2> <p>This is just a simple text made for this unique and awesome template. </p> </div> </div> <div class="row"> <div class="col-md-3"> <img src="https://pixfort.com/item/megapack/images/studio/pixfort.png"> </div> <div class="col-md-3"> <img src="https://pixfort.com/item/megapack/images/studio/sap-logo.png"> </div> <div class="col-md-3"> <img src="https://pixfort.com/item/megapack/images/studio/deloitte.png"> </div> <div class="col-md-3"> <img src="https://pixfort.com/item/megapack/images/studio/airbnb.png"> </div> </div> </div> </section> <section class="py-4 bg-secondary"> <div class="container"> <div class="row"> <div class="col-md-8"> <p>Can't find the right service? No problem, just send a message to our friendly team!</p> </div> <div class="col-md-4"> <button type="button" class="btn btn-warning btn-sm">Warning</button> </div> </div> </div> </section>
img {width:100%;} @media only screen and (max-width: 767px) { #navbarTogglerDemo02 { position: fixed; top: 0; left: 15px; z-index: 99; width: 280px; height: 100%; background-color: #ddd; overflow: auto; } .menu-overlay { display: none; background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity=50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 49; } }
$('[data-toggle="slide-collapse"]').on('click', function() { $navMenuCont = $($(this).data('target')); $navMenuCont.animate({ 'width': 'toggle' }, 350); $(".menu-overlay").fadeIn(500); }); $(".menu-overlay").click(function(event) { $(".navbar-toggler").trigger("click"); $(".menu-overlay").fadeOut(500); });

Related: See More


Questions / Comments: