<div class="code-wrapper">
                  <div class="code-wrapper-inner">
                    <pre class="language-html"><code>&lt;section class=&quot;wrapper bg-gradient-primary&quot;&gt;
  &lt;div class=&quot;container pt-10 pt-md-14&quot;&gt;
    &lt;div class=&quot;row gx-2 gy-10 align-items-center&quot;&gt;
      &lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
        &lt;h1 class=&quot;display-1 mb-5 mx-md-10 mx-lg-0&quot;&gt;Create a powerful but effortless website for &lt;br /&gt;&lt;span class=&quot;typer text-primary text-nowrap&quot; data-delay=&quot;100&quot; data-words=&quot;your business.,your portfolio.,your startup.,digital marketing.&quot;&gt;&lt;/span&gt;&lt;span class=&quot;cursor text-primary&quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;&lt;/h1&gt;
        &lt;p class=&quot;lead fs-23 mb-7&quot;&gt;Build your website in minutes with the help of countless amazing features of Sandbox.&lt;/p&gt;
        &lt;div class=&quot;d-flex justify-content-center justify-content-lg-start mb-4&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
          &lt;span&gt;&lt;a class=&quot;btn btn-lg btn-primary rounded-pill me-2 scroll&quot; href=&quot;#demos&quot;&gt;Check Demos&lt;/a&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-6 ms-auto position-relative&quot;&gt;
        &lt;div class=&quot;row g-4&quot;&gt;
          &lt;div class=&quot;col-4 d-flex flex-column ms-auto&quot; data-cues=&quot;fadeIn&quot; data-group=&quot;col-start&quot; data-delay=&quot;900&quot;&gt;
            &lt;div class=&quot;ms-auto mt-6&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;/assets/img/demos/vc1.jpg&quot; srcset=&quot;/assets/img/demos/vc1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
            &lt;div class=&quot;ms-auto mt-4&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;/assets/img/demos/vc2.jpg&quot; srcset=&quot;/assets/img/demos/vc2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
            &lt;div class=&quot;ms-auto mt-4&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;/assets/img/demos/vc3.jpg&quot; srcset=&quot;/assets/img/demos/vc3@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /column --&gt;
          &lt;div class=&quot;col-4&quot; data-cues=&quot;fadeIn&quot; data-group=&quot;col-middle&quot;&gt;
            &lt;div&gt;&lt;img class=&quot;w-100 img-fluid rounded shadow-lg&quot; src=&quot;/assets/img/demos/vc4.jpg&quot; srcset=&quot;/assets/img/demos/vc4@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
            &lt;div&gt;&lt;img class=&quot;w-100 img-fluid rounded shadow-lg mt-4&quot; src=&quot;/assets/img/demos/vc5.jpg&quot; srcset=&quot;/assets/img/demos/vc5@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
            &lt;div&gt;&lt;img class=&quot;w-100 img-fluid rounded shadow-lg mt-4&quot; src=&quot;/assets/img/demos/vc6.jpg&quot; srcset=&quot;/assets/img/demos/vc6@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /column --&gt;
          &lt;div class=&quot;col-4 d-flex flex-column&quot; data-cues=&quot;fadeIn&quot; data-group=&quot;col-end&quot; data-delay=&quot;900&quot;&gt;
            &lt;div class=&quot;mt-8&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;/assets/img/demos/vc7.jpg&quot; srcset=&quot;/assets/img/demos/vc7@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
            &lt;div class=&quot;mt-4 mb-10&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;/assets/img/demos/vc8.jpg&quot; srcset=&quot;/assets/img/demos/vc8@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /column --&gt;
        &lt;/div&gt;
        &lt;!-- /.row --&gt;
        &lt;div class=&quot;position-relative mt-n20 mb-20&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;1800&quot;&gt;
          &lt;div class=&quot;btn btn-circle btn-fuchsia pe-none ripple position-absolute counter-wrapper flex-column d-none d-xxl-flex&quot; style=&quot;bottom: 0; right: -8%; width: 120px; height: 120px;&quot;&gt;
            &lt;h3 class=&quot;fs-26 text-white mt-n1 mb-0&quot;&gt;NO&lt;/h3&gt;
            &lt;p&gt;jQuery&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&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>