<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="tinkersale-navbar">
<div class="container">
<div class="row">
<div class="tinkersale-navbar-header">
<h4><a href="#">Tinkersale</a></h4>
</div>
<div class="tinkersale-navbar-search smallsearch col-sm-6">
<input class="tinkersale-navbar-input col-sm-7" type="text" placeholder="Search local business in india" name="">
<input name="searchinput" type="text" placeholder="Please type a location" class="tinkersale-navbar-search-input col-xs-4">
<button class="tinkersale-navbar-button col-xs-1" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
<div id="tinkersale-navbar" class="navbar-collapse col-sm-4">
<ul class="nav pull-right">
<li><a href="#">Add Bussiness</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">My account</a></li>
</ul>
<div>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="background-color:#e8e8e8">
<div class="container container-pad" id="property-listings">
<div class="row1">
<div class=" result col-sm-6">
<p class="font-weight-bold fnt-mighter">862 results for Apparels & Accessories near Hyderabad</p>
</div>
<div class="sort col-sm-2">
<select class="custom-select" name id="Sort Result">
<option selected>Popular</option>
<option value="1">A-Z</option>
<option value="2">Recent</option>
<option value="3">Ratings</option>
</select>
</div>
<div class="desktopMapView col-sm-4">
<iframe width="100%" height="50" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=15+Springfield+Way,+Hythe,+CT21+5SH&aq=t&sll=52.8382,-2.327815&sspn=8.047465,13.666992&ie=UTF8&hq=&hnear=15+Springfield+Way,+Hythe+CT21+5SH,+United+Kingdom&t=m&z=14&ll=51.077429,1.121722&output=embed"></iframe>
</div>
</div>
<div class="row1">
<div class=" business col-sm-8">
<div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing">
<div class="media">
<a class="pull-left" href="#" target="_parent">
<img alt="image" class="img-responsive" src="http://images.prd.mris.com/image/V2/1/Yu59d899Ocpyr_RnF0-8qNJX1oYibjwp9TiLy-bZvU9vRJ2iC1zSQgFwW-fTCs6tVkKrj99s7FFm5Ygwl88xIA.jpg"></a>
<div class="clearfix visible-sm"></div>
<div class="media-body fnt-smaller">
<a href="#" target="_parent"></a>
<h3 class="eachPopularTitle">
<a href="#" target="_parent">Upendra handloom textile </a></h3>
<div class="row">
<div class="col-sm-5">
<ul class="list-inline mrg-0 btm-mrg-10 clr-535353 ">
<li> <span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="fnt-brighter"> 0 reviews</span>
</li>
</ul>
<ul class="list-inline mrg-0 btm-mrg-10 Taglist">
<li> <a href="#" target="_parent">Handlooms</a></li>
<li> <a href="#" target="_parent">Sarees & Blouses</a></li>
</ul>
<ul class="list-inline mrg-0 btm-mrg-10 clr-535353 text-bottom">
<li> <a href="#" target="_parent">Email</a></li>
<li > | </li>
<li> <a href="#" target="_parent">Website</a></li>
</ul>
</div>
<div class="col-sm-3 openNow">
<strong>OPEN</strong>
</div>
<div class="col-sm-4 eachPopularRight text-right">
<a class="businessContact fnt-mighter" href="tel:9666675463 fnt-mighter">+91 9666675463</a>
<address class="businessArea fnt-mighter">Boduppal
<br>Hyderabad - 500039</address>
<div class="directionsLocationsBlock"><a target="_blank" rel="nofollow" href="http://www.google.com/maps/place/17.4139,78.5783">Directions</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing">
<div class="media">
<a class="pull-left" href="#" target="_parent">
<img alt="image" class="img-responsive" src="http://images.prd.mris.com/image/V2/1/Yu59d899Ocpyr_RnF0-8qNJX1oYibjwp9TiLy-bZvU9vRJ2iC1zSQgFwW-fTCs6tVkKrj99s7FFm5Ygwl88xIA.jpg"></a>
<div class="clearfix visible-sm"></div>
<div class="media-body fnt-smaller">
<a href="#" target="_parent"></a>
<h3 class="eachPopularTitle">
<a href="#" target="_parent">Arvind textile </a></h3>
<div class="row">
<div class="col-sm-5">
<ul class="list-inline mrg-0 btm-mrg-10 clr-535353 ">
<li> <span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="fnt-brighter"> 0 reviews</span>
</li>
</ul>
<ul class="list-inline mrg-0 btm-mrg-10 Taglist">
<li> <a href="#" target="_parent">Handlooms</a></li>
<li> <a href="#" target="_parent">Sarees & Blouses</a></li>
</ul>
<ul class="list-inline mrg-0 btm-mrg-10 clr-535353">
<li> <a href="#" target="_parent">Email</a></li>
<li > | </li>
<li> <a href="#" target="_parent">Website</a></li>
</ul>
</div>
<div class="col-sm-3 openNow">
<strong>OPEN</strong>
</div>
<div class="col-sm-4 eachPopularRight text-right">
<a class="businessContact fnt-mighter" href="tel:9666675463">+91 9666675463</a>
<address class="businessArea fnt-mighter">maniquppal
<br>Hyderabad - 500039</address>
<div class="directionsLocationsBlock"><a target="_blank" rel="nofollow" href="http://www.google.com/maps/place/17.4139,78.5783">Directions</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-8 col-sm-4 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing text-center">
<strong class="fnt-mighter">Need help in choosing business?</strong>
<p class="fnt-mighter">Let tinkersale help u in that</p>
<input type='button' class='btn-color' name='next' value='Get me best prices' />
</div>
<a href="#" class="list-group-item active">Reviews</a>
<div class="brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing">
<div class="media">
<a class="pull-left" href="#" target="_parent">
<img alt="image" class="img-responsive" src="https://cdn3.f-cdn.com/files/download/33774556/friendly+face.jpg"</a>
<div class="media-body fnt-smaller">
<a href="#" target="_parent"></a>
<h3 class="eachPopularTitle">
<a href="#" target="_parent">Rajiv</a></h3>
<div class="row">
<div class="col-sm-9">
<ul class="list-inline mrg-0 btm-mrg-10 clr-535353 ">
<li> <span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="fnt-lighter">date and time</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-24">
<ul class="list-inline mrg-0 btm-mrg-20 clr-535353 ">
<li> <a href="#" target="_parent">White House Apparels Pvt Ltd</a></li>
<li><p> www.tendertm.com is a leading procurement information & service provider. TenderTm is changing the procurement & marketing strategy in a great manner. TenderTm has the necessary technical as well as business skills to handle and provide large volume of Indian procurement information on a real time basis. Tendertm collects public procurement information and provides the information to top class companies</p></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
/**** BASE ****/
body {
color: #888;
}
.media a {
color: #0e85d9;
text-decoration: none;
outline: none;
}
.Taglist a{
color: #333;
font-size: 13px;
}
.eachPopularTitle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
font-size: 18px;
padding-right: 55px;
vertical-align: top;
margin-top: -2px;
}
.eachPopularRight {
display: block;
font-size: 12px;
}
/**** LAYOUT ****/
.list-inline>li {
padding: 0 0 0 0;
}
.container-pad {
padding: 0px 0px;
}
/**** MODULE ****/
.bgc-fff {
background-color: #fff!important;
}
.box-shad {
-webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.2);
box-shadow: 1px 1px 0 rgba(0,0,0,.2);
}
.brdr {
border: 0px solid #ededed;
}
/* Font changes */
.fnt-smaller {
font-size: .9em;
}
.fnt-lighter {
color: #f00;
}
.fnt-mighter{
color: #000;
font-size: 15px;
}
.fnt-brighter {
color: #00f;
}
/* Padding - Margins */
.pad-10 {
padding: 10px!important;
}
.mrg-0 {
margin: 0!important;
}
.btm-mrg-10 {
margin-bottom: 10px!important;
}
.btm-mrg-20 {
margin-bottom: 15px!important;
}
/* Color */
.clr-535353 {
color: #000;
}
/**** MEDIA QUERIES ****/
@media only screen and (max-width: 991px) {
#property-listings .property-listing {
padding: 1px!important;
}
#property-listings .property-listing a {
margin: 0;
}
#property-listings .property-listing .media-body {
padding: 1px;
}
businessContact {
right: 15px;
}
}
.openNow strong{
font-weight: 400;
color: #5aa925;
}
@media only screen and (min-width: 992px) {
#property-listings .property-listing img {
max-width: 190px;
width: 100%;
height: auto;
}
}
#tinkersale-navbar {
background-color: #ffcf05;
color: #FFFFFF;
}
.tinkersale-navbar-header{
padding-left: 10px;
width: 190px;
}
.row {
padding-top: 10px;
padding-bottom: 10px;
}
.row1 {
padding-top: 10px;
padding-bottom: px;
}
.business{
padding-top: 0px;
}
.custom-select{
font-size: 100%;
height: 35px;
text-align: left;
display: block;
position: relative;
padding: 6px 25px 6px 10px;
border-radius: 8px 8px 8px 8px;
}
.tinkersale-navbar-input {
padding: 11px 16px;
border-radius: 10px 0 0 10px;
border: 0 none;
outline: 1 none;
font-size: 15px;
width: 50%;
float: left;
position: relative;
}
.tinkersale-navbar-search-input {
padding: 11px 16px;
border-radius: 1px 0 0 2px;
border: none;
outline: 1 none;
font-size: 15px;
position: relative;
float: left;
border-left: 1px solid #ddd;
}
input[type="text"] {
overflow: ;
vertical-align: top;
outline: none;
font-family: "Source Sans Pro","Helvetica Neue","Helvetica","Segoe UI",Arial,sans-serif;
}
.tinkersale-navbar-button {
background-color: #000;
border: 1px solid #000;
border-radius: 0 10px 10px 0;
color: #fff;
padding: 11px 16px ;
height: 43px;
cursor: pointer;
width: 120px;
}
.navbar-collapse {
width: 300px;
float: right;
text-align: right;
display: block;
margin-top: 2px;
}
wrapper{
margin: 0 auto;
width: 100%;
padding: 0 15px;
max-width: 1168px;
}
.mapViewBtn {
display: block;
font-size: 18px;
color: #333;
}
.btn-color{
background-color: #ffcf05;
border: 1px solid #ffcf05;
color: #000;
padding: 18px 28px 18px 28px ;
}
.largenav {
display: none;
}
.smallsearch{
margin-left: 15px;
margin-top: 15px;
}
.result{
padding-top: 10px;
}
sort{
padding-top: 4px;
}
@media screen and (min-width: 768px) {
.largenav {
display: block;
}
.smallsearch{
margin: 0px;
}
}