<section class="blog-section container-fluid">
<span class="text-center d-block mt-3">Latest Blog</span>
<div class="auto-container">
<div class="sec-title text-center pb-3">
<h2>Latest Blog</h2>
</div>
<div class="row">
<!-- Blog block -->
<div class="blog col-lg-4 col-md-6 col-sm-12 wow fadeInUp animated" >
<div class="inner-box">
<div class="image-box">
<figure class="image"><a href="#"><img src="https://images.pexels.com/photos/33597/guitar-classical-guitar-acoustic-guitar-electric-guitar.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></a></figure>
</div>
<div class="lower-content">
<div class="info-box">
<span class="date">21- August - 2019</span>
<span class="author">Vishvjeet Patel</span>
</div>
<h4><a href="#">Apa itu Lorem Ipsum?</a></h4>
<div class="text">Lorem Ipsum adalah text contoh digunakan didalam industri pencetakan dan typesetting. </div>
<div class="link-box"><a href="#"><span class="fa fa-angle-right"></span>Read More</a></div>
</div>
</div>
</div>
<!-- Blog block -->
<div class="blog col-lg-4 col-md-6 col-sm-12 wow fadeInUp animated" data-wow-delay="400ms" >
<div class="inner-box">
<div class="image-box">
<figure class="image"><a href="#"><img src="https://images.pexels.com/photos/1370545/pexels-photo-1370545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></a></figure>
</div>
<div class="lower-content">
<div class="info-box">
<span class="date">21- August - 2019</span>
<span class="author">Vishvjeet Patel</span>
</div>
<h4><a href="#">Mengapa kami menggunakannya?</a></h4>
<div class="text">Adalah menjadi satu fakta bahawa pembaca akan terganggu oleh text yang boleh difahami</div>
<div class="link-box"><a href="#"><span class="fa fa-angle-right"></span>Read More</a></div>
</div>
</div>
</div>
<!-- Blog block -->
<div class="blog col-lg-4 col-md-6 col-sm-12 wow fadeInUp animated" data-wow-delay="800ms">
<div class="inner-box">
<div class="image-box">
<figure class="image"><a href="#"><img src="https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></a></figure>
</div>
<div class="lower-content">
<div class="info-box">
<span class="date">21- August - 2019</span>
<span class="author">Vishvjeet Patel</span>
</div>
<h4><a href="#">Dari mana dapat saya memperolehi text ini?</a></h4>
<div class="text">Ada banyak versi dari mukasurat-mukasurat Lorem Ipsum yang sedia ada, tetapi </div>
<div class="link-box"><a href="#"><span class="fa fa-angle-right"></span>Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
.blog{ position: relative; margin-bottom: 40px; }
.blog .inner-box{ position: relative; padding: 0 40px 35px; background-color:#fafafa; border-radius: 10px; }
.blog .inner-box:before{ position: absolute; left: 0; top: 0; height: 105px; width: 100%; background-color:#ffffff;
content: ""; }
.blog .image-box{ position: relative; text-align: center; }
.blog .image-box .image{
display: inline-block;
margin-bottom: 0;
text-align: center;
overflow: hidden;
background-color: #9C27B0;
}
.blog .image-box .image img{
max-width: 100%;
height: auto;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.blog .inner-box:hover .image-box .image img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
opacity: .5;
}
.blog .lower-content{
position: relative;
}
.blog .info-box{
position: relative;
margin: 0 auto;
max-width: 240px;
width: 100%;
background-color:#ffffff;
transform: translateY(-50%);
min-height: 80px;
padding-top: 20px;
text-align: center;
border-radius: 5px;
box-shadow: 0 18px 28px rgba(11,11,77,.14);
}
.blog .info-box .date{
position: relative;
display: block;
font-size: 14px;
line-height: 20px;
color: #9C27B0;
font-weight: 500;
margin-bottom: 5px;
}
.blog .info-box .author{
position: relative;
display: block;
font-size: 12px;
line-height: 15px;
color: #707070;
font-weight: 400;
}
.blog h4{
position: relative;
display: block;
font-size: 18px;
line-height: 25px;
color: #12114a;
font-weight: 500;
margin-bottom: 18px;
}
.blog h4 a{
color: #12114a;
display: inline-block;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.blog h4 a:hover{
color: #9C27B0;
}
.blog .text{
position: relative;
display: block;
font-size: 15px;
line-height: 25px;
color: #707070;
font-weight: 400;
margin-bottom: 35px;
}
.blog .link-box{
position: relative;
display: block;
}
.blog .link-box a{
position: relative;
display: inline-block;
font-size: 15px;
line-height: 25px;
color: #12114a;
font-weight: 500;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.blog .link-box a span{
float: left;
line-height: 25px;
color: #000000;
margin-right: 12px;
}
.blog .link-box a:hover{
color: #9C27B0;
}
</style>
$(document).ready(function(){
new WOW().init();
})