1 Column horizontal listing
.jpg)
.jpg)
.jpg)
<!--1 Coulm horizontal listing-->
<div class="card-panel horizontal-listing no-padding">
<div class="container-fluid">
<!--First row-->
<a>
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(54).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a><i class="fa fa-comments-o"></i> 12</a></li>
<li><a><i class="fa fa-facebook"> </i> 21</a></li>
<li><a><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores illum impedit dolor possimus architecto labore.</p>
</div>
</div>
</a>
<!--/.First row-->
<!--Second row-->
<a>
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(55).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a><i class="fa fa-comments-o"></i> 12</a></li>
<li><a><i class="fa fa-facebook"> </i> 21</a></li>
<li><a><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores illum impedit dolor possimus architecto labore.</p>
</div>
</div>
</a>
<!--/.Second row-->
<!--Third row-->
<a>
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(56).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a><i class="fa fa-comments-o"></i> 12</a></li>
<li><a><i class="fa fa-facebook"> </i> 21</a></li>
<li><a><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores illum impedit dolor possimus architecto labore.</p>
</div>
</div>
</a>
<!--/.Third row-->
</div>
</div>
<!--/.1 Column horizontal listing-->
2 Column Horizontal Listing
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur temporibus.
.jpg)
.jpg)
.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur temporibus.
.jpg)
.jpg)
.jpg)
<!--First row-->
<div class="row">
<div class="horizontal-panel">
<div class="col-md-6">
<!--Featured card-->
<div class="card-noborder hoverable">
<div class="view overlay hm-white-slight">
<a> <img src="https://mdbootstrap.com/wp-content/uploads/2015/10/kfi9dark2.jpg" class="img-responsive">
<div class="mask waves-effect waves-light"> </div>
</a>
</div>
<div class="card-content">
<a href=""><h5 class="title">Lorem ipsum</h5></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur temporibus.</p>
</div>
</div>
<!--/.Featured card-->
<!--Horizontal listing-->
<div class=" horizontal-listing">
<!--Second row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(64).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.Second row-->
<!--Third row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(65).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.Third row-->
<!--Fourth row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(66).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.Fourth row-->
</div>
<!--/.Horizontal listing-->
</div>
<div class="col-md-6">
<!--Featured card-->
<div class="card-noborder hoverable">
<div class="view overlay hm-white-slight">
<a> <img src="https://mdbootstrap.com/wp-content/uploads/2015/10/kfi9dark1.jpg" class="img-responsive">
<div class="mask waves-effect waves-light"> </div>
</a>
</div>
<div class="card-content">
<a href=""><h5 class="title">Lorem ipsum</h5></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur temporibus.</p>
</div>
</div>
<!--/.Featured card-->
<!--Horizontal listing-->
<div class=" horizontal-listing">
<!--Second row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(71).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.Second row-->
<!--Third row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(72).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.Third row-->
<!--Fourth row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(73).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.Fourth row-->
</div>
<!--/.Horizontal listing-->
</div>
</div>
</div>
<!--First row-->
Tabs widget
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
<div class="row">
<div class="col-md-5">
<!--Tabs navigation-->
<ul class="nav nav-tabs tabs-3">
<li class="active"><a data-toggle="tab" href="#home">Popular</a></li>
<li><a data-toggle="tab" href="#menu1">Recent</a></li>
<li><a data-toggle="tab" href="#menu2">Random</a></li>
</ul>
<!--/.Tabs navigation-->
<!--Tabs content-->
<div class="tab-content card-panel">
<!--First tab-->
<div id="home" class="tab-pane fade in active">
<!--Horizontal listing-->
<div class=" horizontal-listing">
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(49).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(48).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(47).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
</div>
<!--/.Horizontal listing-->
</div>
<!--/.First tab-->
<!--Second tab-->
<div id="menu1" class="tab-pane fade">
<!--Horizontal listing-->
<div class=" horizontal-listing">
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(46).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(45).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(44).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
</div>
<!--/.Horizontal listing-->
</div>
<!--/.Second tab-->
<!--Third tab-->
<div id="menu2" class="tab-pane fade">
<!--Horizontal listing-->
<div class=" horizontal-listing">
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(43).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(42).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
<!--First row-->
<a href="">
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(41).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum</h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015 | </i></li>
<li><a href="#"><i class="fa fa-comments-o"></i> 12</a></li>
<li><a href="#"><i class="fa fa-facebook"> </i> 21</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
</a>
<!--/.First row-->
</div>
<!--/.Horizontal listing-->
</div>
<!--/.Third tab-->
</div>
<!--/.Tabs content-->
</div>
</div>
Review Listing
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
<div class="row">
<div class="col-md-8">
<!--Review card-->
<div class="review-card hoverable view overlay hm-blue-slight">
<h5 class="card-label"> <span class="label">Featured</span></h5>
<img src="https://mdbootstrap.com/images/slides/slide%20(11).jpg" class="img-responsive">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
<div class="card-footer">
<a class="btn blue-grey darken-2 rating waves-effect waves-light">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!-- Button -->
<a class="btn-floating btn-large blue-grey darken-2 waves-effect waves-light"><i class="material-icons">chevron_right</i></a>
<h5 class="h5-responsive">Lorem ipsum dolor sit amet. </h5>
<ul class="list-inline item-details">
<li><i class="fa fa-clock-o"> 05/10/2015</i>
<li><a><i class="fa fa-comments-o"></i> 12</a></li>
<li><a><i class="fa fa-facebook"> </i> 21</a></li>
<li><a><i class="fa fa-twitter"> </i> 5</a></li>
</ul>
</div>
</div>
<!--/.Review card-->
<!--Reviews list-->
<!--First row-->
<div class="horizontal-panel">
<div class="col-md-6">
<!--Horizontal listing-->
<div class=" horizontal-listing">
<!--First row-->
<a>
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(21).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum dolor</h5>
<a class="btn btn-sm blue-grey darken-2 rating waves-effect waves-light">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
</div>
</div>
</a>
<!--/.First row-->
<!--Second row-->
<a>
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(22).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum dolor</h5>
<a class="btn btn-sm blue-grey darken-2 rating waves-effect waves-light">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
</div>
</div>
</a>
<!--/.Second row-->
</div>
<!--/.Horizontal listing-->
</div>
<div class="col-md-6">
<!--Horizontal listing-->
<div class=" horizontal-listing">
<!--First row-->
<a>
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(23).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum dolor</h5>
<a class="btn btn-sm blue-grey darken-2 rating waves-effect waves-light">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
</div>
</div>
</a>
<!--/.First row-->
<!--Second row-->
<a>
<div class="row hoverable">
<div class="col-sm-4">
<img src="https://mdbootstrap.com/images/reg/reg%20(24).jpg" class="img-responsive z-depth-2">
</div>
<div class="col-sm-8">
<h5 class="title">Lorem ipsum dolor</h5>
<a class="btn btn-sm blue-grey darken-2 rating waves-effect waves-light">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
</div>
</div>
</a>
<!--/.Second row-->
</div>
<!--/.Horizontal listing-->
</div>
</div>
<!--First row-->
<!--/.Reviews list-->
</div>
</div>