<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<div class="blog-wrap">
<div class="container">
<div class="row">
<div class="col-md-9 blog-left">
<article class="blog-post">
<div class="featured-post">
<a href="#">
<img src="https://i.picsum.photos/id/1057/1200/600.jpg" alt="">
</a>
</div>
<div class="divider25"></div>
<div class="content">
<h3 class="title">
<a href="#">There are many variations of passages</a>
</h3>
<ul class="meta-post">
<li class="comment">
<a href="#">
2 Comments
</a>
</li>
<li class="date">
<a href="#">
February 20, 2017
</a>
</li>
</ul>
<div class="entry-post">
<p>This is a Rebel that surrendered to us. Although he denies it, I believe there may be more of them, and I request permission to conduct a further search of the area. He was armed only with this. Good work, Commander. Leave us. Conduct your search and bring his companions to me. Yes, my Lord.</p>
<div class="more-link">
<a href="#" class="read-more-btn">Read More</a>
</div>
</div>
</div>
</article>
<article class="blog-post">
<div class="featured-post">
<a href="#">
<img src="https://i.picsum.photos/id/1058/1200/600.jpg" alt="">
</a>
</div>
<div class="divider25"></div>
<div class="content">
<h3 class="title">
<a href="#">There are many variations of passages</a>
</h3>
<ul class="meta-post">
<li class="comment">
<a href="#">
2 Comments
</a>
</li>
<li class="date">
<a href="#">
February 20, 2017
</a>
</li>
</ul>
<div class="entry-post">
<p>This is a Rebel that surrendered to us. Although he denies it, I believe there may be more of them, and I request permission to conduct a further search of the area. He was armed only with this. Good work, Commander. Leave us. Conduct your search and bring his companions to me. Yes, my Lord.</p>
<div class="more-link">
<a href="#" class="read-more-btn">Read More</a>
</div>
</div>
</div>
</article>
<div class="blog-pagination">
<ul class="">
<li class="prev">
<a href="#">
<i class="fas fa-chevron-left"></i>
</a>
</li>
<li>
<a href="#" class="waves-effect waves-teal">01</a>
</li>
<li>
<a href="#" class="waves-effect waves-teal">02</a>
</li>
<li class="active">
<a href="#" class="waves-effect waves-teal">03</a>
</li>
<li>
<a href="#" class="waves-effect waves-teal">04</a>
</li>
<li class="next">
<a href="#">
<i class="fas fa-chevron-right"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 sidebar">
<div class="widget widget-search">
<form action="#" method="get" accept-charset="utf-8">
<input type="text" name="widget-search" placeholder="Search">
</form>
</div>
<div class="widget widget-categories">
<div class="widget-title">
<h3>Categories</h3>
</div>
<ul class="cat-list">
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Accessories<span>(03)</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Cameras<span>(19)</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Computers<span>(56)</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Laptops<span>(03)</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Networking<span>(03)</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Old Products<span>(89)</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Smartphones<span>(90)</span></a>
</li>
<li>
<a href="#"><i class="fas fa-chevron-right"></i> Software<span>(23)</span></a>
</li>
</ul>
</div>
<div class="widget widget-tags">
<div class="widget-title">
<h3>Popular Tags</h3>
</div>
<ul class="tag-list">
<li>
<a href="#" class="waves-effect waves-teal">Phone</a>
</li>
<li>
<a href="#" class="waves-effect waves-teal">Cameras</a>
</li>
<li>
<a href="#" class="waves-effect waves-teal">Computers</a>
</li>
<li>
<a href="#" class="waves-effect waves-teal">Laptops</a>
</li>
<li>
<a href="#" class="waves-effect waves-teal">Headphones</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity=" sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
.blog-wrap {
font-family: 'Open Sans', sans-serif;
padding: 60px 0;
}
.blog-left {
padding-right: 40px;
}
.blog-post + .blog-post {
margin-top: 35px;
}
.blog-post .content {
padding-top: 25px;
}
.blog-post .content h3.title {
font-weight: 500;
margin-bottom: 10px;
font-size: 22px;
}
.blog-post .content h3.title a {
color: #000;
text-decoration: none;
}
.featured-post img {
width: 100%;
border-radius: 10px;
}
.meta-post {
padding: 0;
margin: 0 0 20px;
list-style: none;
font-size: 13px;
}
.meta-post li {
display: inline-block;
margin-right: 15px;
}
.meta-post li a {
color: #8c8c8c;
text-decoration: none;
}
.entry-post {
font-size: 14px;
}
.read-more-btn {
display: inline-block;
width: 160px;
padding-left: 0;
line-height: 42px;
height: 44px;
border: 2px solid #e5e5e5;
border-radius: 40px;
font-size: 14px;
font-weight: 500;
color: #2d2d2d;
text-align: center;
position: relative;
z-index: 9;
overflow: hidden;
text-decoration: none;
}
.read-more-btn:hover,
.read-more-btn:focus {
color: #fff;
text-decoration: none;
}
.read-more-btn:before {
content: '';
position: absolute;
background: #f28b00;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.read-more-btn:hover:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.more-link {
margin-top: 22px;
}
.sidebar .widget {
margin-bottom: 36px;
}
.widget-search form input {
height: 40px;
border: none;
background: #f5f5f5;
border-radius: 25px;
padding: 0 20px;
width: 100%;
font-size: 13px;
}
.sidebar .widget .widget-title h3 {
font-size: 20px;
font-weight: 500;
color: #2d2d2d;
padding-bottom: 15px;
margin-bottom: 22px;
border-bottom: 1px solid #e5e5e5;
position: relative;
}
.widget-categories > ul.cat-list {
list-style: none;
padding-left: 0;
}
.widget-categories > ul.cat-list > li {
margin-bottom: 15px;
font-weight: 400;
}
.widget-categories > ul.cat-list > li > a {
color: #484848;
position: relative;
font-size: 12px;
text-decoration: none;
}
.widget-categories > ul.cat-list > li > a .fas {
font-size: 10px;
margin-right: 9px;
color: #989898;
}
.widget-tags ul.tag-list {
padding: 0;
margin: 0;
list-style: none;
}
.widget-tags ul.tag-list li {
margin: 0 0 10px;
display: inline-block;
}
.widget-tags ul.tag-list li a {
display: inline-block;
padding: 5px 15px;
color: #8c8c8c;
font-size: 12px;
background-color: #f5f5f5;
border-radius: 30px;
text-decoration: none;
}
.blog-pagination {
text-align: center;
margin-top: 40px;
}
.blog-pagination ul {
padding: 0;
margin: 0;
list-style: none;
}
.blog-pagination ul li {
display: inline-block;
padding: 0 5px;
}
.blog-pagination ul li a {
width: 45px;
height: 45px;
border-radius: 45px;
display: block;
border: solid 2px #e5e5e5;
line-height: 42px;
color: #32466a;
text-decoration: none;
font-size: 14px;
}
.blog-pagination ul li.prev a,
.blog-pagination ul li.next a {
color: #f28b00;
}
.blog-pagination ul li.active a {
background: #f28b00;
border-color: #f28b00;
color: #fff;
}
/**Blog2**/
.bolg-post-list {
padding: 0;
margin: 0 -10px;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.bolg-post-list>li {
padding: 0 10px;
width: 50%;
margin-bottom: 25px;
}
