<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<div class="trends">
<div class="bbb_background"></div>
<div class="bbb_overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="bbb_container">
<h2 class="bbb_title">Latest Products 2019</h2>
<div class="bbb_text">
<p>Find the latest products in 2019</p>
</div>
<div class="bbb_slider_nav">
<div class="bbb_prev bbb_nav"><i class="fas fa-angle-left ml-auto"></i></div>
<div class="bbb_next bbb_nav"><i class="fas fa-angle-right ml-auto"></i></div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="bbb_slider_container">
<div class="owl-carousel owl-theme bbb_slider">
<div class="owl-item">
<div class="bbb_item is_new">
<div class="bbb_image d-flex flex-column align-items-center justify-content-center"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924153/alcatel-smartphones-einsteiger-mittelklasse-neu-3m.jpg" alt=""></div>
<div class="bbb_content">
<div class="bbb_category"><a href="#">Smart Phones</a></div>
<div class="bbb_info clearfix">
<div class="bbb_name"><a href="product.html">Alcatel Mobile</a></div>
<div class="bbb_price">₹13790</div>
</div>
</div>
<ul class="bbb_marks">
<li class="bbb_mark bbb_discount">-25%</li>
<li class="bbb_mark bbb_new">new</li>
</ul>
<div class="bbb_fav"><i class="fas fa-heart"></i></div>
</div>
</div>
<div class="owl-item">
<div class="bbb_item">
<div class="bbb_image d-flex flex-column align-items-center justify-content-center"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924221/51_be7qfhil.jpg" alt=""></div>
<div class="bbb_content">
<div class="bbb_category"><a href="#">LED TV</a></div>
<div class="bbb_info clearfix">
<div class="bbb_name"><a href="product.html">MI LED</a></div>
<div class="bbb_price">₹33790</div>
</div>
</div>
<ul class="bbb_marks">
<li class="bbb_mark bbb_discount">-25%</li>
<li class="bbb_mark bbb_new">new</li>
</ul>
<div class="bbb_fav"><i class="fas fa-heart"></i></div>
</div>
</div>
<div class="owl-item">
<div class="bbb_item is_new">
<div class="bbb_image d-flex flex-column align-items-center justify-content-center"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924241/8fbb415a2ab2a4de55bb0c8da73c4172--ps.jpg" alt=""></div>
<div class="bbb_content">
<div class="bbb_category"><a href="#">Mobile Phones</a></div>
<div class="bbb_info clearfix">
<div class="bbb_name"><a href="product.html">MI Mobile</a></div>
<div class="bbb_price">₹13079</div>
</div>
</div>
<ul class="bbb_marks">
<li class="bbb_mark bbb_discount">-25%</li>
<li class="bbb_mark bbb_new">new</li>
</ul>
<div class="bbb_fav"><i class="fas fa-heart"></i></div>
</div>
</div>
<div class="owl-item">
<div class="bbb_item is_new">
<div class="bbb_image d-flex flex-column align-items-center justify-content-center"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924361/21HmjI5eVcL.jpg" alt=""></div>
<div class="bbb_content">
<div class="bbb_category"><a href="#">Power Bank</a></div>
<div class="bbb_info clearfix">
<div class="bbb_name"><a href="product.html">MI Powerbank</a></div>
<div class="bbb_price">₹2379</div>
</div>
</div>
<ul class="bbb_marks">
<li class="bbb_mark bbb_discount">-25%</li>
<li class="bbb_mark bbb_new">new</li>
</ul>
<div class="bbb_fav"><i class="fas fa-heart"></i></div>
</div>
</div>
<div class="owl-item">
<div class="bbb_item">
<div class="bbb_image d-flex flex-column align-items-center justify-content-center"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924361/21HmjI5eVcL.jpg" alt=""></div>
<div class="bbb_content">
<div class="bbb_category"><a href="#">Power Bank</a></div>
<div class="bbb_info clearfix">
<div class="bbb_name"><a href="#">HP Powerbank</a></div>
<div class="bbb_price">₹3379</div>
</div>
</div>
<ul class="bbb_marks">
<li class="bbb_mark bbb_discount">-25%</li>
<li class="bbb_mark bbb_new">new</li>
</ul>
<div class="bbb_fav"><i class="fas fa-heart"></i></div>
</div>
</div>
<div class="owl-item">
<div class="bbb_item is_new">
<div class="bbb_image d-flex flex-column align-items-center justify-content-center"><img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560924241/8fbb415a2ab2a4de55bb0c8da73c4172--ps.jpg" alt=""></div>
<div class="bbb_content">
<div class="bbb_category"><a href="#">Mobile Phones</a></div>
<div class="bbb_info clearfix">
<div class="bbb_name"><a href="product.html">Gionee phone</a></div>
<div class="bbb_price">₹10379</div>
</div>
</div>
<ul class="bbb_marks">
<li class="bbb_mark bbb_discount">-25%</li>
<li class="bbb_mark bbb_new">new</li>
</ul>
<div class="bbb_fav"><i class="fas fa-heart"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900|Rubik:300,400,500,700,900');
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px
}
body {
font-family: 'Rubik', sans-serif;
font-size: 14px;
font-weight: 400;
background: #eee;
color: #000000
}
div {
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
ul {
list-style: none;
margin-bottom: 0px
}
p {
font-family: 'Rubik', sans-serif;
font-size: 14px;
line-height: 1.7;
font-weight: 400;
color: #828282;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px
}
p a {
display: inline;
position: relative;
color: inherit;
border-bottom: solid 1px #ffa07f;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
a,
a:hover,
a:visited,
a:active,
a:link {
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px
}
p a:active {
position: relative;
color: #FF6347
}
p a:hover {
color: #FFFFFF;
background: #ffa07f
}
p a:hover::after {
opacity: 0.2
}
::selection {}
p::selection {}
h1 {
font-size: 48px
}
h2 {
font-size: 36px
}
h3 {
font-size: 24px
}
h4 {
font-size: 18px
}
h5 {
font-size: 14px
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Rubik', sans-serif;
font-weight: 500;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {}
.form-control {
color: #db5246
}
section {
display: block;
position: relative;
box-sizing: border-box
}
.clear {
clear: both
}
.clearfix::before,
.clearfix::after {
content: "";
display: table
}
.clearfix::after {
clear: both
}
.clearfix {
zoom: 1
}
.float_left {
float: left
}
.float_right {
float: right
}
.bbb_background {
background-color: #E0E0E0 !important
}
.trans_200 {
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.trans_300 {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease
}
.trans_400 {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease
}
.trans_500 {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease
}
.fill_height {
height: 100%
}
.super_container {
width: 100%;
overflow: hidden
}
.prlx_parent {
overflow: hidden
}
.prlx {
height: 130% !important
}
.nopadding {
padding: 0px !important
}
.button {
display: inline-block;
background: #0e8ce4;
border-radius: 5px;
height: 48px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.button a {
display: block;
font-size: 18px;
font-weight: 400;
line-height: 48px;
color: #FFFFFF;
padding-left: 35px;
padding-right: 35px
}
.button:hover {
opacity: 0.8
}
.trends {
padding-top: 80px;
padding-bottom: 80px
}
.bbb_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(203, 225, 238, 0.3)
}
.bbb_background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center
}
.bbb_container {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding-right: 40px
}
.bbb_title {
padding-right: 50px
}
.bbb_text {
margin-top: 17px
}
.bbb_text p:last-child {
margin-bottom: 0px
}
.bbb_slider_nav {
margin-top: 27px
}
.bbb_nav {
display: inline-block;
width: 36px;
height: 36px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 50%;
text-align: center;
cursor: pointer;
margin-right: 16px;
background-color: #2d8ce4
}
.bbb_nav:last-child {
margin-right: 0px
}
.bbb_nav i {
line-height: 36px;
color: #fff;
font-size: 18px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.bbb_nav:hover i {
color: #474747
}
.bbb_item {
background: #FFFFFF;
border-radius: 1px;
padding: 25px
}
.bbb_image {
width: 100%;
height: 212px
}
.bbb_image img {
width: auto !important;
max-width: 100% !important
}
.bbb_category a {
font-size: 12px;
color: rgba(0, 0, 0, 0.5)
}
.bbb_category a:hover {
color: #0e8ce4
}
.bbb_content {
margin-top: 24px
}
.bbb_name {
float: left
}
.bbb_name a {
font-size: 16px;
color: #000000
}
.bbb_name a:hover {
color: #0e8ce4
}
.bbb_price {
font-size: 16px;
font-weight: 500;
float: right
}
.bbb_fav {
position: absolute;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
cursor: pointer
}
.bbb_fav.active {
visibility: visible;
opacity: 1
}
.bbb_fav:hover {
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3)
}
.bbb_item:hover .bbb_fav {
visibility: visible;
opacity: 1;
top: 18px
}
.bbb_fav i {
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
color: #cccccc;
line-height: 36px;
pointer-events: none;
z-index: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.bbb_fav.active i {
color: red
}
.bbb_item:hover .bbb_fav {
visibility: visible;
opacity: 1
}
.bbb_marks {
position: absolute;
left: 18px;
top: 18px
}
.bbb_mark {
display: none;
width: 36px;
height: 36px;
font-size: 10px;
font-weight: 500;
color: #FFFFFF;
border-radius: 50%;
line-height: 36px;
text-align: center
}
.bbb_discount {
background: #df3b3b
}
.bbb_item.discount .bbb_discount,
.bbb_item.is_new .bbb_new {
display: block
}
.bbb_new {
background: #0e8ce4
}
@media only screen and (max-width: 991px) {
.bbb_slider_container {
margin-top: 15px
}
}
$(document).ready(function()
{
if($('.bbb_slider').length)
{
var trendsSlider = $('.bbb_slider');
trendsSlider.owlCarousel(
{
loop:false,
margin:30,
nav:false,
dots:false,
autoplayHoverPause:true,
autoplay:false,
responsive:
{
0:{items:1},
575:{items:2},
991:{items:3}
}
});
trendsSlider.on('click', '.bbb_fav', function (ev)
{
$(ev.target).toggleClass('active');
});
if($('.bbb_prev').length)
{
var prev = $('.bbb_prev');
prev.on('click', function()
{
trendsSlider.trigger('prev.owl.carousel');
});
}
if($('.bbb_next').length)
{
var next = $('.bbb_next');
next.on('click', function()
{
trendsSlider.trigger('next.owl.carousel');
});
}
}
});