<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="content-box">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal marginT20">
<fieldset>
<!-- Form Name -->
<legend>Add Listing</legend>
<!-- Name of business input-->
<div class="form-group">
<div class="col-md-12">
<input id="name" name="name" placeholder="Name of your Service" class="form-control" required="" type="text">
</div>
</div>
<!-- Description -->
<div class="form-group">
<div class="col-md-12">
<textarea class="form-control" id="about" name="about">Write about your business</textarea>
</div>
</div>
<!-- Contact Info-->
<div class="form-group">
<div class="col-md-6">
<input id="" name="" placeholder="Business Phone No." class="form-control" required="" type="text">
</div>
<div class="col-md-6">
<input id="" name="" placeholder="Email" class="form-control" required="" type="text">
</div>
</div>
<!-- Address input-->
<div class="form-group">
<div class="col-md-6">
<input id="" name="" placeholder="Street Address" class="form-control" required="" type="text">
</div>
<div class="col-md-6">
<input id="address2" name="address2" placeholder="Street Address2 (Optional)" class="form-control" type="text">
</div>
<div class="col-md-6">
<input id="State" name="State" placeholder="State" class="form-control" required="" type="text">
</div>
<div class="col-md-6">
<input id="City" name="City" placeholder="City" class="form-control" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-6">
<input id="pincode" name="pincode" placeholder="Pincode" class="form-control" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-6">
<input id="contactperson" name="contactperson" placeholder="Contact Person Name" class="form-control" required="" type="text">
</div>
<div class="col-md-6">
<input id="" name="" placeholder="Contact Person Phone No." class="form-control" required="" type="text">
</div>
</div>
<!-- File Button -->
<div class="form-group">
<div class="col-md-12">
<div class="upload-box">
<div class="hold"><a href="#">Maximum file size 20 MB</a> <span class="btn-file"> Upload Photos
<input type="file">
</span> </div>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-4">
<button id="listing-button" name="listing-button" class="btn btn-warning">Add my Business</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/**************** Add Listing Form *************/
legend {font-weight:600;color:#e93402;border-bottom:1px solid #e93402;margin-bottom:20px;}
.paddingTB20 { padding-top : 20px; padding-bottom:20px;}
.marginT20 { margin-top : 20px;}
textarea.form-control {
background-color: #fff;
color:#b2b1b0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e9e6e0;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
}
input.form-control {
height: 46px;
background-color: #fff;
color:#000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e9e6e0;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
}
form-control::-webkit-input-placeholder { color: #696969; }
.form-control:-moz-placeholder { color: #696969; }
.form-control::-moz-placeholder { color: #696969; }
.form-control:-ms-input-placeholder { color: #696969; }
.form-control:focus{border-color: #e93402; box-shadow: none; -webkit-box-shadow: none;}
/* upload button css */
.upload-box .btn-file {
background-color: #adaba9;
}
.upload-box .btn-file:hover {
background-color: #686563;
}
.upload-box .hold {
float: left;
width: 100%;
position: relative;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
.upload-box .hold a {
font: 400 14px/36px 'Roboto',sans-serif;
color: #666;
text-decoration: none;
}
.upload-box .btn-file {
position: relative;
overflow: hidden;
float: left;
padding: 12px 9px;
font: 300 14px/14px 'Roboto',sans-serif;
color: #fff;
margin: 0 10px 0 0;
text-transform: uppercase;
border-radius: 3px;
cursor: pointer;
}
.upload-box .btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
opacity: 0;
outline: none;
background: #fd0707;
cursor: inherit;
display: block;
}
/************ 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");
});
});
