<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 ---------->
<!-- News jumbotron -->
<div class="jumbotron text-center hoverable p-4">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 offset-md-1 mx-3 my-3">
<!-- Featured image -->
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.jpg" class="img-fluid" alt="Sample image for first version of blog listing">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-7 text-md-left ml-3 mt-3">
<!-- Excerpt -->
<a href="#!" class="green-text">
<h6 class="h6 pb-1"><i class="fas fa-desktop pr-1"></i> Work</h6>
</a>
<h4 class="h4 mb-4">This is title of the news</h4>
<p class="font-weight-normal">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
<p class="font-weight-normal">by <a><strong>Carine Fox</strong></a>, 19/08/2016</p>
<a class="btn btn-success text-white">Read more</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- News jumbotron -->
