<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="fond"> <span class="s1">blog </span><span class="s2">card</span></div>
<div class="card">
<div class="thumbnail"><img class="left" src="http://cdn2.hubspot.net/hubfs/322787/Mychefcom/images/BLOG/Header-Blog/photo-culinaire-pexels.jpg"/></div>
<div class="right">
<h1>Why you Need More Magnesium in Your Daily Diet</h1>
<div class="author"><img src="https://randomuser.me/api/portraits/men/95.jpg"/>
<h2>Igor MARTY</h2>
</div>
<div class="separator"></div>
<p>Magnesium is one of the six essential macro-minerals that is required by the body for energy production and synthesis of protein and enzymes. It contributes to the development of bones and most importantly it is responsible for synthesis of your DNA and RNA. A new report that has appeared in theBritish Journal of Cancer, gives you another reason to add more magnesium to your diet...</p>
</div>
<h5>12</h5>
<h6>JANUARY</h6>
<ul>
<li><i class="fa fa-eye fa-2x"></i></li>
<li><i class="fa fa-heart-o fa-2x"></i></li>
<li><i class="fa fa-envelope-o fa-2x"></i></li>
<li><i class="fa fa-share-alt fa-2x"></i></li>
</ul>
<div class="fab"><i class="fa fa-arrow-down fa-3x"> </i></div>
</div>