<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" > <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="py-5 bg-1 text-white"> <div class="container py-5"> <div class="row text-center"> <div class="col-md-8 offset-md-2"> <p>BEST APP LANDING</p> <h1>Passing Your Apps Life With Our Applic</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation.</p> <button type="button" class="btn btn-warning">Warning</button> </div> </div> </div> </section> <section class="py-5"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="https://dsathemes.com/html/nextapp/files/images/image-01.png"> </div> <div class="col-md-6"> <p>FULLY CUSTOMIZABLE</p> <h1>Work faster with powerful tools</h1> <ul> <li>Vitae auctor integer congue magna at pretium</li> <li>Integer congue magna at pretium purus pretium ligula rutrum luctus risus eros dolor auctor ipsum blandit purus</li> <li>Sagittis congue augue egestas volutpat egestas magna</li> <li>Egestas magna ipsum vitae purus efficitur ipsum cubilia and laoreet pretium ligula rutrum luctus</li> <button type="button" class="btn btn-warning mt-4">Warning</button> </ul> </div> </div> </div> </section> <section class="py-5 bg-primary text-white"> <div class="container"> <div class="row text-center mb-5"> <div class="col-md-12"> <h1>Work Faster With Powerful Options</h1> <p>Aliquam a augue suscipit, luctus neque purus ipsum neque dolor primis libero tempus, blandit posuere ligula varius magna congue cursus porta </p> </div> </div> <div class="row"> <div class="col-md-6"> <p>FULLY CUSTOMIZABLE</p> <h1>Work faster with powerful tools</h1> <ul> <li>Vitae auctor integer congue magna at pretium</li> <li>Integer congue magna at pretium purus pretium ligula rutrum luctus risus eros dolor auctor ipsum blandit purus</li> <li>Sagittis congue augue egestas volutpat egestas magna</li> <li>Egestas magna ipsum vitae purus efficitur ipsum cubilia and laoreet pretium ligula rutrum luctus</li> <button type="button" class="btn btn-warning mt-4">Warning</button> </ul> </div> <div class="col-md-6"> <img src="https://dsathemes.com/html/nextapp/files/images/image-01.png"> </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; } } .div-img {width:50%; transform: rotate(30deg); } .welcome-layer-3 { height: 100%; /* left: 0; */ position: absolute; top: 0; width: 100%; } .home3-layer-1 { right: 10%; top: -18%; } .welcome-layer-3 > div { position: absolute; } img {max-width: 100%; height: auto; } .bg-1 { background-image: url("https://images.pexels.com/photos/114979/pexels-photo-114979.jpeg?cs=srgb&dl=silhouette-photo-of-a-mountain-during-sunset-114979.jpg&fm=jpg"); background-color: #cccccc; } .bg-2 { background-image: url("http://quomodosoft.com/html/applic/applic/assets/img/bg-layers/map-layer.png"); background-color: #cccccc; }

$('[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); });