<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 ---------->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<!-- top section starts here -->
<div class="top-section bg-light hdden-xs">
<div class="container">
<div class="row">
<div class="col-sm-6 list-inline list-unstyled no-margin hidden-xs">
<p class="no-margin">
Have any questions?
<strong>
+080 124 880
</strong>
or mail@codenpixel.com
</p>
</div>
<div class="pull-right col-sm-6">
<ul class="list-inline list-unstyled pull-right">
<li class="active">
<a href="#">
<i class="ti-cart">
</i>
Faq
</a>
</li>
<li>
<a href="#">
Sign In
</a>
</li>
<li>
<a href="#">
Sign Up
</a>
</li>
<li>
<a href="#">
<i class="ti-shopping-cart">
</i>
Cart
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- top section ends here -->
<!-- header section starts here -->
<div class="header-section">
<div class="container">
<div class="row">
<div class="col-sm-3">
<a href="index.html" class="navbar-brand logo">
<img src="http://codenpixel.com/demo/kupon2/images/logo.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-sm-9">
<div class="search-form">
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<input class="form-control" placeholder="Search Deals & Coupons" type="text">
</div>
</div>
</div>
<!-- /.col 4 -->
<div class="col-sm-4">
<select class="form-control">
<option value="0" selected="selected">
Select your categorie
</option>
<option value="1">
All
</option>
<option value="2">
Travel
</option>
<option value="3">
Beauty & Spas
</option>
<option value="4">
Career & skills
</option>
<option value="5">
Food & Drinks
</option>
<option value="6">
Health & Beauty
</option>
</select>
</div>
<!-- /.col 3 -->
<div class="col-sm-4">
<a class="btn btn-raised ripple-effect btn-default btn-block" href="results.html">
Search Deals
</a>
</div>
<!-- /.col 1 -->
</div>
</div>
</div>
</div>
</div>
<!-- navbar section starts here -->
<nav class="navbar navbar-default navbar" 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>
</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-left">
<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="banner-sidebar-section">
<div class="container">
<div class="row">
<div class="col-sm-3 sidebar">
<div class="bg-white shadow">
<div class="sidebar-menu">
<div class="sidebar-search-text">
<input class="form-control" placeholder="Search Cranes in India" type="text">
</div>
<!-- Sidebar navigation -->
<ul class="nav sidebar-nav">
<li class="dropdown">
<a class="ripple-effect dropdown-toggle" href="#" data-toggle="dropdown">
<span class="glyphicon glyphicon-user icon"></span>
Travel
<span class="sidebar-badge">
12
</span>
<b class="caret">
</b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#" tabindex="-1">
Europe
<span class="sidebar-badge">
12
</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Gifts
<span class="sidebar-badge">
3
</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Products
<span class="sidebar-badge">
456
</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Tickets
<span class="sidebar-badge badge-circle">
12
</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Health
<span class="sidebar-badge badge-circle">
45
</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Things To Do
<span class="sidebar-badge badge-circle">
117
</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Fashion
<span class="sidebar-badge badge-circle">
117
</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Fun Stuff
<span class="sidebar-badge badge-circle">
117
</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user icon"></span>
Electronics
<span class="sidebar-badge badge-circle">
117
</span>
</a>
</li>
</ul>
<!-- Sidebar divider -->
</div>
<!-- /.widget -->
</div>
<!-- /col 4 - sidebar -->
</div>
</div>
</div>
</div>
<!-- banner & sidebar section ends here -->
<div class="icon-text-section">
<div class="container ">
<div class="row ">
<div class="col-md-3 icon-text-column">
<div class="icon-column">
<div class="col-xs-2">
<span class="glyphicon glyphicon-cog icon2"></span>
</div>
<div class="col-xs-10 icon-column-title">
<h4>Ideal Layout</h4>
<p>Find Perfect Offer</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 icon-text-column">
<div class="icon-column">
<div class="col-xs-2">
<span class="glyphicon glyphicon-cog icon2"></span>
</div>
<div class="col-xs-10 icon-column-title">
<h4>Ideal Layout</h4>
<p>Find Perfect Offer</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 icon-text-column">
<div class="icon-column">
<div class="col-xs-2 ">
<span class="glyphicon glyphicon-cog icon2"></span>
</div>
<div class="col-xs-10 icon-column-title">
<h4>Ideal Layout</h4>
<p>Find Perfect Offer</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 icon-text-column">
<div class="icon-column">
<div class="col-xs-2 ">
<span class="glyphicon glyphicon-cog icon2"></span>
</div>
<div class="col-xs-10 icon-column-title">
<h4>Ideal Layout</h4>
<p>Find Perfect Offer</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
<!-- listing section starts here -->
<div class="crane-listview-section">
<div class="container padding40">
<div class="col-md-9">
<div class="crane-listing bg-white">
<div class="crane-img-size">
<a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a>
<span class="sticker">NEW</span>
</div>
<div class="crane-text size ">
<h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3>
<h5>Launched On: 07-Jun-2016</h5>
<p class="news">Price: $ 30,000 Ex-showroom, New York</p>
<h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6>
<a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a>
<ul class="p-t">
<li><a href="single.html">Photos</a></li>
<li><a href="single.html">All Versions</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="crane-listing bg-white">
<div class="crane-img-size">
<a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a>
<span class="sticker">NEW</span>
</div>
<div class="crane-text size ">
<h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3>
<h5>Launched On: 07-Jun-2016</h5>
<p class="news">Price: $ 30,000 Ex-showroom, New York</p>
<h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6>
<a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a>
<ul class="p-t">
<li><a href="single.html">Photos</a></li>
<li><a href="single.html">All Versions</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="crane-listing bg-white">
<div class="crane-img-size">
<a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a>
<span class="sticker">NEW</span>
</div>
<div class="crane-text size ">
<h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3>
<h5>Launched On: 07-Jun-2016</h5>
<p class="news">Price: $ 30,000 Ex-showroom, New York</p>
<h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6>
<a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a>
<ul class="p-t">
<li><a href="single.html">Photos</a></li>
<li><a href="single.html">All Versions</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="crane-listing bg-white">
<div class="crane-img-size">
<a href="single.html"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt=" " class="img-responsive"></a>
<span class="sticker">NEW</span>
</div>
<div class="crane-text size ">
<h3><a href="single.html">Mercedes-Benz C250 CDI</a></h3>
<h5>Launched On: 07-Jun-2016</h5>
<p class="news">Price: $ 30,000 Ex-showroom, New York</p>
<h6>Not rated yet,<a href="single.html"> Be the first one to write a review</a></h6>
<a href="price.html" class="read hvr-shutter-in-horizontal">Check on-road price</a>
<ul class="p-t">
<li><a href="single.html">Photos</a></li>
<li><a href="single.html">All Versions</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-3">
<h4>Launched On: 07-Jun-2016</h4>
</div>
</div>
</div>
<!-- Footer section starts here -->
<div class="conversion-section clearfix">
<div class="container">
<div class="conversion">
<div class="col-md-3 col-sm-3 col-xs-12 pull-right">
<a href="#" class="btn btn-raised btn-danger ripple-effect btn-lg" data-original-title="" title="">
<i class="ti-shopping-cart">
</i>
Sumbit Deal
</a>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<h3>
Welcome to Kupon. Responsive Deal Template
</h3>
<p>
Carefully designed to bring you the best performance, usage and customization experience!
</p>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container">
<div class="col-sm-4">
<img src="http://codenpixel.com/demo/kupon2/images/logo-dark.png" alt="#" class="img-responsive logo">
<p>
Kupon,travel deals & publishing,with minimal design. We provide you with the latest fresh inspiration straight from the industrie.
</p>
</div>
<div class="col-sm-4">
<h5>
COMMON placeS
</h5>
<ul class="places">
<li>
<a href="#" class="place">
Vacation
</a>
</li>
<li>
<a href="#" class="place">
Rentals
</a>
</li>
<li>
<a href="#" class="place">
Deals
</a>
</li>
<li>
<a href="#" class="place">
Travel deals
</a>
</li>
<li>
<a href="#" class="place">
Vacation deals
</a>
</li>
<li>
<a href="#" class="place">
Adriatic coast
</a>
</li>
<li>
<a href="#" class="place">
Europe
</a>
</li>
<li>
<a href="#" class="place">
Island
</a>
</li>
</ul>
</div>
<div class="col-sm-2">
<h5>
CATEGORIES
</h5>
<ul class="list-unstyled">
<li> <a href="#"> Rental Service </a> </li>
<li> <a href="#"> Repair </a> </li>
<li> <a href="#"> Hire for a Month </a> </li>
<li> <a href="#"> Hire for Construction </a> </li>
<li> <a href="#"> Towing Service </a> </li>
<li> <a href="#"> Customer Service</a> </li>
</ul>
</div>
<div class="col-sm-2">
<h5>
ABOUT US
</h5>
<ul class="list-unstyled">
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About Us </a> </li>
<li> <a href="#"> Services </a> </li>
<li> <a href="#"> Terms </a> </li>
<li> <a href="#"> Policies </a> </li>
<li> <a href="#"> List your Site </a> </li>
</ul>
</div>
</div>
<div class="footerbottom">
<div class="container">
<div class="col-sm-7">
<p>
<strong>
Copyright 2015
</strong>
Kupon- deals and Coupons template made with
<strong>
by Codenpixel
</strong>
</p>
</div>
<div class="col-sm-5 ">
</div>
</div>
</div>
</footer>
body {
font-family: 'Roboto';font-size: 15px;
background-color:#ededed;
}
/* top section */
.top-section {
padding: 10px 0 0;
background: #303F9F;
color: #FFFFFF;
font-size: 13px;
}
.top-section ul li a {
color: #FFFFFF;
font-size: 14px;
}
/* top section Ends here */
/* header section starts here */
.header-section {
padding: 25px 0;
background-color: #3F51B5;
}
.search-form .btn {
padding: 14.5px;
border-radius: 0;
}
.navbar-brand {
float: left;
padding: 0;
}
.navbar-brand img {
float: left;
transition: all .5s ease-out;
margin: 0;
}
.header input {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
}
.form-control, select {
display: block;
width: 100%;
height: 44px;
border: 1px solid #ededed;
border-radius: 0;
background-color: #fff;
background-image: none;
box-shadow: none;
color: #000;
font-size: 14px;
line-height: 1.42857143;
}
/* header section ends here */
/* sidebar section starts here */
.shadow {
box-shadow: 0 2px 3px -1px #DCDCDC;
}
.sidebar-search-text {
display: block;
padding: 15px 15px 20px;
margin: 35px 0 5px;
background-color: #fafafa;
color: #000;
border-bottom: 1px solid #ededed;
}
.sidebar-search-text input {
font-size: 16px;
border: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: currentcolor;
border-bottom: 2px dotted #E0E0E0;
padding-bottom: 9px;
box-shadow: none;
}
.sidebar .sidebar-nav {
margin: 0;
padding: 0;
background: #fff;
}
.sidebar .sidebar-nav li {
position: relative;
list-style-type: none;
border-bottom: 0;
}
.sidebar .sidebar-nav li a {
position: relative;
cursor: pointer;
user-select: none;
display: block;
height: 48px;
line-height: 48px;
padding: 0 56px 0 16px;
text-decoration: none;
clear: both;
font-weight: 400;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: inherit;
border-bottom: 1px solid #ededed;
}
.ripple-effect {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
}
.sidebar .sidebar-nav li i {
padding-right: 10px;
color: #000;
border-right: 1px solid #ededed;
margin-right: 20px;
}
.sidebar-badge {
position: absolute;
right: 16px;
top: 0;
}
.strong, b, strong {
color: #000;
font-weight: 500;
}
.sidebar .sidebar-nav li a {
position: relative;
cursor: pointer;
user-select: none;
display: block;
height: 48px;
line-height: 48px;
padding: 0 56px 0 16px;
text-decoration: none;
clear: both;
font-weight: 400;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: inherit;
border-bottom: 1px solid #ededed;
}
.sidebar .sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.sidebar .sidebar-nav li {
position: relative;
list-style-type: none;
border-bottom: 0;
}
.icon {
font-size :16px;
padding: 25px 10 0 0;
color:grey;
}
/* icon-text-info bar starts here */
.icon-text-section {
margin-left : -15px;
margin-right : -15px;
margin-top:50px;
background-color: #ffffff;
box-shadow: 0 2px 3px -1px rgba(186, 186, 186, 0.7);
padding: 20px;
}
.icon-column-title h4{
line-height: 10px;
font-weight: 700;
color: #000000;
margin-bottom: 10px;
text-transform: uppercase;
}
.icon2 {
font-size :26px;
padding: 0px 0 0 50;
color:red;
}
/* listing view starts here */
.tips-info {
width: 70%;
}
.crane-listing {
margin-bottom: 2.7em;
border: 1px solid #ddd;
padding: 15px;
}
.crane-img-size {
float: left;
width: 40%;
position: relative;
}
a {
color: #337ab7;
text-decoration: none;
}
span.sticker {
background-color: #349e11;
color: #FFF;
display: block;
font-size: 14px;
padding: 7px 15px;
position: absolute;
left: 0px;
text-align: right;
top: -1px;
z-index: 2;
line-height: 1;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.crane-text.size {
float: right;
width: 56%;
}
.crane-text h3 {
font-size: 1.4em;
color: #333333;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 0.5em;
}
.crane-text h5 {
font-size: 1.1em;
color: #333333;
font-weight: 600;
}
.crane-text h6 {
font-weight: 400;
color: #777;
margin-bottom: 1em;
font-size: 1em;
}
ul.p-t li {
display: inline-block;
margin-right: 15px;
}
.bg-white {
background-color : #fff;
color :#161616;
}
.padding40 {
padding:50px;
}
/* Footer & Convrsion section starts here */
.conversion-section {
background-color: #FFFFFF;
margin-top: 25px;
padding: 25px 30px;
}
.conversion h3 {
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.conversion a.btn {
margin-top: 24px;
}
.btn-danger, .dropdown-toggle.btn-danger {
background-color: #ff5722;
}
.btn-danger:hover {
background-color: #ff5722;
}
#footer {
padding-top: 60px;
background: #fff;
border-top: 1px dashed #ededed;
}
p {
margin: 0 0 1.75em;
}
#footer h5, #footer img.logo {
margin-bottom: 30px;
}
#footer strong {
color: #000;
}
.strong, b, strong {
color: #000;
font-weight: 500;
}
#footer a {
color: #000;
}
.places {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.places li {
float: left;
}
.place {
position: relative;
display: inline-block;
margin: 0 10px 10px 0;
padding: 0 20px 0 23px;
height: 26px;
border-radius: 3px 0 0 3px;
background: #F3F3F3;
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 26px;
-webkit-transition: all .4s;
}
.place::after {
position: absolute;
top: 0;
right: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 10px solid #EFF1F5;
background: #fff;
content: '';
-webkit-transition: all .4s;
}
#footer .footerbottom {
margin-top: 50px;
padding: 25px 0;
border: 1px dashed #ededed;
}
