Pictures with text - section

You can use this section layout to showcase a product item, an event, your work ...

home page

CODE

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

You can duplicate this section as much as you want (for example, to showcase multiple images). Just note that you can not use the data-section value twice for a different section within an HTML page, as it will be the id of the section later. You have to use different value for the duplicated section.

HTML Navigation menu
<div class="section section-twoside fp-auto-height-responsive " data-section="product-item-alpha">
    <!-- Begin of section wrapper -->
    <div class="section-wrapper twoside">
        <!-- title -->
        <div class="section-title text-center">
            <h5 class="title-bg">Interior</h5>
        </div>


        <!-- text or illustration order are manipulated via Bootstrap order-md-1, order-md-2 class -->

        <div class="item row justify-content-between">

            <!-- img-frame-legend-alpha demo -->
            <div class="col-12 col-sm-6 center-vh">
                <div class="section-content anim translateUp">
                    <div class="images text-center">
                        <div class="img-frame-legend-alpha">
                            <div class="img-1 shadow">
                                <img class="img" src="img/items/img-sample7.jpg" alt="Image">
                            </div>
                            <div class="legend">
                                <h2 class="display-4">
                                    <strong>Computer Desktop</strong>
                                </h2>
                                <p class="">Art / Interior Design</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- img-frame-legend-alpha portrait mode bottom demo -->
            <div class="col-12 col-sm-6 col-md-5 col-lg-4">
                <div class="section-content anim">
                    <!-- title and description -->
                    <div class="title-desc">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur
                            fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor.
                            Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque
                            molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem.</p>
                    </div>

                    <a class="btn btn-transp-arrow btn-outline btn-primary btn-round" href="item.html">
                        <span class="icon arrow-right"></span>
                        <span class="text">View</span>
                    </a>
                </div>
            </div>


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

Add class portrait to the div with classimg-frame-normal to mention that the picture is in portrait mode.