I'm Developing a news portal Website. But i stuck on something. Problem is there are two type off content over view in same row. 1st one is: there are a big thumbnail news article first and then 4 small thumbnail news article.
How to write code on this? i have no idea but i want to cover the five article with one loop.
Here is the html code
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="post-wrapper wow fadeIn" data-wow-duration="2s">
<h3><a href="#">The standard chunk of Lorem Ipsum used since the 1500s is .</a></h3>
<div class="post-thumb">
<a href="#">
<img src="" class="img-responsive" alt="">
</a>
</div>
</div>
<div class="post-title-author-details">
<div class="post-editor-date">
<div class="post-date">
<i class="pe-7s-clock"></i> Oct 6, 2016
</div>
<div class="post-author-comment"><i class="pe-7s-comment"></i> 13 </div>
</div>
<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true <a href="#">Read more...</a></p>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="row rn_block">
<div class="col-xs-6 col-md-6 col-sm-6 post-padding">
<div class="post-thumb wow fadeIn" data-wow-duration="1s" data-wow-delay="0.1s">
<a href="#">
<img src="" class="img-responsive" alt="">
</a>
</div>
<div class="post-title-author-details">
<h5><a href="#">All the Lorem Ipsum generators on the </a></h5>
<div class="post-editor-date">
<div class="post-date">
<i class="pe-7s-clock"></i> Oct 6, 2016
</div>
<div class="post-author-comment"><i class="pe-7s-comment"></i> 13 </div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 col-sm-6 post-padding">
<div class="post-thumb wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
<a href="#">
<img src="" class="img-responsive" alt="">
</a>
</div>
<div class="post-title-author-details">
<h5><a href="#">If you are going to use a passage of Lorem Ipsum,</a></h5>
<div class="post-editor-date">
<div class="post-date">
<i class="pe-7s-clock"></i> Oct 6, 2016
</div>
<div class="post-author-comment"><i class="pe-7s-comment"></i> 13 </div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 col-sm-6 post-padding">
<div class="post-thumb wow fadeIn" data-wow-duration="1s" data-wow-delay="0.3s">
<a href="#">
<img src="" class="img-responsive" alt="">
</a>
</div>
<div class="post-title-author-details">
<h5><a href="#">Lorem Ipsum comes from sections</a></h5>
<div class="post-editor-date">
<div class="post-date">
<i class="pe-7s-clock"></i> Oct 6, 2016
</div>
<div class="post-author-comment"><i class="pe-7s-comment"></i> 13 </div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 col-sm-6 post-padding">
<div class="post-thumb wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
<a href="#">
<img src="" class="img-responsive" alt="">
</a>
</div>
<div class="post-title-author-details">
<h5><a href="#">Microbus runs over 2 pedestrians in Banani</a></h5>
<div class="post-editor-date">
<div class="post-date">
<i class="pe-7s-clock"></i> Oct 6, 2016
</div>
<div class="post-author-comment"><i class="pe-7s-comment"></i> 13 </div>
</div>
</div>
</div>
</div>
</div>
</div>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire