Pictures with text - section

You can use this section layout to showcase features, important points ...

home page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main.

HTML
<div class="section section-twoside fp-auto-height-responsive bg-white-gray bg-bright" data-section="feature-more-list">
  <!-- Begin of section wrapper -->
  <div class="section-wrapper twoside padding-top padding-bottom">

    <!-- begin of item -->
    <div class="item row">
      <!-- begin of frames illustration content -->
      <div class="col-12 col-md-6 order-md-1 center-vh">
        <!-- content -->
        <div class="section-content anim">
          <!-- illustartion -->
          <div class="images text-center">
            <div class="img-circles-alpha img-2-left">
              <div class="img-1 shadow">
                <img class="img" src="img/items/img-square2.png" alt="Home page section">
              </div>
              <div class="img-2 shadow">
                <img class="img" src="img/items/img-square1.png" alt="Home page section">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end of frames illustration content -->

      <!-- begin of text content -->
      <div class="col-12 col-md-6 order-md-2 center-vh">
        <!-- content -->
        <div class="section-content anim">
          <!-- title and description -->
          <div class="title-desc">
            <h2 class="display-4 display-title sr-up-td2">Unique Feature</h2>
            <div class="sr-up-td3">
              <p>This is a placeholder text. Replace it with your awesome call to action text.</p>
            </div>
            <div class="row sr-up-td4">
              <div class="col-12 col-md-6 mb-3">
                <div class="">
                  <h4 class="border-primary text-primary">Simple List</h4>
                  <ul class="list-primary">
                    <li>Based on Bootstrap 4</li>
                    <li>Modern and creative</li>
                    <li>Optimized for mobile devices</li>
                  </ul>
                </div>
              </div>
              <div class="col-12 col-md-6 mb-3">
                <div class="">
                  <h4 class="border-primary text-primary">Text Only</h4>
                  <p>Develop stunning app and website easily with this template</p>
                </div>
              </div>
            </div>
          </div>

          <!-- Action button -->
          <div class="btns-action sr-down-td2">
            <a class="btn btn-primary bg-gradient-primary btn-round no-border btn-shadow" href="#download">
              <span class="txt">Get it now</span>
            </a>
            <a class="btn btn-outline-primary btn-round" href="#features">
              Features
            </a>
          </div>
        </div>
      </div>
      <!-- end of text content -->
    </div>
    <!-- end of item -->

  </div>
  <!-- End of section wrapper -->
</div>

The image frames are located within the following codes. It requires sqaure sized (1:1) images.

<div class="images text-center">
  <div class="img-circles-alpha img-2-left">
    <div class="img-1 shadow">
      <img class="img" src="img/items/img-square2.png" alt="Home page section">
    </div>
    <div class="img-2 shadow">
      <img class="img" src="img/items/img-square1.png" alt="Home page section">
    </div>
  </div>
</div>