Product List Carousel for Ecommerce Website
Here We Tell You about the Product List In your Websites.In Today’s World The Ecommerce Business is trending.E-commerce (electronic commerce) is the activity of electronically. buying or selling of products on online services or over the Internet. We create Product Carousel or slider.
Product List Slider Become Most Popular now a days. Every Ecommerce Site have Have Product List Silder.
Now we show how to Create Product Carousel:
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Featured Products</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected];300;400;500;600;700&display=swap" rel="stylesheet">
<link href="http://developerguidance.com/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
<link href="http://developerguidance.com/css/owl.theme.default.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="http://developerguidance.com/js/owl.carousel.js" ></script>
</head>
<body>
<div class="featdprods_mainbox">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!--MAIN WRAPPER START-->
<div class="featuredproducts_mainbox">
<div id="owl-featuredproducts" class="owl-carousel">
<!--1-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg""></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--1-->
<!--2-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--2-->
<!--3-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--3-->
<!--4-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--4-->
<!--5-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--5-->
<!--6-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--6-->
<!--7-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--7-->
<!--8-->
<div class="featuredproducts_box item">
<!--TOP SECTION-->
<div class="fp-topsection clearfix">
<!--img-->
<div class="fpimages-box clearfix">
<a href="#">
<div class="fpimages-one"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
<div class="fpimages-two"><img src="http://developerguidance.com/css/New Project (1).jpg"></div>
</a>
</div>
<!--img-->
<!--Add Wishlist-->
<div class="add_wishlist">
<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<!--Add Wishlist-->
<!--Product Label-->
<div class="product-label">
<span>Sale</span>
</div>
<!--Product label-->
<!--Quickview-btn-->
<a href="#" class="quick-viewbtn">Quick View</a>
<!--Quickview-btn-->
</div>
<!--TOP SECTION-->
<!--BOTTOM SECTION-->
<div class="fp-bottomsection clearfix">
<!--TEXT-->
<div class="fp-bottomsection_text">
<h2><a href="#">New Design</a></h2>
<p>
Developers Guidance
</p>
</div>
<!--TEXT-->
<!--RATING-->
<div class="rating_reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>530 Reviews</span>
</div>
<!--RATING-->
<!--PRICE-->
<div class="pricesale_box">
<span class="psoldprice">₹499.00</span>
<span class="psspecialprice"><em>from </em>₹399.00</span>
</div>
<!--PRICE-->
<!--btn-->
<div class="fpbox_btn">
<a href="#">Select Option</a>
</div>
<!--btn-->
</div>
<!--BOTTOM SECTION-->
</div>
<!--8-->
</div>
</div>
<!--MAIN WRAPPER END-->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var owl = $('#owl-featuredproducts');
owl.owlCarousel({
items:5,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
576:{
items:2,
nav:false
},
768:{
items:2,
nav:true,
loop:true
},
992:{
items:5,
nav:true,
loop:true
}
}
});
})
</script>
</body>
</html>You can manage how many product can show in front of your website in destop view, Mobile View and Tablet view.
<script type="text/javascript">
$(document).ready(function() {
var owl = $('#owl-featuredproducts');
owl.owlCarousel({
items:5,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
576:{
items:2,
nav:false
},
768:{
items:2,
nav:true,
loop:true
},
992:{
items:5,
nav:true,
loop:true
}
}
});
})
</script>Style.css
body {
font-family: 'Oswald', sans-serif;
}
.clr {
clear: both;
}
.featdprods_mainbox{
width:100%;
height:auto;
margin:auto;
}
.featdprods_mainbox .container{
max-width:1230px;
}
.featuredproducts_mainbox {
width: 100%;
height: auto;
margin: auto;
margin-top: 60px;
}
.featuredproducts_box {
width:100%;
height:100%;
position:relative;
padding:10px;
cursor:pointer;
}
.fp-topsection {
width: 100%;
height: auto;
margin: auto;
text-align: center;
position: relative;
}
.fpimages-box {
width: 100%;
height: auto;
margin: auto;
text-align: center;
position: relative;
display: block;
z-index: 2;
height: 224px;
}
.fpimages-box img {
width: 100%;
height: auto;
margin: auto;
min-height: 224px;
}
.fpimages-one {
position: absolute !important;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
object-fit: contain;
height: 100%;
max-height: 100%;
width: 100%;
max-width: 100%;
}
.fpimages-two {
position: absolute !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
filter: alpha(opacity=0);
width: 100%;
height: 100%;
cursor: pointer;
}
.featuredproducts_box:hover .fpimages-two {
opacity: 1;
}
.product-label {
position: absolute;
top: 0px;
left: 0px;
z-index: 6;
text-align: left;
}
.product-label span {
background-color: #e7040f;
color: #fff;
margin-bottom: 5px;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
padding: 2px 13px 2px 13px;
text-align: center;
}
a.quick-viewbtn {
background-color: #fff;
text-transform: uppercase;
border-radius: 3px;
z-index: 3;
min-width: 100px;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
-ms-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
opacity: 0;
visibility: hidden;
font-size: 13px;
font-weight: 500;
line-height: 21px;
color: #232323;
text-decoration: none;
display: block;
padding: 5px 28px;
display: none;
}
.featuredproducts_box:hover .quick-viewbtn {
opacity: 1;
visibility: visible;
display: block;
}
.quick-viewbtn:hover {
background-color: #000;
color: #fff;
}
.add_wishlist {
position: absolute;
top: 0px;
right: 0px;
left: auto;
z-index: 99;
display: none;
transition: 3s ease-in;
}
.add_wishlist a {
color: #000;
font-size: 20px;
}
.add_wishlist a:active {
color: #f00;
}
.featuredproducts_box:hover .add_wishlist {
display: block;
}
.fp-bottomsection {
width: 100%;
height: auto;
margin: auto;
text-align: center;
position: relative;
z-index: 2;
margin-top: 30px;
}
.fp-bottomsection_text {
width: 100%;
height: auto;
margin: auto;
}
.fp-bottomsection_text h2 {
color: #000;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
.fp-bottomsection_text h2 a {
color: #000;
font-size: 13px;
text-decoration:none;
}
.fp-bottomsection_text p {
color: #777;
margin-bottom: 4px;
text-transform: capitalize;
font-size: 13px;
line-height: 21px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.rating_reviews {
width: 100%;
}
.rating_reviews i {
color: #FEBE03;
}
.rating_reviews span {
padding-left: 10px;
}
.pricesale_box {
width: 100%;
margin-top:5px;
}
.psoldprice {
color: #969696;
text-decoration: line-through;
margin-right: 5px;
}
.psspecialprice {
color: #e7040f;
}
.pricesale_box em {
font-size: 13px;
color: #969696;
font-weight: bold;
font-style: normal;
margin-right: 2px;
}
.fpbox_btn {
background:#000;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .02em;
font-size: 15px;
line-height: 21px;
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 9px 15px 9px;
border: 1px solid rgba(255,255,255,0);
border-top-color: rgba(255, 255, 255, 0);
border-right-color: rgba(255, 255, 255, 0);
border-bottom-color: rgba(255, 255, 255, 0);
border-left-color: rgba(255, 255, 255, 0);
min-width: 130px;
max-width: 100%;
height:41px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-top:15px;
margin-bottom:15px;
display:none;
}
.fpbox_btn a{
color:#fff;
display:block;
text-decoration:none
}
.fpbox_btn:hover{
background:#f00;
}
.featuredproducts_box:hover .fpbox_btn{
display:block;
}
.featuredproducts_mainbox .item {
margin:10px 1px!important;
}
.featuredproducts_mainbox .item:hover{
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.32);
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.32);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.32);
}
.featuredproducts_mainbox .owl-theme .owl-controls .owl-buttons .owl-prev {
display: none;
}
.featuredproducts_mainbox .owl-theme .owl-controls .owl-buttons .owl-next {
display: none;
}
.featuredproducts_mainbox .owl-pagination {
margin-top: 30px;
}
.featuredproducts_mainbox .owl-theme .owl-controls .owl-page span {
width: 40px;
height: 2px;
background: #E03D31;
}
.featuredproducts_mainbox .owl-prev {
top: 33%;
}
.featuredproducts_mainbox .owl-next {
top: 33%;
}
@media only screen and (min-width:401px) and (max-width:575px) {
.featuredproducts_mainbox .owl-item{
margin-right: 14px!important;
max-width: 100%!important;
}
}
@media only screen and (min-width:360px) and (max-width:400px) {
.featuredproducts_mainbox .item {
margin: 10px 30px !important;
}
.featuredproducts_mainbox .owl-item{
margin-right: 14px!important;
max-width: 100%!important;
}
}
@media only screen and (max-width:320px){
.featuredproducts_mainbox .item {
margin: 10px 0px !important;
}
.featuredproducts_mainbox .owl-item{
margin-right: 14px!important;
max-width: 100%!important;
}
}
.widget-title {
text-align: center;
padding-top: 15px;
margin-bottom: 10px;
}
.widget-title .box-title {
color: #141414;
font-size: 33px;
letter-spacing: .02em;
font-weight: 600;
text-transform: uppercase;
position: relative;
margin-bottom: 12px;
padding: 0 25px;
display: inline-block;
font-style: oblique;;
}
Leave a reply
The Rubik theme is the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. It’s never been easier to build a standout website.
