<div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;section class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;container py-14 py-md-16&quot;&gt;
    &lt;div class=&quot;row mb-10&quot;&gt;
      &lt;div class=&quot;col-md-9 col-lg-7 col-xl-6 col-xxl-5 mx-auto&quot;&gt;
        &lt;div class=&quot;counter-wrapper&quot;&gt;
          &lt;h3 class=&quot;fs-70 mb-3 text-primary text-center counter&quot;&gt;21&lt;/h3&gt;
        &lt;/div&gt;
        &lt;h2 class=&quot;display-3 mb-3 text-center mb-0&quot;&gt;Functional, impressive and rich demos to start with&lt;/h2&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
    &lt;div class=&quot;demos-wrapper&quot;&gt;
      &lt;div class=&quot;project mb-10&quot;&gt;
        &lt;div class=&quot;card bg-soft-grape&quot;&gt;
          &lt;div class=&quot;card-body ps-xl-12 py-0 overflow-hidden&quot;&gt;
            &lt;div class=&quot;row gx-md-8 gx-xl-12 d-flex align-items-center&quot;&gt;
              &lt;div class=&quot;col-lg-7&quot;&gt;
                &lt;div class=&quot;row gx-7&quot;&gt;
                  &lt;div class=&quot;col-6&quot;&gt;
                    &lt;figure class=&quot;itooltip itooltip-grape mt-9&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo18.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-top&quot; src=&quot;/assets/img/demos/d18.jpg&quot; srcset=&quot;/assets/img/demos/d18@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
                  &lt;/div&gt;
                  &lt;!-- /column --&gt;
                  &lt;div class=&quot;col-6&quot;&gt;
                    &lt;figure class=&quot;itooltip itooltip-grape&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo18.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-bottom&quot; src=&quot;/assets/img/demos/d18-2.jpg&quot; srcset=&quot;/assets/img/demos/d18-2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
                  &lt;/div&gt;
                  &lt;!-- /column --&gt;
                &lt;/div&gt;
                &lt;!-- /.row --&gt;
              &lt;/div&gt;
              &lt;!-- /column --&gt;
              &lt;div class=&quot;col-lg-5 d-none d-lg-block&quot;&gt;
                &lt;h2 class=&quot;post-title fs-30 mb-4&quot;&gt;Demo Layout XVIII&lt;/h2&gt;
                &lt;ul class=&quot;icon-list bullet-grape row ms-0 gy-2&quot;&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Network, Marketing&lt;/span&gt;&lt;/li&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;SVG icons&lt;/span&gt;&lt;/li&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;3D illustrations&lt;/span&gt;&lt;/li&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Gradient image&lt;/span&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;a href=&quot;./demo18.html&quot; target=&quot;_blank&quot; class=&quot;btn btn-sm btn-grape rounded-pill mt-1&quot;&gt;See Demo&lt;/a&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&gt;
      &lt;!-- /.project --&gt;
      &lt;div class=&quot;project&quot;&gt;
        &lt;div class=&quot;card bg-soft-fuchsia&quot;&gt;
          &lt;div class=&quot;card-body ps-xl-12 py-0 overflow-hidden&quot;&gt;
            &lt;div class=&quot;row gx-md-8 gx-xl-12 d-flex align-items-center&quot;&gt;
              &lt;div class=&quot;col-lg-7&quot;&gt;
                &lt;div class=&quot;row gx-7&quot;&gt;
                  &lt;div class=&quot;col-6&quot;&gt;
                    &lt;figure class=&quot;itooltip itooltip-fuchsia mt-9&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo19.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-top&quot; src=&quot;/assets/img/demos/d19-1.jpg&quot; srcset=&quot;/assets/img/demos/d19-1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
                  &lt;/div&gt;
                  &lt;!-- /column --&gt;
                  &lt;div class=&quot;col-6&quot;&gt;
                    &lt;figure class=&quot;itooltip itooltip-fuchsia&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo19.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-bottom&quot; src=&quot;/assets/img/demos/d19-2.jpg&quot; srcset=&quot;/assets/img/demos/d19-2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
                  &lt;/div&gt;
                  &lt;!-- /column --&gt;
                &lt;/div&gt;
                &lt;!-- /.row --&gt;
              &lt;/div&gt;
              &lt;!-- /column --&gt;
              &lt;div class=&quot;col-lg-5 d-none d-lg-block&quot;&gt;
                &lt;h2 class=&quot;post-title fs-30 mb-4&quot;&gt;Demo Layout XIX&lt;/h2&gt;
                &lt;ul class=&quot;icon-list bullet-fuchsia row ms-0 gy-2&quot;&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Agency, Startup&lt;/span&gt;&lt;/li&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Gradient image&lt;/span&gt;&lt;/li&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;SVG icons&lt;/span&gt;&lt;/li&gt;
                  &lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Colorful design&lt;/span&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;a href=&quot;./demo19.html&quot; target=&quot;_blank&quot; class=&quot;btn btn-sm btn-fuchsia rounded-pill mt-1&quot;&gt;See Demo&lt;/a&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&gt;
      &lt;!-- /.project --&gt;
      &lt;div class=&quot;text-center mt-12&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded-pill&quot;&gt;See All Demos&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.demos-wrapper --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>