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