Blocks - Portfolio

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row align-items-center mb-7">
      <div class="col-md-8 col-lg-8 col-xl-7 col-xxl-6 pe-lg-17">
        <h2 class="display-4 mb-3">Recent Projects</h2>
        <p class="lead fs-lg">We love to turn ideas into beautiful things.</p>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="grid grid-view projects-tiles">
      <div class="project">
        <div class="row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope">
          <div class="item col-md-5">
            <figure class="lift rounded mb-6"><a href="./single-project3.html"> <img src="./assets/img/photos/rp1.jpg" srcset="./assets/img/photos/rp1@2x.jpg 2x" alt="" /></a></figure>
            <div class="post-category mb-3 text-purple">Stationary</div>
            <h3 class="post-title">Ipsum Ultricies Cursus</h3>
          </div>
          <!-- /.item -->
          <div class="item col-md-7 mt-md-17">
            <figure class="lift rounded mb-6"><a href="./single-project2.html"> <img src="./assets/img/photos/rp2.jpg" srcset="./assets/img/photos/rp2@2x.jpg 2x" alt="" /></a></figure>
            <div class="post-category mb-3 text-orange">Invitation</div>
            <h3 class="post-title">Mollis Ipsum Mattis</h3>
          </div>
          <!-- /.item -->
          <div class="item col-md-5">
            <figure class="lift rounded mb-6"><a href="./single-project.html"> <img src="./assets/img/photos/rp3.jpg" srcset="./assets/img/photos/rp3@2x.jpg 2x" alt="" /></a></figure>
            <div class="post-category mb-3 text-red">Notebook</div>
            <h3 class="post-title">Magna Tristique Inceptos</h3>
          </div>
          <!-- /.item -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.project -->
    </div>
    <!-- /.projects-tiles -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
        <h3 class="display-4 mb-10">Check out some of our awesome projects with <span class="underline-3 style-2 yellow">creative</span> ideas and great design.</h3>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="carousel owl-carousel grid-view" data-margin="30" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "2"}, "1200":{"items": "3"}}'>
      <div class="item">
        <figure class="rounded mb-6"><img src="@@./assets/img/photos/pd7.jpg" srcset="@@./assets/img/photos/pd7@2x.jpg 2x" alt="" /><a class="item-link" href="@@./assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a href="@@./single-project.html" class="link-dark">Cras Fermentum Sem</a></h2>
            <div class="post-category text-ash">Stationary</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded mb-6"><img src="@@./assets/img/photos/pd8.jpg" srcset="@@./assets/img/photos/pd8@2x.jpg 2x" alt="" /><a class="item-link" href="@@./assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a href="@@./single-project2.html" class="link-dark">Mollis Ipsum Mattis</a></h2>
            <div class="post-category text-ash">Magazine, Book</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded mb-6"><img src="@@./assets/img/photos/pd9.jpg" srcset="@@./assets/img/photos/pd9@2x.jpg 2x" alt="" /><a class="item-link" href="@@./assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a href="@@./single-project3.html" class="link-dark">Ipsum Ultricies Cursus</a></h2>
            <div class="post-category text-ash">Packaging</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded mb-6"><img src="@@./assets/img/photos/pd10.jpg" srcset="@@./assets/img/photos/pd10@2x.jpg 2x" alt="" /><a class="item-link" href="@@./assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a href="@@./single-project.html" class="link-dark">Inceptos Euismod Egestas</a></h2>
            <div class="post-category text-ash">Stationary, Branding</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded mb-6"><img src="@@./assets/img/photos/pd11.jpg" srcset="@@./assets/img/photos/pd11@2x.jpg 2x" alt="" /><a class="item-link" href="@@./assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a href="@@./single-project2.html" class="link-dark">Ipsum Mollis Vulputate</a></h2>
            <div class="post-category text-ash">Packaging</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded mb-6"><img src="@@./assets/img/photos/pd12.jpg" srcset="@@./assets/img/photos/pd12@2x.jpg 2x" alt="" /><a class="item-link" href="@@./assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a href="@@./single-project3.html" class="link-dark">Porta Ornare Cras</a></h2>
            <div class="post-category text-ash">Branding</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      <!-- /.item -->
    </div>
    <!-- /.owl-carousel -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="grid grid-view projects-tiles">
      <div class="project">
        <div class="row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope">
          <div class="item col-md-6 mt-md-7 mt-lg-15">
            <div class="project-details d-flex justify-content-center align-self-end flex-column ps-0 pb-0">
              <div class="post-header">
                <h2 class="display-4 mb-4 pe-xxl-15">Check out some of our recent projects below.</h2>
                <p class="lead fs-lg mb-0">We love to turn ideas into beautiful things.</p>
              </div>
              <!-- /.post-header -->
            </div>
            <!-- /.project-details -->
          </div>
          <!-- /.item -->
          <div class="item col-md-6">
            <figure class="lift rounded mb-6"><a href="./single-project3.html"> <img src="./assets/img/photos/rp1.jpg" srcset="./assets/img/photos/rp1@2x.jpg 2x" alt="" /></a></figure>
            <div class="post-category text-line mb-3 text-violet">Stationary</div>
            <h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
          </div>
          <!-- /.item -->
          <div class="item col-md-6">
            <figure class="lift rounded mb-6"><a href="./single-project2.html"> <img src="./assets/img/photos/rp2.jpg" srcset="./assets/img/photos/rp2@2x.jpg 2x" alt="" /></a></figure>
            <div class="post-category text-line mb-3 text-leaf">Invitation</div>
            <h2 class="post-title h3">Mollis Ipsum Mattis</h2>
          </div>
          <!-- /.item -->
          <div class="item col-md-6">
            <figure class="lift rounded mb-6"><a href="./single-project.html"> <img src="./assets/img/photos/rp3.jpg" srcset="./assets/img/photos/rp3@2x.jpg 2x" alt="" /></a></figure>
            <div class="post-category text-line mb-3 text-purple">Notebook</div>
            <h2 class="post-title h3">Magna Tristique Inceptos</h2>
          </div>
          <!-- /.item -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.project -->
    </div>
    <!-- /.projects-tiles -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container pt-14 pt-md-16">
    <div class="row">
      <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
        <h3 class="display-4 mb-10">Check out some of our awesome projects with creative ideas and great design.</h3>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
  <div class="container-fluid px-md-6">
    <div class="carousel owl-carousel blog grid-view mb-16 mb-md-19" data-margin="30" data-nav="true" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "1500":{"items": "3"}}'>
      <div class="item">
        <figure class="rounded"><img src="./assets/img/photos/pp10.jpg" alt="" /><a class="item-link" href="./single-project.html"><i class="uil uil-link"></i></a></figure>
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded"><img src="./assets/img/photos/pp11.jpg" alt="" /><a class="item-link" href="./single-project2.html"><i class="uil uil-link"></i></a></figure>
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded"><img src="./assets/img/photos/pp12.jpg" alt="" /><a class="item-link" href="./single-project3.html"><i class="uil uil-link"></i></a></figure>
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded"><img src="./assets/img/photos/pp13.jpg" alt="" /><a class="item-link" href="./single-project.html"><i class="uil uil-link"></i></a></figure>
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded"><img src="./assets/img/photos/pp14.jpg" alt="" /><a class="item-link" href="./single-project2.html"><i class="uil uil-link"></i></a></figure>
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded"><img src="./assets/img/photos/pp15.jpg" alt="" /><a class="item-link" href="./single-project3.html"><i class="uil uil-link"></i></a></figure>
      </div>
      <!-- /.item -->
      <div class="item">
        <figure class="rounded"><img src="./assets/img/photos/pp16.jpg" alt="" /><a class="item-link" href="./single-project.html"><i class="uil uil-link"></i></a></figure>
      </div>
      <!-- /.item -->
    </div>
    <!-- /.owl-carousel -->
  </div>
  <!-- /.container-fluid -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto mb-8">
        <h2 class="fs-15 text-uppercase text-muted text-center mb-3">Our Projects</h2>
        <h3 class="display-4 text-center">Check out some of our awesome projects with creative ideas and great design.</h3>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="grid grid-view projects-masonry">
      <div class="row gx-md-8 gy-10 gy-md-13 isotope">
        <div class="project item col-md-6 col-xl-4 product">
          <figure class="lift rounded mb-6"><a href="./single-project.html"> <img src="./assets/img/photos/cs16.jpg" alt="" /></a></figure>
          <div class="project-details d-flex justify-content-center flex-column">
            <div class="post-header">
              <div class="post-category text-line mb-3 text-purple">Cosmetic</div>
              <h2 class="post-title h3">Cras Fermentum Sem</h2>
            </div>
            <!-- /.post-header -->
          </div>
          <!-- /.project-details -->
        </div>
        <!-- /.project -->
        <div class="project item col-md-6 col-xl-4 workshop">
          <figure class="lift rounded mb-6"><a href="./single-project2.html"> <img src="./assets/img/photos/cs17.jpg" alt="" /></a></figure>
          <div class="project-details d-flex justify-content-center flex-column">
            <div class="post-header">
              <div class="post-category text-line mb-3 text-leaf">Coffee</div>
              <h2 class="post-title h3">Mollis Ipsum Mattis</h2>
            </div>
            <!-- /.post-header -->
          </div>
          <!-- /.project-details -->
        </div>
        <!-- /.project -->
        <div class="project item col-md-6 col-xl-4 still-life">
          <figure class="lift rounded mb-6"><a href="./single-project3.html"> <img src="./assets/img/photos/cs18.jpg" alt="" /></a></figure>
          <div class="project-details d-flex justify-content-center flex-column">
            <div class="post-header">
              <div class="post-category text-line mb-3 text-violet">Still Life</div>
              <h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
            </div>
            <!-- /.post-header -->
          </div>
          <!-- /.project-details -->
        </div>
        <!-- /.project -->
        <div class="project item col-md-6 col-xl-4 product">
          <figure class="lift rounded mb-6"><a href="./single-project2.html"> <img src="./assets/img/photos/cs20.jpg" alt="" /></a></figure>
          <div class="project-details d-flex justify-content-center flex-column">
            <div class="post-header">
              <div class="post-category text-line mb-3 text-orange">Product</div>
              <h2 class="post-title h3">Inceptos Euismod Egestas</h2>
            </div>
            <!-- /.post-header -->
          </div>
          <!-- /.project-details -->
        </div>
        <!-- /.project -->
        <div class="project item col-md-6 col-xl-4 product">
          <figure class="lift rounded mb-6"><a href="./single-project.html"> <img src="./assets/img/photos/cs19.jpg" alt="" /></a></figure>
          <div class="project-details d-flex justify-content-center flex-column">
            <div class="post-header">
              <div class="post-category text-line mb-3 text-yellow">Product</div>
              <h2 class="post-title h3">Sollicitudin Ornare Porta</h2>
            </div>
            <!-- /.post-header -->
          </div>
          <!-- /.project-details -->
        </div>
        <!-- /.project -->
        <div class="project item col-md-6 col-xl-4 workshop">
          <figure class="lift rounded mb-6"><a href="./single-project3.html"> <img src="./assets/img/photos/cs21.jpg" alt="" /></a></figure>
          <div class="project-details d-flex justify-content-center flex-column">
            <div class="post-header">
              <div class="post-category text-line mb-3 text-green">Workshop</div>
              <h2 class="post-title h3">Ipsum Mollis Vulputate</h2>
            </div>
            <!-- /.post-header -->
          </div>
          <!-- /.project-details -->
        </div>
        <!-- /.project -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.grid -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 pt-md-16">
    <div class="row align-items-center mb-10">
      <div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
        <h2 class="display-4 mb-3">Latest Projects</h2>
        <p class="lead fs-20 mb-0">Check out some of my latest projects with creative ideas.</p>
      </div>
      <!--/column -->
      <div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
        <a href="#" class="btn btn-primary rounded-pill mb-0">See All Projects</a>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="card bg-soft-violet mb-10">
      <div class="card-body p-12 pb-0">
        <div class="row">
          <div class="col-lg-4 pb-12 align-self-center">
            <div class="post-category mb-3 text-violet">Web Design</div>
            <h3 class="h1 post-title mb-3">Snowlake Theme</h3>
            <p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
            <a href="#" class="more hover link-violet">See Project</a>
          </div>
          <!-- /column -->
          <div class="col-lg-7 offset-lg-1 align-self-end">
            <figure><img class="img-fluid" src="./assets/img/photos/f1.png" srcset="./assets/img/photos/f1@2x.png 2x" alt="" /></figure>
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!--/.card-body -->
    </div>
    <!--/.card -->
    <div class="card bg-soft-blue mb-10">
      <div class="card-body p-12">
        <div class="row gy-10 align-items-center">
          <div class="col-lg-4 order-lg-2 offset-lg-1">
            <div class="post-category mb-3 text-blue">Mobile Design</div>
            <h3 class="h1 post-title mb-3">Budget App</h3>
            <p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
            <a href="#" class="more hover link-blue">See Project</a>
          </div>
          <!-- /column -->
          <div class="col-lg-7">
            <figure><img class="img-fluid" src="./assets/img/photos/f2.png" srcset="./assets/img/photos/f2@2x.png 2x" alt="" /></figure>
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!--/.card-body -->
    </div>
    <!--/.card -->
    <div class="row gx-md-8 gx-xl-10">
      <div class="col-lg-6">
        <div class="card bg-soft-leaf mb-10">
          <div class="card-body p-12 pb-0">
            <div class="post-category mb-3 text-leaf">Web Design</div>
            <h3 class="h1 post-title mb-3">Missio Theme</h3>
            <p>Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.</p>
            <a href="#" class="more hover link-leaf mb-8">See Project</a>
          </div>
          <!--/.card-body -->
          <img class="card-img-bottom" src="./assets/img/photos/f3.png" srcset="./assets/img/photos/f3@2x.png 2x" alt="" />
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
      <div class="col-lg-6">
        <div class="card bg-soft-pink">
          <div class="card-body p-12 pb-0">
            <div class="post-category mb-3 text-pink">Mobile Design</div>
            <h3 class="h1 post-title mb-3">Storage App</h3>
            <p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.</p>
            <a href="#" class="more hover link-pink mb-8">See Project</a>
          </div>
          <!--/.card-body -->
          <img class="card-img-bottom" src="./assets/img/photos/f4.png" srcset="./assets/img/photos/f4@2x.png 2x" alt="" />
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->