<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Travel</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Bookings <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Decoration</a></li>
<li><a href="#">Catering</a></li>
<li><a href="#">Invitation Card</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Pandit Jee</a></li>
<li><a href="#">Music,Band,DJ</a></li>
<li><a href="#">Transport</a></li>
<li><a href="#">Dancers</a></li>
<li><a href="#">Venue</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Birthday</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Anniversary</a></li>
<li><a href="#">Theme Based</a></li>
</ul>
</li>
<li><a href="#">Deals</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<div class="sidebar-section margin-b-70">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3> </h3>
<div class="sidebar-box">
<ul class="list-links">
<a href="#"><li>Home</li></a>
<a href="#"><li>About Us</li></a>
<a href="#"><li>Company Profile</li></a>
<a href="#"><li>Portfolio</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</div>
</div>
<div class="col-md-9">
<h3> </h3>
<div class="bg-box">
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://static.pexels.com/photos/21787/pexels-photo.jpg" style="width:100%" class="img-responsive">
<div class="container">
<div class="caraous-title text-center">
<div class="col-md-12">
<h1>Membership Management Platform</h1>
<h3>Call us now as we are running discount of up-to 10%</h3>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://images.pexels.com/photos/458917/pexels-photo-458917.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive">
<div class="container">
<div class="caraous-title text-center">
<div class="col-md-12">
<h1>Membership Management Platform</h1>
<h3>Call us now as we are running discount of up-to 10%</h3>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://images.pexels.com/photos/130879/pexels-photo-130879.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive">
<div class="container">
<div class="caraous-title text-center">
<div class="col-md-12">
<h1>Membership Management Platform</h1>
<h3>Call us now as we are running discount of up-to 10%</h3>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<div class="content-box">
<div class="row">
<div class="col-md-12">
<div class="sec-title">
<h2>Yummy delicious food</h2>
<p>It 's through the taste of the tongue that you can step in the heart of your guests. Serving fresh and tasty feast is our priority along with a variety of cuisines. We are specialist in serving food of various regions like pure Rajasthani food, Punjabi food, Gujarati food, South Indian food, etc. We have different Vegetarian and Non-Vegetarian Food Caterer units in Delhi. Along with the delicious food what is required is the exquisite display that amplifies the flavors. A tasty treat is always remembered. We lay a keen emphasis on proper blend of spices and services. We provide wedding catering services in Delhi.
Every Function is very special for us as same as to our customers. We take care of all work and provide you with the best caterers in Delhi.We take all work in our hands with the thought that client relax and remain busy in there happy occasion and we do all the hard work as wedding planner in Delhi. Same as in west, the thought is, you to take delight and remain stress free. As best wedding caterers in Delhi, Corporate event caterers in Delhi and best caterers in South Delhi, We handle and properly organize your functions [ wedding, corporate event, theme party, birthday party, etc] from the beginning to end of the function. When we are with you, then you don't need anyone else as we provide best services to you. Just call us for all your catering requirements.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/************ Crousel CSS **************/
.item img {width:100%; max-height:200px;display: block;}
.caraous-title {
position: absolute;
top: 35%;
left: 25px;
right: auto;
width: 96.66666666666666%;
color: #000;
}
.caraous-title h1 {color:#FFF;font-size:20px; font-weight:600;margin:0;}
.caraous-title h3 {margin-bottom:20px;color:#fff;font-size:15px; letter-spacing:1px;}
.caraous-title span {color:#aa1f43;}
.caraous-img-box img {width:50%;}
/* Button */
.site-btn{padding:12px 25px 12px 25px;border-radius:2px;background:#DF314D;border-color:transparent;font-size:14px;}
.site-btn:hover{background:#C9223D ;border:transparent;}
.site-btn2{padding:12px 25px 12px 25px;border-radius:2px;background:#05681e;border-color:transparent;font-size:14px;}
.site-btn2:hover{background:rgb(128, 197, 71); ;border:transparent;}
/*************** Generic CSS ***************/
.margin-b-70 {margin-top:120px;}
/************ SIDEBAR **************/
.list-links li {
border-top: 1px dotted #d4d4d4;
padding: 10px 10px 10px;
border-bottom: 1px dotted #d4d4d4;
list-style:none;
margin: 0px;
}
.sidebar-box {background:#fff; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95);}
.sidebar-box ul {margin:0px; padding:0px;}
.sidebar-box ul a {font-size:16px; letter-spacing:1px; color:#000;}
.sidebar-box li:hover {background:#e2e2e2; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95); }
.sidebar-box ul a:hover {list-style:none;text-decoration: none;}
.bg-box {padding:15px ;background:#fff; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95);}
.content-box {padding:15px ;background:#fff; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95);}
.sec-title h2 {font-weight:600;color:#e93402;}
.sec-title p{line-height:26px; font-weight:500;}
/************** NAVIGATION ***************/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
.dropdown-menu {padding:0px;}
.dropdown-menu > li > a {
color: #514f4f;
text-decoration: none;
background-color: #fff ;
}
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #e93402 ;
}
.dropdown-menu > li > a {padding:8px; border-bottom:1px solid #e2e2e2;}
.navbar-default {
background-color: #e93402;
padding:25px 0px 15px 0px;
font-weight:400;
letter-spacing:2px;
font-size:16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-brand {
color: #dfdfdf;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #dfdfdf;
}
.navbar-default .navbar-nav > li > a {
color: #dfdfdf;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #e93402;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #e93402;
}
.navbar-default .navbar-toggle {
border-color: #e93402;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #e93402;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #dfdfdf;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #dfdfdf;
}
.navbar-default .navbar-link {
color: #dfdfdf;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #dfdfdf;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #e93402;
}
}
$(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});
});