Portfolio

<!-- Start Masonry Gallery #4col -->
<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 p-b-50 text-center">
        <h2>Our <span>Portfolio</span></h2>
        <p class="gnx-subheading">Web Design / Creative Solutions</p>
        <hr class="hr-small hr-color m-t-0">
      </div>
    </div><!-- /.row -->
    <div class="row">
      <div class="col-sm-12 filters-group filters-white m-b-10">
        <ul class="list-unstyled m-b-10">
          <li id="all" class="active" data-group="all">All</li>
          <li id="group1" data-group="group1">Webdesign</li>
          <li id="group2" data-group="group2">Logos</li>
          <li id="group3" data-group="group3">Brands</li>
        </ul>
      </div>
    </div><!-- /.row -->

    <div id="grid" class="row shuffle-container">

      <!-- Picture Item 1 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group2"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x150.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x300.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Logo</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 2 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group3"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x260.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x520.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Brand</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 3 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group1"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x210.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x420.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Webdesign</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 4 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group2"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x180.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x360.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Logo</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 5 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group3"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x180.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x360.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Brand</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 6 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group1"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x160.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x320.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Webdesign</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 7 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group2"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x310.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x620.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Logo</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 8 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group3"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x260.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x520.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Brand</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 9 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group1"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x165.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x330.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Webdesign</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Picture Item 10 -->
      <div class="col-md-3 col-sm-3 col-xs-6 picture-item" data-groups='["group2"]'>
        <div class="picture-item__inner">
          <div class="hover-box">
            <img class="example-image" src="assets/images/demo-img/gnx-210x150.jpg" data-rjs="2" alt="Image" />
            <div class="box-overlay pic-wrapper">
              <div class="pic-btm-caption">
                <div>
                  <a class="example-image-link" href="assets/images/demo-img/gnx-420x300.jpg" data-lightbox="msnry-item" data-title="Click the right half of the image to move forward.">
                    <h6>Logo</h6>
                    <p>Item Description</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- sizer -->
      <div class="col-md-3 col-sm-3 col-xs-6 shuffle-sizer"></div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!-- /End Masonry Gallery #4col -->