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