<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<br><br><br><br>
<div class="container">
<!-- Listing Results -->
<div class="col-md-9 results-container">
<div class="results-container-in">
<div class="waiting" style="display:none;">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div id="results-holder" class="results-list-view">
<!-- Result Item -->
<div class="result-item format-standard">
<div class="result-item-image">
<a href="vehicle-details.html" class="media-box"><img src="http://via.placeholder.com/400x200" alt=""></a>
<span class="label label-default vehicle-age">2018 Deal Of the Year</span>
<span class="label label-success premium-listing">Premium Listing</span>
<div class="result-item-view-buttons">
<a href="https://www.youtube.com/watch?v=P5mvnA4BV7Y" data-rel="prettyPhoto"><i class="fa fa-play"></i> Compare Now</a>
<a href="vehicle-details.html"><i class="fa fa-plus"></i> Apply Now</a>
</div>
</div>
<div class="result-item-in">
<h4 class="result-item-title"><a href="vehicle-details.html">M&S Bank Personal Loan</a></h4>
<div class="result-item-cont">
<div class="result-item-block col1">
<p>Representative Example: The representative rate is 2.8% APR (fixed) so if you borrow £7,500 over 5 years at a rate of 2.8% p.a (fixed) you will repay £133.98 per month & £8,038.80 in total. </p>
</div>
<div class="result-item-block col2">
<div class="result-item-pricing">
<div class="price">60 Months</div>
</div>
<div class="result-item-action-buttons">
<a href="#" class="btn btn-default btn-sm"><i class="fa fa-star-o"></i>Save</a>
<a href="vehicle-details.html" class="btn btn-default btn-sm">Apply</a><br>
<a href="#" class="distance-calc"><i class="fa fa-map-marker"></i> Distance from me?</a>
</div>
</div>
</div>
<div class="result-item-features">
<ul class="inline">
<li><div class="li">£1000-£5000 |</li>
<li><div class="li">3.9 Representatives Apr |</div></li>
<li><div class="li">1-7 Years |</div></li>
<li><div class="li">Total amount payable: £50,000</div></li>
<li>This rate is available to new customers applying via money.co.uk.
You can repay this loan early. The total amount payable is based on repayment over 19 days.</li>
</ul>
</div>
</div>
</div>
.img {
max-width: 100%;
}
img, object, embed, audio, video {
max-width: 100%;
}
img {
height: auto;
}
strong, .strong {
font-weight: 700;
}
.col-md-9 {
width: 100%;
}
/* ==================================================
2. Typography
================================================== */
.vehicle-age, .premium-listing, .vehicle-sold{
position: absolute;
top:15px;
left:45px;
z-index:9;
}
.premium-listing{
top:35px;
}
/* Sign Up Form */
.signup-form{
border:1px solid #eee;
position:relative;
border-radius:3px 3px 0 0;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.1);
}
.regular-signup{
padding:20px;
}
.signup-form .progress{
float:left;
background:#eee;
width:85%;
height:6px;
}
.tool-box .listing .textb a{
font-weight:700;
color:#5e5e5e;
}
.tool-box .listing .textb .price{
display:block;
margin-top:7px;
color:#999
}
.tool-box .listing .delete, .tool-box .listing .save{
width:6%;
float:left;
text-align:right;
}
.tool-box .tool-car-listing .delete, .tool-box .tool-view-listing .save{
padding-top:20px;
}
.actions-bar .toggle-view label{
float:left;
margin-right:10px;
line-height:38px;
font-size:11px;
text-transform:uppercase;
margin-bottom:0;
}
.result-item{
position:relative;
border:1px solid #eee;
background:#fff;
}
.results-list-view .result-item{
border:0;
overflow:hidden;
border:1px solid #eee;
margin-bottom:40px;
background:#F9F9F9;
}
.results-list-view .result-item:hover{
box-shadow:none;
}
.result-item-cont{
padding:15px 20px 5px 20px;
}
.results-grid-view .result-item-cont{
padding-bottom:10px;
padding-top:0;
}
.result-item:before, .result-item:after, .result-item-cont:before, .result-item-cont:after{
content:" ";
display:table;
}
.result-item:after, .result-item-cont:after{
clear:both;
}
.results-grid-view .result-item-title{
min-height: inherit;
padding-top:15px;
margin-bottom:17px;
font-size:16px;
line-height:20px;
}
.li{
font-size:12px;
font-weight:700;
}
.results-list-view .result-item-image{
width:36%;
float:left;
position:relative;
z-index:1;
}
.result-item-view-buttons:before, .result-item-view-buttons:after, .result-item-in:before, .result-item-in:after{
display:table;
content:" ";
}
.result-item-view-buttons:after, .result-item-in:after{
clear:both;
}
.result-item-view-buttons a{
display:inline-block;
float:left;
width:50%;
text-align:center;
padding:9px 0 5px;
background:#F9F9F9;
text-transform:uppercase;
font-size:12px;
font-family: 'Roboto Condensed', sans-serif;
font-weight:700;
color:#6a6a6a
}
.result-item-view-buttons a i{
line-height:2em;
}
.result-item-view-buttons a:first-child{
border-right:1px solid #eee;
}
.results-grid-view .result-item-view-buttons a{
padding:4px 0 3px;
}
.result-item .vehicle-age, .result-item .premium-listing{
left:15px;
}
.results-list-view .result-item-in{
position:relative;
z-index:2;
float:left;
width:64%;
background:#fff;
box-shadow:-5px 0 10px rgba(0,0,0,.2);
padding:0;
min-height:231px;
}
.results-grid-view .result-item-in{
background:#fff;
}
.result-item-title{
line-height:1.3em;
letter-spacing:0;
font-size:18px;
font-weight:700;
text-transform:none;
font-family: 'Roboto', sans-serif;
background:#f9f9f9;
margin-bottom:0;
padding:10px 20px;
}
.results-grid-view .result-item-title{
background:none;
}
.result-item .vehicle-meta{
font-size:13px;
}
.result-item-block.col1{
font-size:13px;
width:60%;
margin-right:10%;
float:left;
line-height:1.5em;
}
.result-item-block.col2{
width:30%;
float:left;
text-align:center;
}
.results-grid-view .result-item-block.col1{
display:none;
}
.results-grid-view .result-item-block.col2{
width:100%;
}
.result-item-block.col2:before, .result-item-block.col2:after{
content:" ";
display:table;
}
.result-item-block.col2:after{
clear:both;
}
.result-item-features{
line-height:normal;
border-top:1px solid #eee;
padding:0 20px;
}
.results-grid-view .result-item-features{
padding-top:5px;
}
.result-item-features li{
margin-bottom:5px;
}
.distance-calc{
color:#999;
font-size:12px;
}
.distance-calc:hover{
color:#666;
}
.results-grid-view .distance-calc{
margin-bottom:12px;
}
.result-item-pricing .price{
font-size:24px;
font-weight:700;
margin-bottom:10px;
}
.results-grid-view .result-item-action-buttons{
position:static;
width:100%;
}
.results-grid-view:before, .results-grid-view:after{
content:" ";
display:table;
}
.results-grid-view:after{
clear:both;
}
.results-grid-view{
margin-left:-2%;
}
.results-grid-view .result-item{
width:31%;
margin-left:2.3%;
float:left;
margin-bottom:40px;
}
