<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=" bg-success fixed-top">
<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">
<a class="nav-link btn-outline-success pl-4 " href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-success pl-4 " href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-success pl-4" href="#">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-success pl-4" href="#">ORDER</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-success pl-4 " href="#">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="menu-overlay"></div>
<div class="mt-5"></div>
<section id="2sides" class="py-5 border-bottom">
<div class="container ">
<div class="row justify-content-between align-items-center">
<div class="col-12 col-lg-6 border-right">
<h2 class="mb-4 text-success">Supply chain consulting for Human Project</h2>
<ul class="list-unstyled">
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
</ul>
</div>
<div class="col-12 col-lg-4 order-1 order-lg-2 d-none d-lg-block">
<div class="home-thumb mx-auto">
<i class="fa fa-group fa-6x text-success"></i>
</div>
</div>
</div>
</div>
</section>
<section id="4boxes" class="py-5 border-bottom">
<div class="container">
<div class="row d-flex align-items-center text-center">
<div class="col-md-3 col-xs-3">
<i class="fa fa-balance-scale fa-4x mb-4"></i>
<h4 class="text-success">Verified Template</h4>
<p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p>
</div>
<div class="col-md-3 col-xs-3">
<i class="fa fa-bullseye fa-4x mb-4"></i>
<h4 class="text-success">Bull's Eye</h4>
<p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p>
</div>
<div class="col-md-3 col-xs-3">
<i class="fa fa-connectdevelop fa-4x mb-4"></i>
<h4 class="text-success">Connect Develop</h4>
<p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p>
</div>
<div class="col-md-3 col-xs-3">
<i class="fa fa-rocket fa-4x mb-4"></i>
<h4 class="text-success">Jump Start</h4>
<p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p>
</div>
</div>
</div>
</section>
<section id="2sides" class="py-5 border-bottom">
<div class="container ">
<div class="row justify-content-between align-items-center">
<div class="col-12 col-lg-6 border-right">
<h2 class="mb-4 text-success">Supply chain consulting for Human Project</h2>
<ul class="list-unstyled">
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
</ul>
</div>
<div class="col-12 col-lg-4 order-1 order-lg-2 d-none d-lg-block">
<div class="home-thumb mx-auto">
<i class="fa fa-stack-overflow fa-6x text-success"></i>
</div>
</div>
</div>
</div>
</section>
<section id="cta" class="pt-4 pb-3 bg-success text-white">
<div class="container">
<div class="row d-flex align-items-center ">
<div class="col-md-12 ">
<ul class="list-inline ">
<li class="list-inline-item"><h4>Add a photo to show how it went</h4></li>
<li class="list-inline-item pull-right"><button type="button" class="btn btn-warning btn-sm">Ask a Question ?</button></li>
</ul>
</div>
</div>
</div>
</section>
<section id="footer" class="pt-5 pb-3 border-bottom">
<div class="container ">
<div class="row d-flex ">
<div class="col-md-2 col-xs-3">
<b class="text-success">ABOUT</b>
<div class="mb-2 mt-2 border-top "></div>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary">About Us</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Contact Us</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Career</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Press</a></li>
</ul>
</div>
<div class="col-md-2 col-xs-3">
<b class="text-success">POLICY</b>
<div class="mb-2 mt-2 border-top "></div>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary">Return Policy</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Terms of Use</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Security</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Privacy</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Sitemap</a></li>
</ul>
</div>
<div class="col-md-2 col-xs-3">
<b class="text-success">HELP</b>
<div class="mb-2 mt-2 border-top "></div>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary">Payments</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Shipping</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Cancellation</a></li>
<li class="mb-2"><a href="#" class="text-secondary">FAQ</a></li>
</ul>
</div>
<div class="col-md-2 col-xs-3 border-right">
<b class="text-success">SOCIAL</b>
<div class="mb-2 mt-2 border-top "></div>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-secondary">Facebook</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Twitter</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Instagram</a></li>
<li class="mb-2"><a href="#" class="text-secondary">Youtube</a></li>
</ul>
</div>
<div class="col-md-4 col-xs-3">
<b class="text-success">WHO WE ARE</b>
<div class="mb-2 mt-2 border-top "></div>
<p class="text-secondary">Your kids deserve only the best. From bodysuits, booties, diapers to strollers, if you're an expecting mother or a new mother, you will find everything you need to set sail on a smooth parenting journey with the help of our baby</p>
</div>
</div>
</div>
</section>
<section id="copyright" class="pt-3">
<div class="container">
<div class="row d-flex align-items-center ">
<div class="col-md-12 ">
<ul class="list-inline ">
<li class="list-inline-item"><small>© 1996-2020, websited.com, Inc. or its affiliates</small></li>
<li class="list-inline-item pull-right"><small>All Rights Reserved</small></li>
</ul>
</div>
</div>
</div>
</section>
/* 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;}
}
/* menu items end here ***************/
.fa-6x {font-size: 12em !important;}
img {width:100%;}
$('[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);
});