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