<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 ---------->
<input type="checkbox" name="mobile-nav" id="mobile-nav" class="kfc-check" onchange="this.blur()">
<label for="mobile-nav" class="kfc white" tabindex="0"><span></span></label>
<nav role="navigation" class="header-nav">
<div class="fixed-nav">
<div class="menu">
<ul>
<li class="page_item page-item-2">
<a href="#" class="waves-effect">
Find Crane
</a>
</li>
<li class="page_item page-item-2">
<a href="#" class="waves-effect">
Book Crane
</a>
</li>
<li class="page_item page-item-2">
<a href="#" class="waves-effect">
Calculate Price
</a>
</li>
<li class="page_item page-item-2">
<a href="#" class="waves-effect">
My Bookings
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid banner">
<div class="container text-center">
<div class="row">
<h3>Looking for the Best Service Provider? Get the App!</h3>
</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 hidden-xs hidden-sm">
<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>Book Crane</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Fromlocation">Journey Starts From</label>
<div class="col-md-6">
<input id="Fromlocation" name="Fromlocation" placeholder="Location" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="journeyend">Journey Ends at</label>
<div class="col-md-6">
<input id="journeyend" name="journeyend" placeholder="Location" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="date">Journey Start Date</label>
<div class="col-md-6">
<input id="date" name="date" placeholder="DD-MM-YYYY" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="distance">Total Distance (Optional)</label>
<div class="col-md-4">
<input id="distance" name="distance" placeholder="Approax Distance in Kms." class="form-control input-md" type="text">
<span class="help-block">Rough distance Figure</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="timings">Journey Start Time</label>
<div class="col-md-6">
<input id="timings" name="timings" placeholder="HH-MM" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="enddate">Journey End Date</label>
<div class="col-md-6">
<input id="enddate" name="enddate" placeholder="DD-MM-YYYY" class="form-control input-md" required="" type="text">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="estimate"></label>
<div class="col-md-4">
<button id="estimate" name="estimate" class="btn btn-warning">Get an Estimate</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
body {
margin: 0;
font-family: 'Raleway', 'Arial', sans-serif;
}
.marginTB40{
margin-top:90px;
margin-bottom:40px;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*--------------------------------------
Sets the actionable area for the kfc
including a label for usability
--------------------------------------*/
.kfc,
.kfc:after,
.kfc *,
.kfc *:before,
.kfc *:after,
.header-nav *,
.header-nav *:before,
.header-nav *:after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.kfc {
cursor: pointer;
height: 60px;
margin-bottom: 0;
width: 60px;
z-index: 9001;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
background: #08c;
}
.kfc:after {
bottom: 7px;
color: #FFFFFF;
content: 'Menu';
font-size: 13px;
font-weight: 300;
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
/*--------------------------------------
Creates the look of the kfc icon
using the inner span and pseudo-elements
--------------------------------------*/
.kfc span,
.kfc span:before,
.kfc span:after {
background: #FFFFFF;
border-radius: 0.2em;
height: 4px;
left: 10px;
position: absolute;
top: 22px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
width: 40px;
}
/* Reset the left and create the pseudo-element */
.kfc span:before,
.kfc span:after {
content: '';
left: 0;
}
/* Top bar position */
.kfc span:before {
top: -8px;
}
/* Bottom bar position */
.kfc span:after {
top: 8px;
}
/* Get rid of more on action (IE9 or higher) */
.kfc-check:checked + .kfc:after {
content: '';
}
/* Get rid of the middle bar on action (IE9 or higher) */
.kfc-check:checked + .kfc span {
height: 0;
width: 0;
}
/* Moves the top and bottom bars to the middle on action (IE9 or higher) */
.kfc-check:checked + .kfc span:before,
.kfc-check:checked + .kfc span:after {
top: 6px;
}
/* Rotates the top bar on action with full browser support (IE9 or higher) */
.kfc-check:checked + .kfc span:before {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
/* Rotates the bottom bar on action with full browser support (IE9 or higher) */
.kfc-check:checked + .kfc span:after {
-webkit-transform: rotate(-225deg);
-ms-transform: rotate(225deg);
transform: rotate(-225deg);
}
#mobile-nav:focus + .kfc,
.kfc:focus,
.kfc:hover {
background: rgba(0, 136, 204, 0.9);
}
.kfc-check:checked + .kfc {
width: 200px;
}
.kfc-check:checked + .kfc:after {
bottom: 18px;
content: 'Close Menu';
font-size: 20px;
padding-left: 30px;
}
#mobile-nav {
left: -9999px;
position: fixed;
top: 0;
}
.header-nav ul li a:active,
.header-nav ul li a:focus,
.header-nav ul li a:hover,
#mobile-nav:focus + .kfc,
.kfc:focus,
.kfc:hover {
background: rgba(0, 0, 0, 0.1);
outline: none;
border-bottom: 1px solid aqua;
}
.fixed-nav {
background: #08c;
height: 60px;
position: fixed;
width: 100%;
z-index: 9000;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.header-nav {
float: left;
height: 60px;
position: relative;
width: 100%;
}
.header-nav ul {
background: #fff;
height: calc(100vh - 60px);
list-style: none;
margin: 0;
overflow-y: auto;
padding: 10px 0 0 0;
position: absolute;
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
-webkit-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
width: 200px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.075);
top: 100%;
z-index: 1;
}
.kfc-check:checked ~ .header-nav ul {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.header-nav ul li {
float: left;
position: relative;
width: 100%;
}
.header-nav ul li a {
color: rgba(0, 0, 0, 0.79);
display: block;
float: left;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.75px;
line-height: 24px;
margin-left: 0;
overflow: hidden;
padding: 12px 60px 12px 12px;
position: relative;
text-decoration: none;
width: 100%;
}
/* product page Css */
.banner {
background-color :#42c8f4;
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;
}
/* 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: 48px;
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; }
.form-control:focus{border-color: #249ac1; box-shadow: none; -webkit-box-shadow: none;}
