<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-xl-10 mx-auto&quot;&gt;
        &lt;div class=&quot;row gy-10 gx-lg-8 gx-xl-12&quot;&gt;
          &lt;div class=&quot;col-lg-8&quot;&gt;
            &lt;form class=&quot;contact-form needs-validation&quot; method=&quot;post&quot; action=&quot;/assets/php/contact.php&quot; novalidate&gt;
              &lt;div class=&quot;messages&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;row gx-4&quot;&gt;
                &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;div class=&quot;form-floating mb-4&quot;&gt;
                    &lt;input id=&quot;form_name&quot; type=&quot;text&quot; name=&quot;name&quot; class=&quot;form-control&quot; placeholder=&quot;Jane&quot; required&gt;
                    &lt;label for=&quot;form_name&quot;&gt;First Name *&lt;/label&gt;
                    &lt;div class=&quot;valid-feedback&quot;&gt;
                      Looks good!
                    &lt;/div&gt;
                    &lt;div class=&quot;invalid-feedback&quot;&gt;
                      Please enter your first name.
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /column --&gt;
                &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;div class=&quot;form-floating mb-4&quot;&gt;
                    &lt;input id=&quot;form_lastname&quot; type=&quot;text&quot; name=&quot;surname&quot; class=&quot;form-control&quot; placeholder=&quot;Doe&quot; required&gt;
                    &lt;label for=&quot;form_lastname&quot;&gt;Last Name *&lt;/label&gt;
                    &lt;div class=&quot;valid-feedback&quot;&gt;
                      Looks good!
                    &lt;/div&gt;
                    &lt;div class=&quot;invalid-feedback&quot;&gt;
                      Please enter your last name.
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /column --&gt;
                &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;div class=&quot;form-floating mb-4&quot;&gt;
                    &lt;input id=&quot;form_email&quot; type=&quot;email&quot; name=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;jane.doe@example.com&quot; required&gt;
                    &lt;label for=&quot;form_email&quot;&gt;Email *&lt;/label&gt;
                    &lt;div class=&quot;valid-feedback&quot;&gt;
                      Looks good!
                    &lt;/div&gt;
                    &lt;div class=&quot;invalid-feedback&quot;&gt;
                      Please provide a valid email address.
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /column --&gt;
                &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;div class=&quot;form-select-wrapper mb-4&quot;&gt;
                    &lt;select class=&quot;form-select&quot; id=&quot;form-select&quot; name=&quot;department&quot; required&gt;
                      &lt;option selected disabled value=&quot;&quot;&gt;Select a department&lt;/option&gt;
                      &lt;option value=&quot;Sales&quot;&gt;Sales&lt;/option&gt;
                      &lt;option value=&quot;Marketing&quot;&gt;Marketing&lt;/option&gt;
                      &lt;option value=&quot;Customer Support&quot;&gt;Customer Support&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;div class=&quot;valid-feedback&quot;&gt;
                      Looks good!
                    &lt;/div&gt;
                    &lt;div class=&quot;invalid-feedback&quot;&gt;
                      Please select a department.
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /column --&gt;
                &lt;div class=&quot;col-12&quot;&gt;
                  &lt;div class=&quot;form-floating mb-4&quot;&gt;
                    &lt;textarea id=&quot;form_message&quot; name=&quot;message&quot; class=&quot;form-control&quot; placeholder=&quot;Your message&quot; style=&quot;height: 150px&quot; required&gt;&lt;/textarea&gt;
                    &lt;label for=&quot;form_message&quot;&gt;Message *&lt;/label&gt;
                    &lt;div class=&quot;valid-feedback&quot;&gt;
                      Looks good!
                    &lt;/div&gt;
                    &lt;div class=&quot;invalid-feedback&quot;&gt;
                      Please enter your messsage.
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /column --&gt;
                &lt;div class=&quot;col-12&quot;&gt;
                  &lt;div class=&quot;form-check mb-4&quot;&gt;
                    &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;invalidCheck&quot; required&gt;
                    &lt;label class=&quot;form-check-label&quot; for=&quot;invalidCheck&quot;&gt;
                      I agree to &lt;a href=&quot;#&quot; class=&quot;hover&quot;&gt;terms and policy&lt;/a&gt;.
                    &lt;/label&gt;
                    &lt;div class=&quot;invalid-feedback&quot;&gt;
                      You must agree before submitting.
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- /column --&gt;
                &lt;div class=&quot;col-12&quot;&gt;
                  &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary rounded-pill btn-send mb-3&quot; value=&quot;Send message&quot;&gt;
                  &lt;p class=&quot;text-muted&quot;&gt;&lt;strong&gt;*&lt;/strong&gt; These fields are required.&lt;/p&gt;
                &lt;/div&gt;
                &lt;!-- /column --&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
            &lt;/form&gt;
            &lt;!-- /form --&gt;
          &lt;/div&gt;
          &lt;!--/column --&gt;
          &lt;div class=&quot;col-lg-4&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&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 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&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 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-envelope&quot;&gt;&lt;/i&gt; &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;h5 class=&quot;mb-1&quot;&gt;E-mail&lt;/h5&gt;
                &lt;p class=&quot;mb-0&quot;&gt;&lt;a href=&quot;mailto:sandbox@email.com&quot; class=&quot;text-body&quot;&gt;sandbox@email.com&lt;/a&gt;&lt;/p&gt;
                &lt;p&gt;&lt;a href=&quot;mailto:help@sandbox.com&quot; class=&quot;text-body&quot;&gt;help@sandbox.com&lt;/a&gt;&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;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>