<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <nav class="navbar navbar-default navbar-fixed-top navcarbox" 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="#">Brand</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">Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-collapse --> </nav> <div class="container-fluid banner"> <div class="container text-center"> <div class="row"> <h2>Looking for the Best Service Provider? Get the App!</h2> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-grey"> <div class="side-bar "> <ul> <b><li><i class="fa fa-wrench" aria-hidden="true"></i>RELATED SEARCHES</li></b> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Electricians</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Plumbers</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Carpenters</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Hospitals</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Ambulance Services</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Blood Banks</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Wallpapers Dealers</a></li> </ul> </div> <div class="side-bar bg-grey"> <ul> <b><li><i class="fa fa-paper-plane-o" aria-hidden="true"></i>Locations Service Providers</li></b> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">New Delhi</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Amritsar</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Chandigarh</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Mumbai</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Jaipur</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Mohali</a></li> <li><i class="fa fa-angle-double-right" aria-hidden="true"></i><a href="">Banglore</a></li> </ul> </div> <div class="need-help text-center"> <i class="fa fa-user" aria-hidden="true"></i> <h5>Need Help?</h5> <h4>+45-455-453</h4> <p><span>Monday to Friday 9.00am - 7.30pm</span></p> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 bg-brown paddingTB20"> <form class="form-horizontal "> <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"> <label class="col-md-4 control-label" for="">Upload Photos</label> <div class="col-md-4"> <input id="" name="" class="input-file" type="file"> </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>

.banner { background-color :#efba32; padding-top : 70px; padding-bottom : 40px; margin-bottom:30px; } /* Navigation */ .navcarbox { padding-left:5px; display: block; line-height: 1.42857143; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); transition: box-shadow .25s; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #fff; text-decoration: none; background-color: #f7941d; } .navbar-brand img { float: left; transition: all .5s ease-out; margin: 0; } /* listing-view Css */ img{width:100%;} .bg-grey { background-color: #f2f2f2; } a { color : #000; font-weight: 550; } a:hover { } .listing-number{ width: 100%; } .listing-number li { display: inline-block; list-style-type: none; overflow: hidden; position: relative; width: 50%; float: left; color: #636363; } .listing-enquiry-sec { width: 100%; overflow: hidden; position: relative; box-sizing: border-box; } .listing-enquiry-sec ul { padding:0pt; } .listing-enquiry-sec ul li { margin: 0in; float: left; display: inline-block; line-height: 18pt; color: #343c42; font-weight: 400; list-style-type: none; width: 100%; box-sizing: border-box; } .listing-enquiry-sec ul li a { margin-right: .052083333in; color: #3e4c56; padding: 3.75pt; text-align: center; font-weight: 600; border-radius: .020833333in; margin-left: 3pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; box-sizing: border-box; display: block; text-align: center; border-image: none; border-color: #d6d1d1; border-style: solid; border-top-width: .75pt; border-bottom-width: .75pt; border-left-width: 1pt; border-right-width: .75pt; outline: none; transition: all .5s ease; } .listing-enquiry-sec ul li a:hover { color: red; list-style-type: none; } .listing-title h3 { font-size: 1.5pc; padding-top: .3125pc; padding-bottom: 6pt; color: #000; font-weight: 700; } .item-listing { margin-top:15px; } .item-listing:hover { background-color : #fff; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); transition: box-shadow .25s; } @media screen and ( min-width: 600px ) { .listing-enquiry-sec ul li { width: 25%; } /* Sidebar Css */ /* listing css */ .tb-padding{padding:50px 0px;} .cover-size{width:100%;} ul{list-style:none; padding:0px; margin:0px;} .side-bar{border: .75pt solid #e6e3e3; margin-top:20px;} .side-bar ul li{padding:10px 0px; border-bottom: .75pt solid #e6e3e3;} .side-bar ul li:last-child{border:none;} .side-bar ul li i{color:#c2c2c2; padding:0px 5px;} .side-bar ul li a{text-decoration:none;} .need-help{padding:5px; border:1px solid #c2c2c2; margin-top:10px;} .need-help i{font-size:45px; color:#ff0000; padding:20px 0px;} .search-box{background-color:#dedede;padding:5px 0px;} .search-box select{font-size:12px; height:23px;} .search-box i{float:right; padding:5px; background-color:#fff; margin-right:5px;} .image-size > img{width:100%;} p span{color:#c2c2c2; padding:0px 5px;} .customs-p p{line-height:20px; margin:0px;} .small-padding-bg{padding:20px 0px; background-color:#fff; margin:10px 0px;} .small-padding-bg:hover{box-shadow:3px 3px 5px #c2c2c2, -3px -3px 5px #c2c2c2;} .customs-margin{margin-top:30px;} /* Add listing Css */ .bg-brown { background-color: #eaeaea; box-shadow: 2px 2px 2px #888888; } .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: 38px; 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: black; } .form-control:-moz-placeholder { color: black; } .form-control::-moz-placeholder { color: black; } .form-control:-ms-input-placeholder { color: black; }