Blog

Blog style 2

From The Blog

There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.

Read more...

There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.

Read more...

    <!-- Section-title start -->
    <div class="row">
    <div class="col-lg-12">
    <div class="section-title text-center">
    <h2 class="title-border">From The Blog</h2>
    </div>
    </div>
    </div>
    <!-- Section-title end -->
    <div class="row">
    <!-- Single-blog start -->
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="single-blog mt-30">
    <div class="blog-photo">
    <a href="#"><img src="img/blog/3.jpg" alt="" /></a>
    <div class="like-share text-center fix">
    <a href="#"><i class="zmdi zmdi-favorite"></i><span>89 Like</span></a>
    <a href="#"><i class="zmdi zmdi-comments"></i><span>59 Comments</span></a>
    <a href="#"><i class="zmdi zmdi-share"></i><span>29 Share</span></a>
    </div>
    </div>
    <div class="blog-info">
    <div class="post-meta fix">
    <div class="post-date floatleft"><span class="text-dark-red">30</span></div>
    <div class="post-year floatleft">
    <p class="text-uppercase text-dark-red mb-0">June, 2017</p>
    <h4 class="post-title"><a href="#" tabindex="0">Farniture drawing 2017</a></h4>
    </div>
    </div>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage  Lorem Ipsum, you alteration in some form.</p>
    <a href="#" class="button-2 text-dark-red">Read more...</a>
    </div>
    </div>
    </div>
    <!-- Single-blog end -->
    <!-- Single-blog start -->
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="single-blog mt-30">
    <div class="blog-photo">
    <a href="#"><img src="img/blog/4.jpg" alt="" /></a>
    <div class="like-share text-center fix">
    <a href="#"><i class="zmdi zmdi-favorite"></i><span>89 Like</span></a>
    <a href="#"><i class="zmdi zmdi-comments"></i><span>59 Comments</span></a>
    <a href="#"><i class="zmdi zmdi-share"></i><span>29 Share</span></a>
    </div>
    </div>
    <div class="blog-info">
    <div class="post-meta fix">
    <div class="post-date floatleft"><span class="text-dark-red">30</span></div>
    <div class="post-year floatleft">
    <p class="text-uppercase text-dark-red mb-0">June, 2017</p>
    <h4 class="post-title"><a href="#" tabindex="0">Farniture drawing 2017</a></h4>
    </div>
    </div>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage  Lorem Ipsum, you alteration in some form.</p>
    <a href="#" class="button-2 text-dark-red">Read more...</a>
    </div>
    </div>
    </div>
    <!-- Single-blog end -->
    <!-- Single-blog start -->
    <div class="col-lg-4 col-md-4 hidden-sm col-xs-12">
    <div class="single-blog mt-30">
    <div class="blog-photo">
    <a href="#"><img src="img/blog/5.jpg" alt="" /></a>
    <div class="like-share text-center fix">
    <a href="#"><i class="zmdi zmdi-favorite"></i><span>89 Like</span></a>
    <a href="#"><i class="zmdi zmdi-comments"></i><span>59 Comments</span></a>
    <a href="#"><i class="zmdi zmdi-share"></i><span>29 Share</span></a>
    </div>
    </div>
    <div class="blog-info">
    <div class="post-meta fix">
    <div class="post-date floatleft"><span class="text-dark-red">30</span></div>
    <div class="post-year floatleft">
    <p class="text-uppercase text-dark-red mb-0">June, 2017</p>
    <h4 class="post-title"><a href="#" tabindex="0">Farniture drawing 2017</a></h4>
    </div>
    </div>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage  Lorem Ipsum, you alteration in some form.</p>
    <a href="#" class="button-2 text-dark-red">Read more...</a>
    </div>
    </div>
    </div>
    <!-- Single-blog end -->
    </div>


    .single-blog { transition: all 0.5s ease 0s;}
    .post-date {
    border: 1px solid #d6948c;
    height: 40px;
    line-height: 38px;
    text-align: center;
    width: 40px;
    }
    .post-date span {
    font-size: 20px;
    font-weight: 700;
    }
    .post-year { padding-left: 10px;}
    .post-year p {font-weight: 700;}
    .like-share {padding: 12px 0;}
    .like-share a {
    color: #999;
    float: left;
    font-size: 12px;
    line-height: 14px;
    margin-right: 20px;
    }
    .like-share a:hover { color: #c87065;}
    .like-share a:last-child { margin-right: 0;}
    .like-share a i { padding: 0 8px 0 2px;}
    .blog-photo { overflow: hidden;}
    .single-blog:hover .blog-photo img { transform: scale(1.1);}
    .blog-photo img {
    width: 100%;
    transition: all 0.5s ease 0s;
    }
    .blog-photo a { display: block;}
    .blog-2 .single-blog {
    background: #fff none repeat scroll 0 0;
    padding: 25px;
    }
    .blog-2 .blog-photo { position: relative;}
    .blog-2 .like-share {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    bottom: -40px;
    position: absolute;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 100%;
    }
    .blog-2 .like-share a {
    color: #444;
    display: inline-block;
    float: none;
    }
    .blog-2 .like-share a:hover { color: #c87065;}
    .blog-2 .post-meta { padding: 30px 0 10px;}
    .blog-2 .single-blog:hover { box-shadow: 1px 25px 54px rgba(0, 0, 0, 0.12);}
    .blog-2 .single-blog:hover .blog-photo img { transform: none;}
    .blog-2 .single-blog:hover .like-share {
    bottom: 0;
    visibility: visible;
    }