</div>
      <!-- /.container -->
      <div class="container pb-15 pb-md-17">
        <div class="card">
          <div class="card-footer border-0 position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-html-footer-1">View example's HTML code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-html-footer-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-dark text-inverse&quot;&gt;
  &lt;div class=&quot;container py-13 py-md-15&quot;&gt;
    &lt;div class=&quot;row gy-6 gy-lg-0&quot;&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;img class=&quot;mb-4&quot; src=&quot;/assets/img/logo-light.png&quot; srcset=&quot;/assets/img/logo-light@2x.png 2x&quot; alt=&quot;&quot; /&gt;
          &lt;p class=&quot;mb-4&quot;&gt;&copy; 2024 Sandbox. &lt;br class=&quot;d-none d-lg-block&quot; /&gt;All rights reserved.&lt;/p&gt;
          &lt;nav class=&quot;nav social social-white&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/nav&gt;
          &lt;!-- /.social --&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Get in Touch&lt;/h4&gt;
          &lt;address class=&quot;pe-xl-15 pe-xxl-17&quot;&gt;Moonshine St. 14/05 Light City, London, United Kingdom&lt;/address&gt;
          &lt;a href=&quot;mailto:#&quot;&gt;info@email.com&lt;/a&gt;&lt;br /&gt; 00 (123) 456 78 90
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Learn More&lt;/h4&gt;
          &lt;ul class=&quot;list-unstyled  mb-0&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Our Story&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-12 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Our Newsletter&lt;/h4&gt;
          &lt;p class=&quot;mb-5&quot;&gt;Subscribe to our newsletter to get our news &amp; deals delivered to you.&lt;/p&gt;
          &lt;div class=&quot;newsletter-wrapper&quot;&gt;
            &lt;!-- Begin Mailchimp Signup Form --&gt;
            &lt;div id=&quot;mc_embed_signup2&quot;&gt;
              &lt;form action=&quot;https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;amp;id=b49ef47a9a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form2&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate dark-fields&quot; target=&quot;_blank&quot; novalidate&gt;
                &lt;div id=&quot;mc_embed_signup_scroll2&quot;&gt;
                  &lt;div class=&quot;mc-field-group input-group form-floating&quot;&gt;
                    &lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email form-control&quot; placeholder=&quot;Email Address&quot; id=&quot;mce-EMAIL2&quot;&gt;
                    &lt;label for=&quot;mce-EMAIL2&quot;&gt;Email Address&lt;/label&gt;
                    &lt;input type=&quot;submit&quot; value=&quot;Join&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe2&quot; class=&quot;btn btn-primary&quot;&gt;
                  &lt;/div&gt;
                  &lt;div id=&quot;mce-responses2&quot; class=&quot;clear&quot;&gt;
                    &lt;div class=&quot;response&quot; id=&quot;mce-error-response2&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;response&quot; id=&quot;mce-success-response2&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt; &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt;
                  &lt;div style=&quot;position: absolute; left: -5000px;&quot; aria-hidden=&quot;true&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_ddc180777a163e0f9f66ee014_4b1bcfa0bc&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;!--End mc_embed_signup--&gt;
          &lt;/div&gt;
          &lt;!-- /.newsletter-wrapper --&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
          <div class="card-footer position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-gulp-footer-1">View example's Gulp code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-gulp-footer-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-dark text-inverse&quot;&gt;
  &lt;div class=&quot;container py-13 py-md-15&quot;&gt;
    @@include(&apos;_footer-widgets.html&apos;, {
      &quot;lightText&quot;: true
    })
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
        </div>
        <!--/.card -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    <section id="snippet-2" class="wrapper bg-light wrapper-border">
      <div class="container-fluid pt-15 pt-md-17 pb-13 pb-md-15 px-xxl-10">
        <div class="mt-14"></div>
        <footer class="bg-soft-primary">
          <div class="container">
            <div class="row">
              <div class="col-xl-11 col-xxl-10 mx-auto">
                <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 mt-n50p mb-n5" data-image-src="/assets/img/photos/bg3.jpg">
                  <div class="card-body p-6 p-md-11 d-lg-flex flex-row align-items-lg-center justify-content-md-between text-center text-lg-start">
                    <h3 class="display-6 mb-6 mb-lg-0 pe-lg-15 pe-xxl-18 text-white">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</h3>
                    <a href="#" class="btn btn-white rounded-pill mb-0 text-nowrap">Join Us</a>
                  </div>
                  <!--/.card-body -->
                </div>
                <!--/.card -->
              </div>
              <!-- /column -->
            </div>
            <!-- /.row -->
          </div>
          <div class="container pb-12 text-center">
            <div class="row mt-n10 mt-lg-0">
              <div class="col-xl-10 mx-auto">
                <div class="row mb-3">
                  <div class="col-md-4">
                    <div class="widget">
                      <h4 class="widget-title">Address</h4>
                      <address>Moonshine St. 14/05 <br class="d-none d-md-block" /> Light City, London, UK</address>
                    </div>
                    <!-- /.widget -->
                  </div>
                  <!--/column -->
                  <div class="col-md-4">
                    <div class="widget">
                      <h4 class="widget-title">Phone</h4>
                      <p>00 (123) 456 78 90 <br />00 (987) 654 32 10</p>
                    </div>
                    <!-- /.widget -->
                  </div>
                  <!--/column -->
                  <div class="col-md-4">
                    <div class="widget">
                      <h4 class="widget-title">E-mail</h4>
                      <p><a href="mailto:sandbox@email.com" class="link-body">sandbox@email.com</a> <br class="d-none d-md-block" /><a href="mailto:help@sandbox.com" class="link-body">help@sandbox.com</a></p>
                    </div>
                    <!-- /.widget -->
                  </div>
                  <!--/column -->
                </div>
                <!--/.row -->
                <p>© <script>
                    document.write(new Date().getUTCFullYear());
                  </script> Sandbox. All rights reserved.</p>
                <nav class="nav social justify-content-center">
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                  <a href="#"><i class="uil uil-instagram"></i></a>
                  <a href="#"><i class="uil uil-youtube"></i></a>
                </nav>
                <!-- /.social -->
              </div>
              <!-- /column -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.container -->
        </footer>
      </div>
      <!-- /.container -->
      <div class="container pb-15 pb-md-17">
        <div class="card">
          <div class="card-footer border-0 position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-html-footer-2">View example's HTML code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-html-footer-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-soft-primary&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-xl-11 col-xxl-10 mx-auto&quot;&gt;
        &lt;div class=&quot;card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 mt-n50p mb-n5&quot; data-image-src=&quot;/assets/img/photos/bg3.jpg&quot;&gt;
          &lt;div class=&quot;card-body p-6 p-md-11 d-lg-flex flex-row align-items-lg-center justify-content-md-between text-center text-lg-start&quot;&gt;
            &lt;h3 class=&quot;display-6 mb-6 mb-lg-0 pe-lg-15 pe-xxl-18 text-white&quot;&gt;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/h3&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-white rounded-pill mb-0 text-nowrap&quot;&gt;Join Us&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--/.card-body --&gt;
        &lt;/div&gt;
        &lt;!--/.card --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  &lt;/div&gt;
  &lt;div class=&quot;container pb-12 text-center&quot;&gt;
    &lt;div class=&quot;row mt-n10 mt-lg-0&quot;&gt;
      &lt;div class=&quot;col-xl-10 mx-auto&quot;&gt;
        &lt;div class=&quot;row mb-3&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
            &lt;div class=&quot;widget&quot;&gt;
              &lt;h4 class=&quot;widget-title&quot;&gt;Address&lt;/h4&gt;
              &lt;address&gt;Moonshine St. 14/05 &lt;br class=&quot;d-none d-md-block&quot; /&gt; Light City, London, UK&lt;/address&gt;
            &lt;/div&gt;
            &lt;!-- /.widget --&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
            &lt;div class=&quot;widget&quot;&gt;
              &lt;h4 class=&quot;widget-title&quot;&gt;Phone&lt;/h4&gt;
              &lt;p&gt;00 (123) 456 78 90 &lt;br /&gt;00 (987) 654 32 10&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- /.widget --&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
            &lt;div class=&quot;widget&quot;&gt;
              &lt;h4 class=&quot;widget-title&quot;&gt;E-mail&lt;/h4&gt;
              &lt;p&gt;&lt;a href=&quot;mailto:sandbox@email.com&quot; class=&quot;link-body&quot;&gt;sandbox@email.com&lt;/a&gt; &lt;br class=&quot;d-none d-md-block&quot; /&gt;&lt;a href=&quot;mailto:help@sandbox.com&quot; class=&quot;link-body&quot;&gt;help@sandbox.com&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- /.widget --&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
        &lt;/div&gt;
        &lt;!--/.row --&gt;
        &lt;p&gt;&copy; 2024 Sandbox. All rights reserved.&lt;/p&gt;
        &lt;nav class=&quot;nav social justify-content-center&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/nav&gt;
        &lt;!-- /.social --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
          <div class="card-footer position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-gulp-footer-2">View example's Gulp code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-gulp-footer-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-soft-primary&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-xl-11 col-xxl-10 mx-auto&quot;&gt;
        &lt;div class=&quot;card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 mt-n50p mb-n5&quot; data-image-src=&quot;/assets/img/photos/bg3.jpg&quot;&gt;
          &lt;div class=&quot;card-body p-6 p-md-11 d-lg-flex flex-row align-items-lg-center justify-content-md-between text-center text-lg-start&quot;&gt;
            &lt;h3 class=&quot;display-6 mb-6 mb-lg-0 pe-lg-15 pe-xxl-18 text-white&quot;&gt;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/h3&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn btn-white rounded-pill mb-0 text-nowrap&quot;&gt;Join Us&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--/.card-body --&gt;
        &lt;/div&gt;
        &lt;!--/.card --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  &lt;/div&gt;
  @@include(&apos;_footer2-widgets.html&apos;)
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
        </div>
        <!--/.card -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    <section id="snippet-3" class="wrapper bg-light wrapper-border">
      <div class="container-fluid pt-15 pt-md-17 pb-13 pb-md-15 px-xxl-10">
        <footer class="bg-dark text-inverse">
          <div class="container pt-13 pt-md-15 pb-7">
            <div class="row gy-6 gy-lg-0">
              <div class="col-lg-4">
                <div class="widget">
                  <h3 class="h2 mb-3 text-white">Join the Community</h3>
                  <p class="lead mb-5">Let's make something great together. We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
                  <a href="#" class="btn btn-white  rounded-pill">Join Us</a>
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-2 offset-lg-2">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Need Help?</h4>
                  <ul class="list-unstyled text-reset mb-0">
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Get Started</a></li>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                  </ul>
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-2">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Learn More</h4>
                  <ul class="list-unstyled  mb-0">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Our Story</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Features</a></li>
                  </ul>
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-2">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Get in Touch</h4>
                  <address>Moonshine St. 14/05 Light City, London, United Kingdom</address>
                  <a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
            </div>
            <!--/.row -->
            <hr class="mt-13 mt-md-15 mb-7" />
            <div class="d-md-flex align-items-center justify-content-between">
              <p class="mb-2 mb-lg-0">© <script>
                  document.write(new Date().getUTCFullYear());
                </script> Sandbox. All rights reserved.</p>
              <nav class="nav social social-white text-md-end">
                <a href="#"><i class="uil uil-twitter"></i></a>
                <a href="#"><i class="uil uil-facebook-f"></i></a>
                <a href="#"><i class="uil uil-dribbble"></i></a>
                <a href="#"><i class="uil uil-instagram"></i></a>
                <a href="#"><i class="uil uil-youtube"></i></a>
              </nav>
              <!-- /.social -->
            </div>
            <!-- /div -->
          </div>
          <!-- /.container -->
        </footer>
      </div>
      <!-- /.container -->
      <div class="container pb-15 pb-md-17">
        <div class="card">
          <div class="card-footer border-0 position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-html-footer-3">View example's HTML code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-html-footer-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-dark text-inverse&quot;&gt;
  &lt;div class=&quot;container pt-13 pt-md-15 pb-7&quot;&gt;
    &lt;div class=&quot;row gy-6 gy-lg-0&quot;&gt;
      &lt;div class=&quot;col-lg-4&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h3 class=&quot;h2 mb-3 text-white&quot;&gt;Join the Community&lt;/h3&gt;
          &lt;p class=&quot;lead mb-5&quot;&gt;Let&apos;s make something great together. We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/p&gt;
          &lt;a href=&quot;#&quot; class=&quot;btn btn-white  rounded-pill&quot;&gt;Join Us&lt;/a&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-2 offset-lg-2&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Need Help?&lt;/h4&gt;
          &lt;ul class=&quot;list-unstyled text-reset mb-0&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Support&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Get Started&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-2&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Learn More&lt;/h4&gt;
          &lt;ul class=&quot;list-unstyled  mb-0&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Our Story&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Features&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-2&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Get in Touch&lt;/h4&gt;
          &lt;address&gt;Moonshine St. 14/05 Light City, London, United Kingdom&lt;/address&gt;
          &lt;a href=&quot;mailto:first.last@email.com&quot;&gt;info@email.com&lt;/a&gt;&lt;br /&gt; 00 (123) 456 78 90
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
    &lt;hr class=&quot;mt-13 mt-md-15 mb-7&quot; /&gt;
    &lt;div class=&quot;d-md-flex align-items-center justify-content-between&quot;&gt;
      &lt;p class=&quot;mb-2 mb-lg-0&quot;&gt;&copy; 2024 Sandbox. All rights reserved.&lt;/p&gt;
      &lt;nav class=&quot;nav social social-white text-md-end&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/nav&gt;
      &lt;!-- /.social --&gt;
    &lt;/div&gt;
    &lt;!-- /div --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
          <div class="card-footer position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-gulp-footer-3">View example's Gulp code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-gulp-footer-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-dark text-inverse&quot;&gt;
  &lt;div class=&quot;container pt-13 pt-md-15 pb-7&quot;&gt;
    @@include(&apos;_footer3-widgets.html&apos;, {
      &quot;lightText&quot;: true
    })
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
        </div>
        <!--/.card -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    <section id="snippet-4" class="wrapper bg-light wrapper-border">
      <div class="container-fluid pt-15 pt-md-17 pb-13 pb-md-15 px-xxl-10">
        <footer>
          <div class="container pb-7">
            <div class="row gx-lg-0 gy-6">
              <div class="col-lg-4">
                <div class="widget">
                  <img class="mb-4" src="/assets/img/logo.png" srcset="/assets/img/logo@2x.png 2x" alt="" />
                  <p class="lead mb-0">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-lg-3 offset-lg-2">
                <div class="widget">
                  <div class="d-flex flex-row">
                    <div>
                      <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-phone-volume"></i> </div>
                    </div>
                    <div>
                      <h5 class="mb-1">Phone</h5>
                      <p class="mb-0">00 (123) 456 78 90 <br />00 (987) 654 32 10</p>
                    </div>
                  </div>
                  <!--/div -->
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-lg-3">
                <div class="widget">
                  <div class="d-flex flex-row">
                    <div>
                      <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-location-pin-alt"></i> </div>
                    </div>
                    <div class="align-self-start justify-content-start">
                      <h5 class="mb-1">Address</h5>
                      <address>Moonshine St. 14/05 Light City, London, United Kingdom</address>
                    </div>
                  </div>
                  <!--/div -->
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
            </div>
            <!--/.row -->
            <hr class="mt-13 mt-md-14 mb-7" />
            <div class="d-md-flex align-items-center justify-content-between">
              <p class="mb-2 mb-lg-0">© <script>
                  document.write(new Date().getUTCFullYear());
                </script> Sandbox. All rights reserved.</p>
              <nav class="nav social social-muted mb-0 text-md-end">
                <a href="#"><i class="uil uil-twitter"></i></a>
                <a href="#"><i class="uil uil-facebook-f"></i></a>
                <a href="#"><i class="uil uil-dribbble"></i></a>
                <a href="#"><i class="uil uil-instagram"></i></a>
                <a href="#"><i class="uil uil-youtube"></i></a>
              </nav>
              <!-- /.social -->
            </div>
          </div>
          <!-- /.container -->
        </footer>
      </div>
      <!-- /.container -->
      <div class="container pb-15 pb-md-17">
        <div class="card">
          <div class="card-footer border-0 position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-html-footer-4">View example's HTML code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-html-footer-4" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer&gt;
  &lt;div class=&quot;container pb-7&quot;&gt;
    &lt;div class=&quot;row gx-lg-0 gy-6&quot;&gt;
      &lt;div class=&quot;col-lg-4&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;img class=&quot;mb-4&quot; src=&quot;/assets/img/logo.png&quot; srcset=&quot;/assets/img/logo@2x.png 2x&quot; alt=&quot;&quot; /&gt;
          &lt;p class=&quot;lead mb-0&quot;&gt;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-3 offset-lg-2&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;div class=&quot;d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;div class=&quot;icon text-primary fs-28 me-4 mt-n1&quot;&gt; &lt;i class=&quot;uil uil-phone-volume&quot;&gt;&lt;/i&gt; &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h5 class=&quot;mb-1&quot;&gt;Phone&lt;/h5&gt;
              &lt;p class=&quot;mb-0&quot;&gt;00 (123) 456 78 90 &lt;br /&gt;00 (987) 654 32 10&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--/div --&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;div class=&quot;d-flex flex-row&quot;&gt;
            &lt;div&gt;
              &lt;div class=&quot;icon text-primary fs-28 me-4 mt-n1&quot;&gt; &lt;i class=&quot;uil uil-location-pin-alt&quot;&gt;&lt;/i&gt; &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;align-self-start justify-content-start&quot;&gt;
              &lt;h5 class=&quot;mb-1&quot;&gt;Address&lt;/h5&gt;
              &lt;address&gt;Moonshine St. 14/05 Light City, London, United Kingdom&lt;/address&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--/div --&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
    &lt;hr class=&quot;mt-13 mt-md-14 mb-7&quot; /&gt;
    &lt;div class=&quot;d-md-flex align-items-center justify-content-between&quot;&gt;
      &lt;p class=&quot;mb-2 mb-lg-0&quot;&gt;&copy; 2024 Sandbox. All rights reserved.&lt;/p&gt;
      &lt;nav class=&quot;nav social social-muted mb-0 text-md-end&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/nav&gt;
      &lt;!-- /.social --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
          <div class="card-footer position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-gulp-footer-4">View example's Gulp code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-gulp-footer-4" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer&gt;
  &lt;div class=&quot;container pb-7&quot;&gt;
    @@include(&apos;_footer4-widgets.html&apos;)
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
        </div>
        <!--/.card -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    <section id="snippet-5" class="wrapper bg-light wrapper-border">
      <div class="container-fluid pt-15 pt-md-17 pb-13 pb-md-15 px-xxl-10">
        <footer class="bg-navy text-inverse">
          <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
            <div class="d-lg-flex flex-row align-items-lg-center">
              <h3 class="display-4 mb-6 mb-lg-0 pe-lg-20 pe-xl-22 pe-xxl-25 text-white">Join our community by using our services and grow your business.</h3>
              <a href="#" class="btn btn-primary rounded-pill mb-0 text-nowrap">Try It For Free</a>
            </div>
            <!--/div -->
            <hr class="mt-11 mb-12" />
            <div class="row gy-6 gy-lg-0">
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <img class="mb-4" src="/assets/img/logo-light.png" srcset="/assets/img/logo-light@2x.png 2x" alt="" />
                  <p class="mb-4">© <script>
                      document.write(new Date().getUTCFullYear());
                    </script> Sandbox. <br class="d-none d-lg-block" />All rights reserved.</p>
                  <nav class="nav social social-white">
                    <a href="#"><i class="uil uil-twitter"></i></a>
                    <a href="#"><i class="uil uil-facebook-f"></i></a>
                    <a href="#"><i class="uil uil-dribbble"></i></a>
                    <a href="#"><i class="uil uil-instagram"></i></a>
                    <a href="#"><i class="uil uil-youtube"></i></a>
                  </nav>
                  <!-- /.social -->
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Get in Touch</h4>
                  <address class="pe-xl-15 pe-xxl-17">Moonshine St. 14/05 Light City, London, United Kingdom</address>
                  <a href="mailto:#">info@email.com</a><br /> 00 (123) 456 78 90
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Learn More</h4>
                  <ul class="list-unstyled  mb-0">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Our Story</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                  </ul>
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-12 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Our Newsletter</h4>
                  <p class="mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
                  <div class="newsletter-wrapper">
                    <!-- Begin Mailchimp Signup Form -->
                    <div id="mc_embed_signup2">
                      <form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
                        <div id="mc_embed_signup_scroll2">
                          <div class="mc-field-group input-group form-floating">
                            <input type="email" value="" name="EMAIL" class="required email form-control" placeholder="Email Address" id="mce-EMAIL2">
                            <label for="mce-EMAIL2">Email Address</label>
                            <input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary ">
                          </div>
                          <div id="mce-responses2" class="clear">
                            <div class="response" id="mce-error-response2" style="display:none"></div>
                            <div class="response" id="mce-success-response2" style="display:none"></div>
                          </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
                          <div class="clear"></div>
                        </div>
                      </form>
                    </div>
                    <!--End mc_embed_signup-->
                  </div>
                  <!-- /.newsletter-wrapper -->
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
            </div>
            <!--/.row -->
          </div>
          <!-- /.container -->
        </footer>
      </div>
      <!-- /.container -->
      <div class="container pb-15 pb-md-17">
        <div class="card">
          <div class="card-footer border-0 position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-html-footer-5">View example's HTML code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-html-footer-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-navy text-inverse&quot;&gt;
  &lt;div class=&quot;container pt-15 pt-md-17 pb-13 pb-md-15&quot;&gt;
    &lt;div class=&quot;d-lg-flex flex-row align-items-lg-center&quot;&gt;
      &lt;h3 class=&quot;display-4 mb-6 mb-lg-0 pe-lg-20 pe-xl-22 pe-xxl-25 text-white&quot;&gt;Join our community by using our services and grow your business.&lt;/h3&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded-pill mb-0 text-nowrap&quot;&gt;Try It For Free&lt;/a&gt;
    &lt;/div&gt;
    &lt;!--/div --&gt;
    &lt;hr class=&quot;mt-11 mb-12&quot; /&gt;
    &lt;div class=&quot;row gy-6 gy-lg-0&quot;&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;img class=&quot;mb-4&quot; src=&quot;/assets/img/logo-light.png&quot; srcset=&quot;/assets/img/logo-light@2x.png 2x&quot; alt=&quot;&quot; /&gt;
          &lt;p class=&quot;mb-4&quot;&gt;&copy; 2024 Sandbox. &lt;br class=&quot;d-none d-lg-block&quot; /&gt;All rights reserved.&lt;/p&gt;
          &lt;nav class=&quot;nav social social-white&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/nav&gt;
          &lt;!-- /.social --&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Get in Touch&lt;/h4&gt;
          &lt;address class=&quot;pe-xl-15 pe-xxl-17&quot;&gt;Moonshine St. 14/05 Light City, London, United Kingdom&lt;/address&gt;
          &lt;a href=&quot;mailto:#&quot;&gt;info@email.com&lt;/a&gt;&lt;br /&gt; 00 (123) 456 78 90
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Learn More&lt;/h4&gt;
          &lt;ul class=&quot;list-unstyled  mb-0&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Our Story&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-12 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Our Newsletter&lt;/h4&gt;
          &lt;p class=&quot;mb-5&quot;&gt;Subscribe to our newsletter to get our news &amp; deals delivered to you.&lt;/p&gt;
          &lt;div class=&quot;newsletter-wrapper&quot;&gt;
            &lt;!-- Begin Mailchimp Signup Form --&gt;
            &lt;div id=&quot;mc_embed_signup2&quot;&gt;
              &lt;form action=&quot;https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&amp;amp;id=b49ef47a9a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form2&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate dark-fields&quot; target=&quot;_blank&quot; novalidate&gt;
                &lt;div id=&quot;mc_embed_signup_scroll2&quot;&gt;
                  &lt;div class=&quot;mc-field-group input-group form-floating&quot;&gt;
                    &lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email form-control&quot; placeholder=&quot;Email Address&quot; id=&quot;mce-EMAIL2&quot;&gt;
                    &lt;label for=&quot;mce-EMAIL2&quot;&gt;Email Address&lt;/label&gt;
                    &lt;input type=&quot;submit&quot; value=&quot;Join&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe2&quot; class=&quot;btn btn-primary&quot;&gt;
                  &lt;/div&gt;
                  &lt;div id=&quot;mce-responses2&quot; class=&quot;clear&quot;&gt;
                    &lt;div class=&quot;response&quot; id=&quot;mce-error-response2&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;response&quot; id=&quot;mce-success-response2&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt; &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt;
                  &lt;div style=&quot;position: absolute; left: -5000px;&quot; aria-hidden=&quot;true&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_ddc180777a163e0f9f66ee014_4b1bcfa0bc&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;!--End mc_embed_signup--&gt;
          &lt;/div&gt;
          &lt;!-- /.newsletter-wrapper --&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
          <div class="card-footer position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-gulp-footer-5">View example's Gulp code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-gulp-footer-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-navy text-inverse&quot;&gt;
  &lt;div class=&quot;container pt-15 pt-md-17 pb-13 pb-md-15&quot;&gt;
    &lt;div class=&quot;d-lg-flex flex-row align-items-lg-center&quot;&gt;
      &lt;h3 class=&quot;display-4 mb-6 mb-lg-0 pe-lg-20 pe-xl-22 pe-xxl-25 text-white&quot;&gt;Join our community by using our services and grow your business.&lt;/h3&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded-pill mb-0 text-nowrap&quot;&gt;Try It For Free&lt;/a&gt;
    &lt;/div&gt;
    &lt;!--/div --&gt;
    &lt;hr class=&quot;mt-11 mb-12&quot; /&gt;
    @@include(&apos;_footer-widgets.html&apos;, {
      &quot;lightText&quot;: true
    })
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
        </div>
        <!--/.card -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    <section id="snippet-6" class="wrapper bg-light wrapper-border">
      <div class="container-fluid pt-15 pt-md-17 pb-13 pb-md-15 px-xxl-10">
        <footer>
          <div class="container pb-7">
            <div class="d-md-flex align-items-center justify-content-between">
              <p class="mb-2 mb-lg-0">© <script>
                  document.write(new Date().getUTCFullYear());
                </script> Sandbox. All rights reserved.</p>
              <nav class="nav social social-muted mb-0 text-md-end">
                <a href="#"><i class="uil uil-twitter"></i></a>
                <a href="#"><i class="uil uil-facebook-f"></i></a>
                <a href="#"><i class="uil uil-dribbble"></i></a>
                <a href="#"><i class="uil uil-instagram"></i></a>
                <a href="#"><i class="uil uil-youtube"></i></a>
              </nav>
              <!-- /.social -->
            </div>
          </div>
          <!-- /.container -->
        </footer>
      </div>
      <!-- /.container -->
      <div class="container pb-15 pb-md-17">
        <div class="card">
          <div class="card-footer border-0 position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-html-footer-6">View example's HTML code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-html-footer-6" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer&gt;
  &lt;div class=&quot;container pb-7&quot;&gt;
    &lt;div class=&quot;d-md-flex align-items-center justify-content-between&quot;&gt;
      &lt;p class=&quot;mb-2 mb-lg-0&quot;&gt;&copy; 2024 Sandbox. All rights reserved.&lt;/p&gt;
      &lt;nav class=&quot;nav social social-muted mb-0 text-md-end&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/nav&gt;
      &lt;!-- /.social --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
          <div class="card-footer position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-gulp-footer-6">View example's Gulp code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-gulp-footer-6" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer&gt;
  &lt;div class=&quot;container pb-7&quot;&gt;
    @@include(&apos;_footer6-widgets.html&apos;)
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
        </div>
        <!--/.card -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
    <section id="snippet-7" class="wrapper bg-light wrapper-border">
      <div class="container-fluid pt-15 pt-md-17 pb-13 pb-md-15 px-xxl-10">
        <footer class="bg-dark text-inverse">
          <div class="container py-13 py-md-15">
            <div class="row gy-6 gy-lg-0">
              <div class="col-md-4 col-lg-3">
                <h4 class="widget-title text-white mb-3">Popular Posts</h4>
                <ul class="image-list">
                  <li>
                    <figure class="rounded"><a href="/blog-post.html"><img src="/assets/img/photos/a4.jpg" alt="" /></a></figure>
                    <div class="post-content">
                      <h6 class="mb-2"> <a class="link-dark" href="/blog-post.html">Magna Mollis Ultricies</a> </h6>
                      <ul class="post-meta">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Mar 2022</span></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                  </li>
                  <li class="mt-5">
                    <figure class="rounded"> <a href="/blog-post.html"><img src="/assets/img/photos/a5.jpg" alt="" /></a></figure>
                    <div class="post-content">
                      <h6 class="mb-2"> <a class="link-dark" href="/blog-post.html">Ornare Nullam Risus</a> </h6>
                      <ul class="post-meta">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>16 Feb 2022</span></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                  </li>
                  <li class="mt-5">
                    <figure class="rounded"><a href="/blog-post.html"><img src="/assets/img/photos/a6.jpg" alt="" /></a></figure>
                    <div class="post-content">
                      <h6 class="mb-2"> <a class="link-dark" href="/blog-post.html">Euismod Nullam Fusce</a> </h6>
                      <ul class="post-meta">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>8 Jan 2022</span></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                  </li>
                </ul>
                <!-- /.image-list -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Tags</h4>
                  <ul class="list-unstyled tag-list">
                    <li><a href="#" class="btn btn-soft-ash text-white  btn-sm rounded-pill">Still Life</a></li>
                    <li><a href="#" class="btn btn-soft-ash text-white  btn-sm rounded-pill">Urban</a></li>
                    <li><a href="#" class="btn btn-soft-ash text-white  btn-sm rounded-pill">Nature</a></li>
                    <li><a href="#" class="btn btn-soft-ash text-white  btn-sm rounded-pill">Landscape</a></li>
                  </ul>
                </div>
                <!-- /.widget -->
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Categories</h4>
                  <ul class="unordered-list text-reset bullet-white ">
                    <li><a href="#">Lifestyle (21)</a></li>
                    <li><a href="#">Photography (19)</a></li>
                    <li><a href="#">Journal (16)</a></li>
                  </ul>
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Get in Touch</h4>
                  <address class="pe-xl-15 pe-xxl-17">Moonshine St. 14/05 Light City, London, United Kingdom</address>
                  <a href="mailto:#">info@email.com</a><br /> 00 (123) 456 78 90
                </div>
                <!-- /.widget -->
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Elsewhere</h4>
                  <nav class="nav social social-white">
                    <a href="#"><i class="uil uil-twitter"></i></a>
                    <a href="#"><i class="uil uil-facebook-f"></i></a>
                    <a href="#"><i class="uil uil-dribbble"></i></a>
                    <a href="#"><i class="uil uil-instagram"></i></a>
                    <a href="#"><i class="uil uil-youtube"></i></a>
                  </nav>
                  <!-- /.social -->
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
              <div class="col-md-4 col-lg-3">
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Learn More</h4>
                  <ul class="list-unstyled text-reset mb-0">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Our Story</a></li>
                    <li><a href="#">Projects</a></li>
                  </ul>
                </div>
                <!-- /.widget -->
                <div class="widget">
                  <h4 class="widget-title text-white mb-3">Need Help?</h4>
                  <ul class="list-unstyled text-reset mb-0">
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Get Started</a></li>
                    <li><a href="#">Contact Us</a></li>
                  </ul>
                </div>
                <!-- /.widget -->
              </div>
              <!-- /column -->
            </div>
            <!--/.row -->
            <p class="mt-6 mb-0 text-center">© <script>
                document.write(new Date().getUTCFullYear());
              </script> Sandbox. All rights reserved.</p>
          </div>
          <!-- /.container -->
        </footer>
      </div>
      <!-- /.container -->
      <div class="container pb-15 pb-md-17">
        <div class="card">
          <div class="card-footer border-0 position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-html-footer-7">View example's HTML code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-html-footer-7" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-dark text-inverse&quot;&gt;
  &lt;div class=&quot;container py-13 py-md-15&quot;&gt;
    &lt;div class=&quot;row gy-6 gy-lg-0&quot;&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Popular Posts&lt;/h4&gt;
        &lt;ul class=&quot;image-list&quot;&gt;
          &lt;li&gt;
            &lt;figure class=&quot;rounded&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;&lt;img src=&quot;/assets/img/photos/a4.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;div class=&quot;post-content&quot;&gt;
              &lt;h6 class=&quot;mb-2&quot;&gt; &lt;a class=&quot;link-dark&quot; href=&quot;./blog-post.html&quot;&gt;Magna Mollis Ultricies&lt;/a&gt; &lt;/h6&gt;
              &lt;ul class=&quot;post-meta&quot;&gt;
                &lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;26 Mar 2022&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- /.post-meta --&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;mt-5&quot;&gt;
            &lt;figure class=&quot;rounded&quot;&gt; &lt;a href=&quot;./blog-post.html&quot;&gt;&lt;img src=&quot;/assets/img/photos/a5.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;div class=&quot;post-content&quot;&gt;
              &lt;h6 class=&quot;mb-2&quot;&gt; &lt;a class=&quot;link-dark&quot; href=&quot;./blog-post.html&quot;&gt;Ornare Nullam Risus&lt;/a&gt; &lt;/h6&gt;
              &lt;ul class=&quot;post-meta&quot;&gt;
                &lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;16 Feb 2022&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- /.post-meta --&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;mt-5&quot;&gt;
            &lt;figure class=&quot;rounded&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;&lt;img src=&quot;/assets/img/photos/a6.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;
            &lt;div class=&quot;post-content&quot;&gt;
              &lt;h6 class=&quot;mb-2&quot;&gt; &lt;a class=&quot;link-dark&quot; href=&quot;./blog-post.html&quot;&gt;Euismod Nullam Fusce&lt;/a&gt; &lt;/h6&gt;
              &lt;ul class=&quot;post-meta&quot;&gt;
                &lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;8 Jan 2022&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- /.post-meta --&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;!-- /.image-list --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Tags&lt;/h4&gt;
          &lt;ul class=&quot;list-unstyled tag-list&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-soft-ash text-white  btn-sm rounded-pill&quot;&gt;Still Life&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-soft-ash text-white  btn-sm rounded-pill&quot;&gt;Urban&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-soft-ash text-white  btn-sm rounded-pill&quot;&gt;Nature&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-soft-ash text-white  btn-sm rounded-pill&quot;&gt;Landscape&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Categories&lt;/h4&gt;
          &lt;ul class=&quot;unordered-list text-reset bullet-white &quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lifestyle (21)&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Photography (19)&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Journal (16)&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Get in Touch&lt;/h4&gt;
          &lt;address class=&quot;pe-xl-15 pe-xxl-17&quot;&gt;Moonshine St. 14/05 Light City, London, United Kingdom&lt;/address&gt;
          &lt;a href=&quot;mailto:#&quot;&gt;info@email.com&lt;/a&gt;&lt;br&gt; 00 (123) 456 78 90
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Elsewhere&lt;/h4&gt;
          &lt;nav class=&quot;nav social social-white&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/nav&gt;
          &lt;!-- /.social --&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Learn More&lt;/h4&gt;
          &lt;ul class=&quot;list-unstyled text-reset mb-0&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Our Story&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
        &lt;div class=&quot;widget&quot;&gt;
          &lt;h4 class=&quot;widget-title text-white mb-3&quot;&gt;Need Help?&lt;/h4&gt;
          &lt;ul class=&quot;list-unstyled text-reset mb-0&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Support&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Get Started&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.widget --&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!--/.row --&gt;
    &lt;p class=&quot;mt-6 mb-0 text-center&quot;&gt;&copy; 2024 Sandbox. All rights reserved.&lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
          <div class="card-footer position-relative">
            <a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-gulp-footer-7">View example's Gulp code</a>
          </div>
          <!--/.card-footer -->
          <div id="collapse-gulp-footer-7" class="card-footer bg-dark p-0 accordion-collapse collapse">
            <div class="code-wrapper">
              <div class="code-wrapper-inner">
                <pre class="language-html"><code>&lt;footer class=&quot;bg-dark text-inverse&quot;&gt;
  &lt;div class=&quot;container py-13 py-md-15&quot;&gt;
    @@include(&apos;_footer7-widgets.html&apos;, {
      &quot;lightText&quot;: true
    })
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/footer&gt;</code></pre>
              </div>
              <!--/.code-wrapper-inner -->
            </div>
            <!--/.code-wrapper -->
          </div>
          <!--/.card-footer -->
        </div>
        <!--/.card -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
  </div>
  <!-- /.content-wrapper -->
  <section class="wrapper bg-dark text-white">
    <div class="container pt-14 pt-md-16 text-center">
      <div class="row">
        <div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
          <h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
          <p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
          <a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <img class="img-fluid" src="/assets/img/demos/f1.png" srcset="/assets/img/demos/f1@2x.png 2x" alt="" />
    </div>
    <!-- /.container -->
  </section>
  <!-- /section -->
  <div class="progress-wrap">
    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
      <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
    </svg>
  </div>
  <script src="/assets/js/plugins.js"></script>
  <script src="/assets/js/theme.js"></script>
</body>