<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 ----------> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> <header class=" "> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light border-bottom "> <a class="navbar-brand" href="#"> <img src="https://www.brighttalk.com/wp-content/themes/brighttalk-theme/assets/images/BrightTALK-logo.svg" alt="Logo" style="width:120px;"> </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 pl-2"> <li class="nav-item bg-primary text-white d-lg-none d-md-none pt-5 pl-3 shadow border-bottom bg-1"> <img src="https://www.brighttalk.com/wp-content/themes/brighttalk-theme/assets/images/BrightTALK-logo.svg" alt="Logo" style="width:120px;"> </a> <a href="#" class="text-white"><p>user@user.com</p></a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4 " href="#"><i class="fa fa-home mr-2"></i>HOME</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4 " href="#"><i class="fa fa-user mr-2"></i>ABOUT US</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4" href="#"><i class="fa fa-exchange mr-2"></i>MENU</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4" href="#"><i class="fa fa-shopping-cart mr-2"></i>ORDER</a> </li> <li class="nav-item"> <a class="nav-link btn-outline-success1 pl-4 " href="#"><i class="fa fa-phone mr-2"></i>CONTACT US</a> </li> </ul> </div> </nav> </div> </header> <div class="menu-overlay"></div> <section class="banner text-white"> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-md-7 col-xl-6"> <small>FULLY CUSTOMIZABLE</small> <h1><b>Manage all your media files using NextApp</b></h1> <p>Feugiat eros, ac tincidunt ligula massa in faucibus orci luctus et ultrices posuere cubilia curae integer congue leo metus, eu mollis lorem primis in orci integer metus mollis faucibus</p> </div> <div class="col-md-5 col-xl-5 offset-xl-1"> <img src = "https://dsathemes.com/html/nextapp/files/images/image-14.png" class = "img-responsive" width = "100%"/> </div> </div> </div> </section> <section class="py-3 border-bottom bg-primary text-white"> <div class="container"> <div class="row justify-content-between align-items-center text-center"> <div class="col-12 col-md-8 offset-md-2"> <p> <i class="fa fa-group fa-2x text-white mb-2"></i> If you’re still using <b>Windows 7</b>, you need extra protection.Avast’s antivirus</p> </div> </div> </div> </section> <section class="py-5 border-bottom"> <div class="container py-5"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-6 border-right"> <h2 class="mb-4">Make the most of moments that matter</h2> <p>Our most advanced protection is your lightest, toughest defense against viruses, ransomware, spyware, zero-day threats, home Wi-Fi network vulnerabilities, and more.</p> </div> <div class="col-12 col-lg-4 d-none d-lg-block "> <i class="fa fa-angellist fa-6x text-primary"></i> </div> </div> </div> </section> <section class="py-5 banner2 text-white border-bottom"> <div class="container py-5"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-6 border-right"> <h2 class="mb-4">Connect & create a seamless customer experience</h2> <p>Our most advanced protection is your lightest, toughest defense against viruses, ransomware, spyware, zero-day threats, home Wi-Fi network vulnerabilities, and more.</p> </div> <div class="col-12 col-lg-4 d-none d-lg-block "> <i class="fa fa-connectdevelop fa-6x text-white"></i> </div> </div> </div> </section> <section class="py-5 border-bottom"> <div class="container py-5"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-6 border-right"> <h2 class="mb-4">Get started in just 5 minutes. Join us today.</h2> <p>Our most advanced protection is your lightest, toughest defense against viruses, ransomware, spyware, zero-day threats, home Wi-Fi network vulnerabilities, and more.</p> </div> <div class="col-12 col-lg-4 d-none d-lg-block "> <i class="fa fa-clock-o fa-6x text-primary"></i> </div> </div> </div> </section> <section class="py-5 banner3 text-white border-bottom"> <div class="container py-5"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-6 border-right"> <h2 class="mb-4">Connect & create a seamless customer experience</h2> <p>Our most advanced protection is your lightest, toughest defense against viruses, ransomware, spyware, zero-day threats, home Wi-Fi network vulnerabilities, and more.</p> </div> <div class="col-12 col-lg-4 d-none d-lg-block "> <i class="fa fa-connectdevelop fa-6x text-white"></i> </div> </div> </div> </section> <section class="py-5 border-bottom"> <div class="container py-5"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-6 border-right"> <h2 class="mb-4">Get started in just 5 minutes. Join us today.</h2> <p>Our most advanced protection is your lightest, toughest defense against viruses, ransomware, spyware, zero-day threats, home Wi-Fi network vulnerabilities, and more.</p> </div> <div class="col-12 col-lg-4 d-none d-lg-block "> <i class="fa fa-clock-o fa-6x text-primary"></i> </div> </div> </div> </section> <section class="py-5 banner4 text-white"> <div class="container py-5"> <div class="row justify-content-between align-items-center text-center"> <div class="col-12 col-md-8 offset-md-2"> <h2>We are 400 million. Be our “plus one”</h2> <p> Our 400 million users are the 400 million reasons why we lead the digital security pack. Each Avast-loaded device is a source of real-time intelligence about new and current threats. That’s how we stop over 66 million of them every day. By joining Avast, you help to make that network even stronger. </p> </div> </div> </div> </section> <section class="footer py-5 " id="footer"> <div class="container py-3"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 "> <img class="mb-4" src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;"> <p class="">86 Petersham town, New South wales Waedll Steet, Australia PA 6550</p> <ul class="list-unstyled"> <li>+61 525 240 310</li> <li>iamosahan@gmail.com</li> <li>www.askbootstrap.com</li> </ul> </div> <div class="col-md-9 col-sm-6 col-xs-12 "> <div class="row"> <div class="col-md-3"> <h6 class="pb-2">OUR PROPERTIES </h6> <ul class="list-unstyled"> <a href="#"><li> Single Story</li></a> <a href="#"><li> Double Story</li></a> <a href="#"><li> Triple Story</li></a> <a href="#"><li> Resort </li></a> <a href="#"><li> Homes in Hawai</li></a> <a href="#"><li> Palace</li></a> </ul> </div> <div class="col-md-3"> <h6 class="pb-2">QUICK LINKS </h6> <ul class="list-unstyled"> <a href="#"><li> Single Story</li></a> <a href="#"><li> Double Story</li></a> <a href="#"><li> Triple Story</li></a> <a href="#"><li> Resort </li></a> <a href="#"><li> Homes in Hawai</li></a> <a href="#"><li> Palace</li></a> </ul> </div> <div class="col-md-3"> <h6 class="pb-2">ABOUT OP </h6> <ul class="list-unstyled"> <a href="#"><li> Single Story</li></a> <a href="#"><li> Double Story</li></a> <a href="#"><li> Triple Story</li></a> <a href="#"><li> Resort </li></a> <a href="#"><li> Homes in Hawai</li></a> <a href="#"><li> Palace</li></a> </ul> </div> <div class="col-md-3"> <h6 class="pb-2">NEWSLETTER </h6> <small> Get the most recent updates from our site and be updated your self...GET IN TOUCH</small> <div class="social-icons pt-3"> <ul class="list-inline list-unstyled"> <a href="#"><li class="list-inline-item"><i class="fa fa-facebook-square fa-2x text-primary"></i></li> </a> <a href="#"><li class="list-inline-item"><i class="fa fa-twitter-square fa-2x text-info"></i></li> </a> <a href="#"><li class="list-inline-item"><i class="fa fa-youtube-play fa-2x text-danger"></i></i></li> </a> <a href="#"><li class="list-inline-item"><i class="fa fa-google-plus-square fa-2x text-danger"></i></li> </a> </ul> </div> </div> </div> </div> </div> </div> </section> <div class="copyright bg-light border pt-2"> <div class="container"> <div class="row justify-content-md-center"> <p> © 2018 xyz Software Pvt. Ltd. </p> </div> </div> </div>

body {font-family: 'Roboto';font-size: 20px; line-height:25px;} img {width:100%;} .banner {background-image:url(https://images.pexels.com/photos/935756/pexels-photo-935756.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)} .banner2 {background-image:url(https://images.pexels.com/photos/7062/man-people-space-desk.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)} .banner3 {background-image:url(https://images.pexels.com/photos/1181317/pexels-photo-1181317.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)} .banner4 {background-image:url(https://images.pexels.com/photos/3205612/pexels-photo-3205612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)} .text-pink {color:#f20791;} .bg-pink {background-color:#f20791;} .fa-6x {font-size: 10em !important;} h1 {font-size:56px;font-weight:bold;} h2 {font-size:46px;font-weight:bold;} /* menu items ***************/ @media only screen and (max-width: 767px) { #navbarTogglerDemo02 { position: fixed; top: 0; left: -8px; z-index: 99; width: 280px; height: 100%; background-color: #fff; overflow: auto; box-shadow: 0px 1px 25px #3c3c3c; } .menu-overlay { display: none; background-color: #000; bottom: 0; left: 16px; opacity: 0.5; filter: alpha(opacity=50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 49; } .navbar-light .navbar-nav .nav-link { /* border-bottom: 1px solid #28a745;} */ }

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