blog slider

07

May

How to Improve Your Sales Volume

Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...

Continue Reading

05

May

Top 10 Marketing for Improving Sales

Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...

Continue Reading

21

March

Best Social Media Marketing..

Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...

Continue Reading

05

May

Top 10 Marketing for Improving Sales

Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...

Continue Reading
		
<div class="blog-slider">
  <!-- Single blog -->
  <div class="sin-blog">
    <!-- Blog Image -->
    <div class="blog-image">
      <a href="#"><img src="img/blog/1.jpg" alt="" /></a>
      <!-- Blog Date -->
      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>
    </div>
    <!-- Blog Details -->
    <div class="blog-details">
      <!-- Blog Meta -->
      <div class="blog-meta fix">
        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>
        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>
      </div>
      <!-- Blog Title -->
      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>
      <a class="read-more" href="#">Continue Reading</a>
    </div>
  </div>
  <!-- Single blog -->
  <div class="sin-blog">
    <!-- Blog Image -->
    <div class="blog-image">
      <a href="#"><img src="img/blog/2.jpg" alt="" /></a>
      <!-- Blog Date -->
      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>
    </div>
    <!-- Blog Details -->
    <div class="blog-details">
      <!-- Blog Meta -->
      <div class="blog-meta fix">
        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>
        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>
      </div>
      <!-- Blog Title -->
      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>
      <a class="read-more" href="#">Continue Reading</a>
    </div>
  </div>
  <!-- Single blog -->
  <div class="sin-blog">
    <!-- Blog Image -->
    <div class="blog-image">
      <a href="#"><img src="img/blog/3.jpg" alt="" /></a>
      <!-- Blog Date -->
      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>
    </div>
    <!-- Blog Details -->
    <div class="blog-details">
      <!-- Blog Meta -->
      <div class="blog-meta fix">
        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>
        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>
      </div>
      <!-- Blog Title -->
      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>
      <a class="read-more" href="#">Continue Reading</a>
    </div>
  </div>
  <!-- Single blog -->
  <div class="sin-blog">
    <!-- Blog Image -->
    <div class="blog-image">
      <a href="#"><img src="img/blog/4.jpg" alt="" /></a>
      <!-- Blog Date -->
      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>
    </div>
    <!-- Blog Details -->
    <div class="blog-details">
      <!-- Blog Meta -->
      <div class="blog-meta fix">
        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>
        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>
      </div>
      <!-- Blog Title -->
      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>
      <a class="read-more" href="#">Continue Reading</a>
    </div>
  </div>
</div>
		
	
		
.sin-blog{}
.blog-image {
  position: relative;
}
.blog-image a {
  display: block;
  position: relative;
}
.blog-image a::before {
  background: #000 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotateX(90deg);
  z-index: 1;
}
.sin-blog:hover .blog-image a::before {
  transform: rotateX(0);
}
.blog-image a img, .blog-image img {
  width: 100%;
}
.blog-date {
  background: #fff none repeat scroll 0 0;
  height: 63px;
  left: 5px;
  padding: 14px 0;
  position: absolute;
  top: 5px;
  width: 63px;
  z-index: 1;
}
.blog-date h4 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 14px;
  margin: 0 0 10px;
}
.blog-date p {
  font-weight: 300;
  line-height: 12px;
}
.blog-details {
  background: #fff none repeat scroll 0 0;
  padding: 10px 15px 13px;
  text-align: left;
}
.blog-details .blog-meta {
  margin-bottom: 6px;
}
.blog-details .blog-meta p {
  font-size: 12px;
  font-weight: 500;
  margin: 0;
}
.blog-details .blog-meta p a {
  color: #909090;
  display: block;
  float: left;
  margin-right: 18px;
}
.blog-details .blog-meta p a:last-child {
  margin-right: 0;
}
.blog-details .blog-meta p a:hover {}
.blog-details .blog-meta p a i {
  display: block;
  float: left;
  font-size: 14px;
  line-height: 22px;
  margin-right: 5px;
}
.blog-details .blog-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 32px;
  margin: 0 0 3px;
}
.blog-details .blog-title a {
  color: #303030;
}
.blog-details .blog-title a:hover {}
.blog-details > p {
  font-size: 13px;
  font-weight: 300;
}
.blog-details .read-more {
  font-weight: 300;
}
		
	
		

$('.blog-slider').owlCarousel({
    loop: true,
    dots: false,
    nav: true,
    navText: ['',''],
    margin: 30,
    responsive: {
        1200:{
            items:3
        },
        970:{
            items:2
        },
        768:{
            items:2,
			nav: false,
        },
        0:{
            items:1,
			nav: false,
        },
    }
})
		
	

Style Switcher

Select Layout
Chose Color
Chose Pattren
Chose Background