Single Products Sortcode

										
<section class="featured-area indicator-style">
<div class="row">
<div class="tab-content"> <!-- Tab Main Content Area -->
<div id="home" class="tab-pane fade in active">
<div id="featured-product-owl">
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-2.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-4.jpg" class="secondary-img">
</a>
<span class="offer-titel">New</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00</span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-4.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-2.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="secondary-img">
</a>
<span class="offer-titel">New</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00</span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
</div>
</div>
<div id="menu1" class="tab-pane fade">
<div id="featured-product-owl2">
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-2.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-4.jpg" class="secondary-img">
</a>
<span class="offer-titel">New</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00</span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-4.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-2.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="secondary-img">
</a>
<span class="offer-titel">New</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00</span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
</div>
</div>
<div id="menu2" class="tab-pane fade">
<div id="featured-product-owl3">
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-2.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-4.jpg" class="secondary-img">
</a>
<span class="offer-titel">New</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00</span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-4.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-2.jpg" class="secondary-img">
</a>
<span class="offer-titel">Sale</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00<del>$380.00</del></span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
<div class="col-md-12"><!-- Featured Single Product Start-->
<div class="single-product">
<a href="#" class="product-img">
<img alt="" src="img/product/featured-pro-1.jpg" class="primary-img">
<img alt="" src="img/product/featured-pro-3.jpg" class="secondary-img">
</a>
<span class="offer-titel">New</span>
<div class="pro-action">
<ul>
<li><a href="#" title="Shopping Cart"><i class="zmdi zmdi-shopping-cart"></i></a></li>
<li><a href="#" title="Add Favorite" ><i class="zmdi zmdi-favorite"></i></a></li>
<li><a href="#" title="Add to Compare"><i class="zmdi zmdi-refresh-alt"></i></a></li>
</ul>
</div>
<div class="pro-content">
<div class="product-titel">
<a href="#">LONG WOOL COAT</a>
</div>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
<div class="product-price">
<span>$280.00</span>
</div>
</div>
</div>
</div><!-- Featured Single Product End-->
</div>
</div>
</div> <!-- Tab Main Content Area -->
</div>
</section>
<!-- FEATURED AREA END -->									
										
									
										
.featured-area {
padding-bottom: 80px;
}
.featured-area .owl-theme .owl-controls {
margin-top: 0;
}
.section-titel {
border-bottom: 1px solid #f0f0f0;
display: block;
overflow: hidden;
position: relative;
}
.section-titel::before {
background: #666666 none repeat scroll 0 0;
bottom: 0;
content: "";
height: 3px;
left: 0;
position: absolute;
width: 35px;
}
.section-titel h1 {
font-size: 20px;
font-weight: 700;
line-height: 25px;
}
.heighlight {
color: #24ccd7;
font-size: 30px;
}
.featured-tab {
position: absolute;
right: -15px;
top: 16px;
}
.featured-tab li {
display: inline-block;
}
.featured-tab li.active a{
color: #666666;
}
.featured-tab li a {
color: #bbbbbb;
font-size: 14px;
padding: 5px 18px;
transition: all 0.5s ease 0s;
text-decoration: none;
}
.featured-tab li a:hover {
color: #666666;
}
.single-product {
display: block;
position: relative;
margin-top: 35px;
overflow:hidden;
margin-bottom:2px;
}
.single-product:hover {
box-shadow: 0 0 5px 0 rgba(25, 25, 25, 0.3);
}
.single-product .product-img {
display: block;
overflow: hidden;
position: relative;
}
.single-product img.secondary-img {
opacity:0;
position: absolute;
right: 0;
top: -45%;
transition: all 800ms ease 0s;
}
.single-product:hover img.secondary-img {
opacity: 1;
top: 0;
}
.pro-action {
background: rgb(232, 232, 234) none repeat scroll 0 0;
left: 0;
padding: 15px 0 10px;
position: absolute;
right: 0;
text-align: center;
top: 35%;
opacity: 0;
visibility:hidden;
transform: scale(1.5);
transition: all 0.4s ease 0s;
}
.single-product:hover .pro-action {
transform: scale(1);
visibility:visible;
opacity:0.9;
}
.single-product:hover .pro-action {
transition: all 0.3s ease 0s;
}
.pro-action ul li {
display: inline-block;
}
.pro-action ul li a {
border: 1px solid #000000;
border-radius: 2px;
color: #444444;
display: block;
margin-right: 10px;
overflow: hidden;
padding: 5px 9px;
transition:.4s;
}
.pro-action ul li a:hover{background:#24CCD7;border-color:#24CCD7;color:#fff;}
.pro-content {
color: #666666;
padding-top: 15px;
text-align: center;
}
.product-titel > a {
color: #666666;
font-weight: 400;
}
.product-titel > a:hover, .news-content > h2 a:hover{color:#24CCD7;}
.product-price > span {
font-weight: 700;
margin-bottom:10px;
display:block;
}
.product-price del {
color: #24CCD7;
margin-left: 32px;
}
.rating {
padding: 2px 0 2px;
}
.rating .clr{color:#24CCD7;}
.indicator-style .owl-theme .owl-controls .owl-buttons div {
background: #f0f0f0 none repeat scroll 0 0;
color: #c2c2c2;
font-size: 18px;
margin: 6px;
opacity: 0.5;
padding: 5px 15px;
position: absolute;
top: 41%;
}
.indicator-style .owl-controls .owl-buttons .owl-prev {
left: 0px;
opacity: 0 !important;
right: auto;
}
.indicator-style .owl-theme .owl-controls.clickable .owl-buttons div:hover {
background: #24CCD7 none repeat scroll 0 0;
color: #fff;
opacity: 1;
text-decoration: none;
}
.indicator-style  .owl-controls .owl-buttons .owl-next {
left: auto;
opacity: 0 !important;
right: 0px;
}
#featured-product-owl:hover .owl-controls .owl-buttons .owl-next,
#featured-product-owl2:hover .owl-controls .owl-buttons .owl-next,
#featured-product-owl3:hover .owl-controls .owl-buttons .owl-next,
#bestsell-owl:hover .owl-controls .owl-buttons .owl-next{
opacity: 1!important;right: -15px;
}
#featured-product-owl:hover .owl-controls .owl-buttons .owl-prev,
#featured-product-owl2:hover .owl-controls .owl-buttons .owl-prev,
#featured-product-owl3:hover .owl-controls .owl-buttons .owl-prev,
#bestsell-owl:hover .owl-controls .owl-buttons .owl-prev{
opacity: 1!important;left: -15px;
}
										
									
										
$("#featured-product-owl").owlCarousel({
autoPlay: false,
slideSpeed:2000,
pagination:false,
navigation:true,
items : 4,
navigationText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,3],
itemsTablet: [768,1],
itemsMobile : [479,1],
});