samedi 6 mars 2021

Laravel One Loop on 2 html row

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