Portfolio

Portfolio Html Structure

<div class="pf-wrap">
    <div class="pf-filter padd-box">
        <button data-filter="*">all</button>
        <button data-filter=".category1">category1</button>
        <button data-filter=".category2">category2</button>
        <button data-filter=".category3">category3</button>
    </div><!-- .pf-filter -->

    <div class="pf-grid">
        <div class="pf-grid-item category1">
            [portfolio item html]
        </div>

        <div class="pf-grid-item category2">
            [portfolio item html]
        </div>

        <div class="pf-grid-item category3">
            [portfolio item html]
        </div>

        <div class="pf-grid-item category1 category2">
            [portfolio item html]
        </div>
    </div><!-- .pf-grid -->
</div><!-- .pf-wrap -->

Portfolio Item HTML

<div class="pf-grid-item photography">
    <a class="pf-project" href="#pf-popup-1">
        <figure class="pf-figure">
            <img src="image.jpg" alt="">
        </figure>

        <div class="pf-caption text-center">
            <div class="valign-table">
                <div class="valign-cell">
                    <h2 class="pf-title text-upper">Project Title</h2>

                    <div class="pf-text clear-mrg">
                        <p>Project Description</p>
                    </div>

                    <button class="pf-btn btn btn-primary">View More</button>
                </div>
            </div>
        </div>
    </a><!-- .pf-project -->

    <div id="pf-popup-1" class="pf-popup clearfix">
        [Portfolio Popup Html]
    </div><!-- .pf-popup -->
</div><!-- .pf-grid-item -->