Portfolio - Blocks

Portfolio Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Category

Project Title

Category

Project Title

Category

Project Title

Category

Project Title


<div class="row text-center">
  <div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
    <h2>Portfolio Grid</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
</div>
<div class="row portfolio-grid g-3 mt-5">
  <!-- Portfolio box 1 -->
  <div class="col-12 col-md-6 portfolio-item">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/agency-minimal-1.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <span class="mb-2">Category</span>
          <h4 class="fw-normal">Project Title</h4>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 2 -->
  <div class="col-12 col-md-6 portfolio-item">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/agency-minimal-2.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <span class="mb-2">Category</span>
          <h4 class="fw-normal">Project Title</h4>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 3 -->
  <div class="col-12 col-md-6 portfolio-item">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/agency-minimal-3.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <span class="mb-2">Category</span>
          <h4 class="fw-normal">Project Title</h4>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 4 -->
  <div class="col-12 col-md-6 portfolio-item">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/agency-minimal-4.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <span class="mb-2">Category</span>
          <h4 class="fw-normal">Project Title</h4>
        </div>
      </div>
    </div>
  </div>
</div><!-- end row/portfolio-grid -->
  • All
  • First
  • Second
  • Third
Project Title
category
Project Title
category
Project Title
category
Project Title
category
Project Title
category
Project Title
category 

<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5">
  <ul>
    <li class="active" data-filter="*">All</li>
    <li data-filter=".category-1">First</li>
    <li data-filter=".category-2">Second</li>
    <li data-filter=".category-3">Third</li>
  </ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2 hover-style-1 border-radius">
  <!-- Portfolio box 1 -->
  <div class="portfolio-item category-1">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/portfolio-simple-2-p1.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <h5 class="fw-normal m-0">Project Title</h5>
          <span class="font-small">category</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 2 -->
  <div class="portfolio-item category-2">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/portfolio-simple-2-p2.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <h5 class="fw-normal m-0">Project Title</h5>
          <span class="font-small">category</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 3 -->
  <div class="portfolio-item category-3">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/portfolio-simple-2-p3.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <h5 class="fw-normal m-0">Project Title</h5>
          <span class="font-small">category</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 4 -->
  <div class="portfolio-item category-1">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/portfolio-simple-2-p4.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <h5 class="fw-normal m-0">Project Title</h5>
          <span class="font-small">category</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 5 -->
  <div class="portfolio-item category-2">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/portfolio-simple-2-p5.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <h5 class="fw-normal m-0">Project Title</h5>
          <span class="font-small">category</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio box 6 -->
  <div class="portfolio-item category-3">
    <div class="portfolio-box">
      <div class="portfolio-img">
        <img src="../assets/images/portfolio-simple-2-p6.jpg" alt="">
      </div>
      <a href="#"></a><!-- Portfolio Single link -->
      <div class="portfolio-title">
        <div>
          <h5 class="fw-normal m-0">Project Title</h5>
          <span class="font-small">category</span>
        </div>
      </div>
    </div>
  </div>
</div><!-- end portfolio-masonry-->

Portfolio Hero Slider

Project Title

Project Title

Project Title


<!-- Swiper -->
<div class="swiper hero-portfolio-slider">
  <div class="swiper-wrapper">
    <!-- Slide 1 -->
    <div class="swiper-slide">
      <div class="hero-portfolio-box">
        <div class="hero-portfolio-img">
          <img src="../assets/images/img-src.jpg" alt="">
        </div>
        <div class="hero-portfolio-caption">
          <h3><a href="#">Project Title</a></h3>
        </div>
      </div>
    </div>
    <!-- Slide 2 -->
    <div class="swiper-slide">
      <div class="hero-portfolio-box">
        <div class="hero-portfolio-img">
          <img src="../assets/images/img-src.jpg" alt="">
        </div>
        <div class="hero-portfolio-caption">
          <h3><a href="#">Project Title</a></h3>
        </div>
      </div>
    </div>
    <!-- Slide 3 -->
    <div class="swiper-slide">
      <div class="hero-portfolio-box">
        <div class="hero-portfolio-img">
          <img src="../assets/images/img-src.jpg" alt="">
        </div>
        <div class="hero-portfolio-caption">
          <h3><a href="#">Project Title</a></h3>
        </div>
      </div>
    </div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
</div>
<!-- end Swiper -->