<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 ----------> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,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-sec-wrap"> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="main-heading">Latest News</div> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="bs-box"> <div class="thumb"> <a href="#"> <img src="https://i.picsum.photos/id/249/900/620.jpg" alt="Thumb"> </a> </div> <div class="info"> <div class="post-info"> <ul> <li> <a href="#"><i class="fas fa-user"></i> Admin</a> </li> <li><i class="fas fa-calendar-alt"></i> 14 Jun, 2020</li> </ul> </div> <div class="content"> <h4> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> </h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida luctus tortor in suscipit. Etiam non faucibus risus. </p> <a href="#" class="read-more-btn">Read More</a> </div> </div> </div> </div> <div class="col-lg-4"> <div class="bs-box"> <div class="thumb"> <a href="#"> <img src="https://i.picsum.photos/id/249/900/620.jpg" alt="Thumb"> </a> </div> <div class="info"> <div class="post-info"> <ul> <li> <a href="#"><i class="fas fa-user"></i> Admin</a> </li> <li><i class="fas fa-calendar-alt"></i> 25 Jul, 2020</li> </ul> </div> <div class="content"> <h4> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> </h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida luctus tortor in suscipit. Etiam non faucibus risus. </p> <a href="#" class="read-more-btn">Read More</a> </div> </div> </div> </div> <div class="col-lg-4"> <div class="bs-box"> <div class="thumb"> <a href="#"> <img src="https://i.picsum.photos/id/249/900/620.jpg" alt="Thumb"> </a> </div> <div class="info"> <div class="post-info"> <ul> <li> <a href="#"><i class="fas fa-user"></i> Admin</a> </li> <li><i class="fas fa-calendar-alt"></i> 18 Sep, 2020</li> </ul> </div> <div class="content"> <h4> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> </h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida luctus tortor in suscipit. Etiam non faucibus risus. </p> <a href="#" class="read-more-btn">Read More</a> </div> </div> </div> </div> </div> </div> </div>

.blog-sec-wrap { width: 100%; float: left; padding: 60px 0; font-family: 'Poppins', sans-serif; } .main-heading{ text-align: center; font-weight: 600; padding-bottom: 15px; position: relative; text-transform: capitalize; font-size: 24px; margin-bottom: 25px; } .main-heading::before { background: #ffb606 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 50%; margin-left: -20px; position: absolute; width: 40px; } .bs-box { box-shadow: 0 0 10px #cccccc; } .thumb img { width: 100%; } .post-info ul { display: flex; align-items: center; list-style: none; border-bottom: solid 1px #e4e4e4; padding-left: 20px; } .post-info ul li { margin-right: 10px; padding: 10px 0; font-size: 14px; color: #323232; } .post-info ul li a { color: #323232; text-decoration: none; } .content { padding: 0 20px 30px; } .content h4 { font-size: 20px; } .content h4 a { text-decoration: none; color: #323232; } .content p { font-size: 14px; } .read-more-btn { text-transform: uppercase; font-weight: 600; display: inline-block; padding: 6px 30px; border: 2px solid #ffb606; color: #000; margin-top: 5px; overflow: hidden; position: relative; z-index: 1; margin: 0; border-radius: 30px; text-decoration: none; max-width: 160px; text-align: center; } .read-more-btn::after { position: absolute; left: -100%; top: 0; content: ""; height: 100%; width: 100%; background: #ffb606; z-index: -1; transition: all 0.35s ease-in-out; } .read-more-btn:hover::after { left: 0; } .read-more-btn:hover, .read-more-btn:focus { text-decoration: none; color: #000; } @media (max-width: 991px) { .bs-box { margin-bottom: 20px; } } @media (max-width: 575px) { .main-heading { font-size: 21px; } .bs-box { margin-bottom: 20px; } .content h4 { font-size: 18px; } .read-more-btn { font-size: 14px; padding: 6px 25px; } }