Pictures section - section

You can use this section layout to showcase your products, your works or some pictures.

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="products">
    <!-- Begin of section wrapper -->
    <div class="section-wrapper twoside">

        <!-- title -->
        <div class="section-title text-center">
            <h5 class="title-bg">Products</h5>
        </div>

        <!-- text or illustration order are manipulated via Bootstrap order-md-1, order-md-2 class -->
        <!-- begin of item -->
        <div class="item row justify-content-between">
            <!-- img-frame-normal demo -->
            <div class="col-12 col-md-6 center-vh">
                <div class="section-content anim translateUp">
                    <div class="images text-center">
                        <div class="img-frame-normal">
                            <div class="img-1 shadow">
                                <img class="img" src="img/items/img-sample7.jpg" alt="Image">
                            </div>
                            <div class="legend text-left pos-abs">
                                <h5>Computer Desktop</h5>
                                <p class="small">Art / Programing</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- img-frame-normal demo, portrait orientation -->
            <div class="col-12 col-sm-6 col-md-5 col-lg-4 center-vh">
                <div class="section-content anim">
                    <div class="images text-center">
                        <div class="img-frame-normal frame-small portrait">
                            <div class="img-1 shadow">
                                <img class="img" src="img/items/img-portrait3.jpg" alt="Image">
                            </div>
                            <div class="legend text-right pos-abs">
                                <h5>Computer Desktop</h5>
                                <p class="small">Art / Programing</p>
                            </div>
                        </div>
                    </div>
                </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.