Grid Content #5

Site administration -> Appearance -> Space -> Block #.

Preview

HTML Code

<!-- Start - Block - Grid Content #5 -->
<div class="wrapper-fw">
    <!-- Start item -->
    <div class="row no-gutters mb-5 rui-card--colorized rui-rounded--lg" style="background-color: #ffddd7;">
        <div class="col-xs-12 col-lg-6 rui-img-rounded--lg pl-0 pr-lg-6">
            <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/block-8-img-1.jpg" alt="pic #1" width="800" height="600" class="img-fluid atto_image_button_text-bottom">
        </div>
        <div class="col-xs-12 col-lg-6 d-flex flex-wrap align-content-center px-lg-6 mt-3 mt-lg-0">
            <div>
                <h3 class="lead-3">Engaging live sessions.</h3>
                <p>Lorem ipsum was purposefully designed to have no meaning, but appear like real text, making it the perfect placeholder.</p>
                <a href="#" class="btn btn-dark mt-3" target="_blank">Learn more</a>
            </div>
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="row no-gutters mb-5 rui-card--colorized rui-rounded--lg" style="background-color: #feedba;">
        <div class="col-xs-12 col-lg-6 d-flex flex-wrap align-content-center px-lg-6">
            <div>
                <h3 class="lead-3">Well-documented Moodle Theme</h3>
                <p>According to McClintock, a 15th century typesetter likely scrambled part of Ciceros De Finibus in order to provide placeholder text.</p>
                <a href="https://app.gitbook.com/s/AEb2xvTC9MyvJ5piB0eJ/getting-started/front-page-blocks/block-17-team" class="btn btn-dark mt-3" target="_blank">Check the documentation</a>
            </div>
        </div>

        <div class="col-xs-12 col-lg-6 rui-img-rounded--lg pr-0 pl-lg-6 mt-3 mt-lg-0">
            <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/block-8-img-2.jpg" alt="pic #2" width="800" height="600" class="img-fluid atto_image_button_text-bottom">
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="row no-gutters mb-5 rui-card--colorized rui-rounded--lg" style="background-color: #f0e1f3;">
        <div class="col-xs-12 col-lg-6 rui-img-rounded--lg pl-0 pr-lg-6">
            <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/block-8-img-3.jpg" alt="pic #4" width="800" height="600" class="img-fluid atto_image_button_text-bottom">
        </div>
        <div class="col-xs-12 col-lg-6 d-flex flex-wrap align-content-center px-lg-6 mt-3 mt-lg-0">
            <div>
                <h3 class="lead-3">Lifetime updates!</h3>
                <p>And anyways, as Cecil Adams reasoned, “Do you really, think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps.</p>
                <a href="#" class="btn btn-dark mt-3" target="_blank">Available courses</a>
            </div>
        </div>
    </div>
    <!-- End item -->
</div>
<!-- End - Block - Grid Content #5 -->

How to add more item to blocks?