Projects grid section - section

This section layout represents the "projects grid section" of the index.html file. Use it to list your projects or products.

home page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main. Replace texts and buttons by yours.

You can duplicate this section as much as you want. 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.

HTML Section - Projects
<!-- Begin of list projects section -->
<div class="section section-list-feature fp-auto-height-responsive " data-section="projects-grid">

    <!-- Begin of section wrapper -->
    <div class="section-wrapper fullwidth with-margin margin-topbottom">
        <!-- content -->
        <div class="section-content anim">
            <div class="row">
                <!-- text and title -->
                <div class="col-12 col-lg-4 text-left">
                    <!-- title and description -->
                    <div class="title-desc">
                        <h2 class="display-4 display-title display-decor anim-1">Every Projects</h2>
                        <p class="anim-2 desc-decor">List of our projects. Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a
                            sem ultrices neque vehicula fermentum a sit amet nulla.
                        </p>
                    </div>
                </div>

                <!-- grid -->
                <div class="col-12 col-lg-7">
                    <!-- project list -->
                    <div class="project-list grid-1 grid-md-2 grid-lg-2 anim-list">
                        <!-- an item -->
                        <div class="item media media-project">
                            <div class="media-img">
                                <img class="" src="img/items/img-sample1-square.jpg" alt="An image">
                            </div>
                            <div class="media-body">
                                <a href="item.html#project_url">
                                    <h4>Art / Design</h4>
                                    <h3>Alpha Project</h3>
                                </a>
                            </div>
                            <div class="media-footer">
                                <a class="btn btn-underline btn-primary" href="item.html">
                                    <span class="text">Details ...</span>
                                </a>
                            </div>
                        </div>
                        <!-- an item -->
                        <div class="item media media-project">
                            <div class="media-img">
                                <img class="" src="img/items/img-sample2-square.jpg" alt="An image">
                            </div>
                            <div class="media-body">
                                <a href="item.html#project_url">
                                    <h4>Archi / Photo</h4>
                                    <h3>Beta Project</h3>
                                </a>
                            </div>
                            <div class="media-footer">
                                <a class="btn btn-underline btn-primary" href="item.html">
                                    <span class="text">Details ...</span>
                                </a>
                            </div>
                        </div>
                        <!-- an item ... -->
                        
                    </div>

                </div>
            </div>

        </div>

        <!-- Arrows scroll down/up -->
        <footer class="section-footer scrolldown">
            <a class="up">
                <span class="btn btn-arrow">
                    <span class="icon">
                        <span class="arrow-up"></span>
                    </span>
                </span>
            </a>
            <a class="down">
                <span class="btn btn-arrow">
                    <span class="icon">
                        <span class="arrow-down"></span>
                    </span>
                </span>
            </a>
        </footer>
    </div>
    <!-- End of section wrapper -->
</div>
<!-- End of list projects section -->