Contacts

Component #1

Contact us

We collaborate with ambitious brands and people. Let's chat.

                    
                      <div class="position-relative">
                        <!-- Contacts Section -->
                        <div class="bg-primary bg-img-hero" style="background-image: url(../assets/svg/components/abstract-shapes-5.svg);">
                          <div class="container space-top-2 space-top-lg-3 space-bottom-1">
                            <!-- Title -->
                            <div class="w-lg-50 text-center text-white mx-lg-auto mb-7">
                              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Contact us</span>
                              <h2 class="text-white text-lh-lg">We collaborate with ambitious brands and people. <span class="text-warning">Let's chat.</span></h2>
                            </div>
                            <!-- End Title -->

                            <div class="position-relative w-lg-50 z-index-2 mx-lg-auto">
                              <!-- Form -->
                              <form class="js-validate card shadow-lg p-4 p-lg-7">
                                <div class="js-form-message form-group mb-4">
                                  <label for="inputName" class="input-label">Name</label>
                                  <input type="text" class="form-control" name="name" id="inputName" placeholder="Alex Hecker" aria-label="Alex Hecker" required
                                         data-msg="Please enter your name.">
                                </div>
                                <div class="form-group mb-4">
                                  <label for="inputCompanyName" class="input-label">Company name <span class="text-muted font-weight-normal ml-1">(optional)</span></label>
                                  <input type="text" class="form-control" name="companyName" id="inputCompanyName" placeholder="Pixeel Ltd." aria-label="Pixeel Ltd.">
                                </div>
                                <div class="js-form-message form-group mb-4">
                                  <label for="emailAddressExample2" class="input-label">Email address</label>
                                  <input type="email" class="form-control" name="emailAddressExample2" id="emailAddressExample2" placeholder="alexhecker@pixeel.com" aria-label="alexhecker@pixeel.com" required
                                         data-msg="Please enter a valid email address.">
                                </div>
                                <div class="js-form-message form-group mb-4">
                                  <label for="descriptionTextarea" class="input-label">Tell us more</label>
                                  <textarea class="form-control" rows="3" id="descriptionTextarea" placeholder="Hi there, I would like to ..." required
                                            data-msg="Please enter your message."></textarea>
                                </div>

                                <div class="d-md-flex justify-content-md-end">
                                  <button type="submit" class="btn btn-primary btn-wide transition-3d-hover">Submit</button>
                                </div>
                              </form>
                              <!-- End Form -->
                            </div>
                          </div>
                        </div>
                        <!-- End Contacts Section -->

                        <!-- SVG Shape -->
                        <figure class="position-absolute right-0 bottom-0 left-0">
                          <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                               viewBox="0 0 1920 323" enable-background="new 0 0 1920 323" xml:space="preserve" style="margin-bottom: -8px;">
                            <polygon fill="#fff" points="0,323 1920,323 1920,0 "/>
                          </svg>
                        </figure>
                        <!-- End SVG Shape -->
                      </div>
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.validation.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #2

Hire us

Whatever your goal - we will get your there.


Fill out the form and we'll be in touch as soon as possible.

                    
                      <!-- Signup Form Section -->
                      <div class="bg-dark rounded-lg mx-3 mx-xl-10" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);">
                        <div class="container-xl container-fluid space-1 space-md-2 px-4 px-md-8 px-lg-10">
                          <div class="row justify-content-lg-between align-items-lg-center">
                            <div class="col-md-10 col-lg-5 mb-9 mb-lg-0">
                              <h1 class="text-white">Hire us</h1>
                              <p class="text-white-70">Whatever your goal - we will get your there.</p>

                              <div class="w-50">
                                <hr class="opacity-xs my-5">
                              </div>

                              <!-- Carousel Main -->
                              <div id="testimonialsNavMain" class="js-slick-carousel slick mb-4"
                                   data-hs-slick-carousel-options='{
                                     "autoplay": true,
                                     "autoplaySpeed": 5000,
                                     "fade": true,
                                     "infinite": true,
                                     "asNavFor": "#testimonialsNavPagination"
                                   }'>
                                <div class="js-slide">
                                  <blockquote class="h3 text-white font-weight-normal mb-4"><em>"The template is really nice and offers quite a large set of options. Thank you!"</em></blockquote>
                                  <span class="h5 text-white">Christina Kray</span>
                                  <small class="d-block text-white-70">Social Media Executive, Airbnb</small>
                                </div>

                                <div class="js-slide">
                                  <blockquote class="h3 text-white font-weight-normal mb-4"><em>"It's beautiful and the coding is done quickly and seamlessly. Keep it up!"</em></blockquote>
                                  <span class="h5 text-white">James Austin</span>
                                  <small class="d-block text-white-70">Executive Creative Director, HubSpot</small>
                                </div>

                                <div class="js-slide">
                                  <blockquote class="h3 text-white font-weight-normal mb-4"><em>"I love Front! I love the ease of use, I love the fact that I have total creative freedom..."</em></blockquote>
                                  <span class="h5 text-white">Charlotte Moore</span>
                                  <small class="d-block text-white-70">Head of Commercials, Slack</small>
                                </div>
                              </div>
                              <!-- End Carousel Main -->

                              <!-- Carousel Pagination -->
                              <div id="testimonialsNavPagination" class="js-slick-carousel slick slick-transform-off slick-pagination-modern"
                                   data-hs-slick-carousel-options='{
                                     "infinite": true,
                                     "slidesToShow": 3,
                                     "centerMode": true,
                                     "isThumbs": true,
                                     "asNavFor": "#testimonialsNavMain"
                                   }'>
                                <div class="js-slide">
                                  <div class="avatar avatar-circle">
                                    <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                                  </div>
                                </div>

                                <div class="js-slide">
                                  <div class="avatar avatar-circle">
                                    <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                                  </div>
                                </div>

                                <div class="js-slide">
                                  <div class="avatar avatar-circle">
                                    <img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                                  </div>
                                </div>
                              </div>
                              <!-- End Carousel Pagination -->
                            </div>

                            <div class="col-lg-6">
                              <!-- Form -->
                              <form class="js-validate card shadow-lg">
                                <div class="card-body p-4 p-md-7">
                                  <div class="mb-4">
                                    <h3>Fill out the form and we'll be in touch as soon as possible.</h3>
                                  </div>

                                  <div class="row mx-n2">
                                    <div class="col-sm-6 px-2">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label class="sr-only" for="firstNameExample2">First name</label>
                                        <input type="text" class="form-control" name="firstNameExample2" id="firstNameExample2" placeholder="First name" aria-label="First name" required
                                               data-msg="Please enter first your name">
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-6 px-2">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label class="sr-only" for="lastNameExample2">Last name</label>
                                        <input type="text" class="form-control" name="lastNameExample2" id="lastNameExample2" placeholder="Last name" aria-label="Last name" required
                                               data-msg="Please enter last your name">
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-6 px-2">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label class="sr-only" for="workEmailAddress">Work email</label>
                                        <input type="email" class="form-control" name="workEmailAddress" id="workEmailAddress" placeholder="Work email" aria-label="Work email" required
                                               data-msg="Please enter a valid email address">
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-6 px-2">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label class="sr-only" for="companyWebsite">Company website <span class="text-muted font-weight-normal ml-1">(optional)</span></label>
                                        <input type="text" class="form-control" name="companyWebsite" id="companyWebsite" placeholder="Company website" aria-label="Company website"
                                               data-msg="Please enter company website.">
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-6 px-2">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label class="sr-only" for="budget">Budget</label>
                                        <select class="form-control custom-select" name="budget" id="budget" required
                                                data-msg="Please select your budget.">
                                          <option value="" selected disabled>Budget</option>
                                          <option value="budget1">None, just getting started</option>
                                          <option value="budget1">Less than $20,000</option>
                                          <option value="budget1">$20,000 to $50,000</option>
                                          <option value="budget1">$50,000 to $100,000</option>
                                          <option value="budget2">$100,000 to $500,000</option>
                                          <option value="budget3">More than $500,000</option>
                                        </select>
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-6 px-2">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label class="sr-only" for="country">Country</label>
                                        <select class="form-control custom-select" name="country" id="country" required
                                                data-msg="Please select your country.">
                                          <option value="" selected disabled>Country</option>
                                          <option value="AF">Afghanistan</option>
                                          <option value="AX">Åland Islands</option>
                                          <option value="AL">Albania</option>
                                          <option value="DZ">Algeria</option>
                                          <option value="AS">American Samoa</option>
                                          <option value="AD">Andorra</option>
                                          <option value="AO">Angola</option>
                                          <option value="AI">Anguilla</option>
                                          <option value="AQ">Antarctica</option>
                                          <option value="AG">Antigua and Barbuda</option>
                                          <option value="AR">Argentina</option>
                                          <option value="AM">Armenia</option>
                                          <option value="AW">Aruba</option>
                                          <option value="AU">Australia</option>
                                          <option value="AT">Austria</option>
                                          <option value="AZ">Azerbaijan</option>
                                          <option value="BS">Bahamas</option>
                                          <option value="BH">Bahrain</option>
                                          <option value="BD">Bangladesh</option>
                                          <option value="BB">Barbados</option>
                                          <option value="BY">Belarus</option>
                                          <option value="BE">Belgium</option>
                                          <option value="BZ">Belize</option>
                                          <option value="BJ">Benin</option>
                                          <option value="BM">Bermuda</option>
                                          <option value="BT">Bhutan</option>
                                          <option value="BO">Bolivia, Plurinational State of</option>
                                          <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                                          <option value="BA">Bosnia and Herzegovina</option>
                                          <option value="BW">Botswana</option>
                                          <option value="BV">Bouvet Island</option>
                                          <option value="BR">Brazil</option>
                                          <option value="IO">British Indian Ocean Territory</option>
                                          <option value="BN">Brunei Darussalam</option>
                                          <option value="BG">Bulgaria</option>
                                          <option value="BF">Burkina Faso</option>
                                          <option value="BI">Burundi</option>
                                          <option value="KH">Cambodia</option>
                                          <option value="CM">Cameroon</option>
                                          <option value="CA">Canada</option>
                                          <option value="CV">Cape Verde</option>
                                          <option value="KY">Cayman Islands</option>
                                          <option value="CF">Central African Republic</option>
                                          <option value="TD">Chad</option>
                                          <option value="CL">Chile</option>
                                          <option value="CN">China</option>
                                          <option value="CX">Christmas Island</option>
                                          <option value="CC">Cocos (Keeling) Islands</option>
                                          <option value="CO">Colombia</option>
                                          <option value="KM">Comoros</option>
                                          <option value="CG">Congo</option>
                                          <option value="CD">Congo, the Democratic Republic of the</option>
                                          <option value="CK">Cook Islands</option>
                                          <option value="CR">Costa Rica</option>
                                          <option value="CI">Côte d'Ivoire</option>
                                          <option value="HR">Croatia</option>
                                          <option value="CU">Cuba</option>
                                          <option value="CW">Curaçao</option>
                                          <option value="CY">Cyprus</option>
                                          <option value="CZ">Czech Republic</option>
                                          <option value="DK">Denmark</option>
                                          <option value="DJ">Djibouti</option>
                                          <option value="DM">Dominica</option>
                                          <option value="DO">Dominican Republic</option>
                                          <option value="EC">Ecuador</option>
                                          <option value="EG">Egypt</option>
                                          <option value="SV">El Salvador</option>
                                          <option value="GQ">Equatorial Guinea</option>
                                          <option value="ER">Eritrea</option>
                                          <option value="EE">Estonia</option>
                                          <option value="ET">Ethiopia</option>
                                          <option value="FK">Falkland Islands (Malvinas)</option>
                                          <option value="FO">Faroe Islands</option>
                                          <option value="FJ">Fiji</option>
                                          <option value="FI">Finland</option>
                                          <option value="FR">France</option>
                                          <option value="GF">French Guiana</option>
                                          <option value="PF">French Polynesia</option>
                                          <option value="TF">French Southern Territories</option>
                                          <option value="GA">Gabon</option>
                                          <option value="GM">Gambia</option>
                                          <option value="GE">Georgia</option>
                                          <option value="DE">Germany</option>
                                          <option value="GH">Ghana</option>
                                          <option value="GI">Gibraltar</option>
                                          <option value="GR">Greece</option>
                                          <option value="GL">Greenland</option>
                                          <option value="GD">Grenada</option>
                                          <option value="GP">Guadeloupe</option>
                                          <option value="GU">Guam</option>
                                          <option value="GT">Guatemala</option>
                                          <option value="GG">Guernsey</option>
                                          <option value="GN">Guinea</option>
                                          <option value="GW">Guinea-Bissau</option>
                                          <option value="GY">Guyana</option>
                                          <option value="HT">Haiti</option>
                                          <option value="HM">Heard Island and McDonald Islands</option>
                                          <option value="VA">Holy See (Vatican City State)</option>
                                          <option value="HN">Honduras</option>
                                          <option value="HK">Hong Kong</option>
                                          <option value="HU">Hungary</option>
                                          <option value="IS">Iceland</option>
                                          <option value="IN">India</option>
                                          <option value="ID">Indonesia</option>
                                          <option value="IR">Iran, Islamic Republic of</option>
                                          <option value="IQ">Iraq</option>
                                          <option value="IE">Ireland</option>
                                          <option value="IM">Isle of Man</option>
                                          <option value="IL">Israel</option>
                                          <option value="IT">Italy</option>
                                          <option value="JM">Jamaica</option>
                                          <option value="JP">Japan</option>
                                          <option value="JE">Jersey</option>
                                          <option value="JO">Jordan</option>
                                          <option value="KZ">Kazakhstan</option>
                                          <option value="KE">Kenya</option>
                                          <option value="KI">Kiribati</option>
                                          <option value="KP">Korea, Democratic People's Republic of</option>
                                          <option value="KR">Korea, Republic of</option>
                                          <option value="KW">Kuwait</option>
                                          <option value="KG">Kyrgyzstan</option>
                                          <option value="LA">Lao People's Democratic Republic</option>
                                          <option value="LV">Latvia</option>
                                          <option value="LB">Lebanon</option>
                                          <option value="LS">Lesotho</option>
                                          <option value="LR">Liberia</option>
                                          <option value="LY">Libya</option>
                                          <option value="LI">Liechtenstein</option>
                                          <option value="LT">Lithuania</option>
                                          <option value="LU">Luxembourg</option>
                                          <option value="MO">Macao</option>
                                          <option value="MK">Macedonia, the former Yugoslav Republic of</option>
                                          <option value="MG">Madagascar</option>
                                          <option value="MW">Malawi</option>
                                          <option value="MY">Malaysia</option>
                                          <option value="MV">Maldives</option>
                                          <option value="ML">Mali</option>
                                          <option value="MT">Malta</option>
                                          <option value="MH">Marshall Islands</option>
                                          <option value="MQ">Martinique</option>
                                          <option value="MR">Mauritania</option>
                                          <option value="MU">Mauritius</option>
                                          <option value="YT">Mayotte</option>
                                          <option value="MX">Mexico</option>
                                          <option value="FM">Micronesia, Federated States of</option>
                                          <option value="MD">Moldova, Republic of</option>
                                          <option value="MC">Monaco</option>
                                          <option value="MN">Mongolia</option>
                                          <option value="ME">Montenegro</option>
                                          <option value="MS">Montserrat</option>
                                          <option value="MA">Morocco</option>
                                          <option value="MZ">Mozambique</option>
                                          <option value="MM">Myanmar</option>
                                          <option value="NA">Namibia</option>
                                          <option value="NR">Nauru</option>
                                          <option value="NP">Nepal</option>
                                          <option value="NL">Netherlands</option>
                                          <option value="NC">New Caledonia</option>
                                          <option value="NZ">New Zealand</option>
                                          <option value="NI">Nicaragua</option>
                                          <option value="NE">Niger</option>
                                          <option value="NG">Nigeria</option>
                                          <option value="NU">Niue</option>
                                          <option value="NF">Norfolk Island</option>
                                          <option value="MP">Northern Mariana Islands</option>
                                          <option value="NO">Norway</option>
                                          <option value="OM">Oman</option>
                                          <option value="PK">Pakistan</option>
                                          <option value="PW">Palau</option>
                                          <option value="PS">Palestinian Territory, Occupied</option>
                                          <option value="PA">Panama</option>
                                          <option value="PG">Papua New Guinea</option>
                                          <option value="PY">Paraguay</option>
                                          <option value="PE">Peru</option>
                                          <option value="PH">Philippines</option>
                                          <option value="PN">Pitcairn</option>
                                          <option value="PL">Poland</option>
                                          <option value="PT">Portugal</option>
                                          <option value="PR">Puerto Rico</option>
                                          <option value="QA">Qatar</option>
                                          <option value="RE">Réunion</option>
                                          <option value="RO">Romania</option>
                                          <option value="RU">Russian Federation</option>
                                          <option value="RW">Rwanda</option>
                                          <option value="BL">Saint Barthélemy</option>
                                          <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
                                          <option value="KN">Saint Kitts and Nevis</option>
                                          <option value="LC">Saint Lucia</option>
                                          <option value="MF">Saint Martin (French part)</option>
                                          <option value="PM">Saint Pierre and Miquelon</option>
                                          <option value="VC">Saint Vincent and the Grenadines</option>
                                          <option value="WS">Samoa</option>
                                          <option value="SM">San Marino</option>
                                          <option value="ST">Sao Tome and Principe</option>
                                          <option value="SA">Saudi Arabia</option>
                                          <option value="SN">Senegal</option>
                                          <option value="RS">Serbia</option>
                                          <option value="SC">Seychelles</option>
                                          <option value="SL">Sierra Leone</option>
                                          <option value="SG">Singapore</option>
                                          <option value="SX">Sint Maarten (Dutch part)</option>
                                          <option value="SK">Slovakia</option>
                                          <option value="SI">Slovenia</option>
                                          <option value="SB">Solomon Islands</option>
                                          <option value="SO">Somalia</option>
                                          <option value="ZA">South Africa</option>
                                          <option value="GS">South Georgia and the South Sandwich Islands</option>
                                          <option value="SS">South Sudan</option>
                                          <option value="ES">Spain</option>
                                          <option value="LK">Sri Lanka</option>
                                          <option value="SD">Sudan</option>
                                          <option value="SR">Suriname</option>
                                          <option value="SJ">Svalbard and Jan Mayen</option>
                                          <option value="SZ">Swaziland</option>
                                          <option value="SE">Sweden</option>
                                          <option value="CH">Switzerland</option>
                                          <option value="SY">Syrian Arab Republic</option>
                                          <option value="TW">Taiwan, Province of China</option>
                                          <option value="TJ">Tajikistan</option>
                                          <option value="TZ">Tanzania, United Republic of</option>
                                          <option value="TH">Thailand</option>
                                          <option value="TL">Timor-Leste</option>
                                          <option value="TG">Togo</option>
                                          <option value="TK">Tokelau</option>
                                          <option value="TO">Tonga</option>
                                          <option value="TT">Trinidad and Tobago</option>
                                          <option value="TN">Tunisia</option>
                                          <option value="TR">Turkey</option>
                                          <option value="TM">Turkmenistan</option>
                                          <option value="TC">Turks and Caicos Islands</option>
                                          <option value="TV">Tuvalu</option>
                                          <option value="UG">Uganda</option>
                                          <option value="UA">Ukraine</option>
                                          <option value="AE">United Arab Emirates</option>
                                          <option value="GB">United Kingdom</option>
                                          <option value="US">United States</option>
                                          <option value="UM">United States Minor Outlying Islands</option>
                                          <option value="UY">Uruguay</option>
                                          <option value="UZ">Uzbekistan</option>
                                          <option value="VU">Vanuatu</option>
                                          <option value="VE">Venezuela, Bolivarian Republic of</option>
                                          <option value="VN">Viet Nam</option>
                                          <option value="VG">Virgin Islands, British</option>
                                          <option value="VI">Virgin Islands, U.S.</option>
                                          <option value="WF">Wallis and Futuna</option>
                                          <option value="EH">Western Sahara</option>
                                          <option value="YE">Yemen</option>
                                          <option value="ZM">Zambia</option>
                                          <option value="ZW">Zimbabwe</option>
                                        </select>
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-12 px-2">
                                      <!-- Input -->
                                      <div class="js-form-message form-group">
                                        <label class="sr-only" for="aboutProject">Tell us about your project</label>
                                        <textarea class="form-control" rows="3" name="aboutProject" id="aboutProject" placeholder="Tell us more about your project, needs, and timeline." aria-label="Tell us more about your project, needs, and timeline." required
                                                  data-msg="Please enter a reason."></textarea>
                                      </div>
                                      <!-- End Input -->
                                    </div>
                                  </div>

                                  <!-- Checkbox -->
                                  <div class="js-form-message mb-5">
                                    <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                                      <input type="checkbox" class="custom-control-input" id="termsCheckboxExample2" name="termsCheckboxExample2" checked>
                                      <label class="custom-control-label small" for="termsCheckboxExample2">
                                        Yes, I'd like to receive occasional marketing emails from Front. I have the right to opt out at any time. <a class="link-underline" href="#">View privacy policy.</a>
                                      </label>
                                    </div>
                                  </div>
                                  <!-- End Checkbox -->

                                  <button type="submit" class="btn btn-block btn-primary">Get Started</button>
                                </div>
                              </form>
                              <!-- End Form -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Signup Form Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/slick-carousel/slick/slick.js"></script>
                      <script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.slick-carousel.js"></script>
                      <script src="./assets/js/hs.validation.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF SLICK CAROUSEL
                          // =======================================================
                          $('.js-slick-carousel').each(function() {
                            var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                          });


                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #3

Image Description

Drop us a message

Find the right solution.

Image Description

You'll hear from us within 1-2 business days.

                    
                      <!-- SVG Top Shape -->
                      <figure>
                        <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="64px"
                             viewBox="0 0 1921 273" style="margin-bottom: -8px; enable-background:new 0 0 1921 273;" xml:space="preserve">
                          <polygon fill="#f9fbff" points="0,273 1921,273 1921,0 "/>
                        </svg>
                      </figure>
                      <!-- End SVG Top Shape -->

                      <!-- Contacts Section -->
                      <div class="bg-light position-relative">
                        <div class="container space-bottom-1 space-bottom-md-2">
                          <div class="row justify-content-center mb-5">
                            <div class="col-md-1 d-none d-md-inline-block">
                              <!-- Illustration -->
                              <figure class="position-absolute bottom-0 left-0 w-100">
                                <img class="img-fluid" src="../assets/svg/illustrations/flowers.svg" alt="Image Description">
                              </figure>
                              <!-- End Illustration -->
                            </div>

                            <div class="col-md-10 col-lg-7 mt-n11">
                              <!-- Contact Form -->
                              <form class="js-validate card p-4 p-md-5">
                                <div class="text-center mb-4">
                                  <h2>Drop us a message</h2>
                                  <p>Find the right solution.</p>
                                </div>

                                <div class="row mx-n2">
                                  <div class="col-md-6 px-2 mb-4">
                                    <!-- Input -->
                                    <label class="input-label">First name</label>
                                    <div class="js-form-message">
                                      <div class="input-group">
                                        <input type="text" class="form-control" name="firstName" placeholder="First name" aria-label="First name" required
                                               data-msg="Please enter your first name.">
                                      </div>
                                    </div>
                                    <!-- End Input -->
                                  </div>

                                  <div class="col-md-6 px-2 mb-4">
                                    <!-- Input -->
                                    <label class="input-label">Last name</label>
                                    <div class="js-form-message">
                                      <div class="input-group">
                                        <input type="text" class="form-control" name="lasstName" placeholder="Last name" aria-label="Last name" required
                                               data-msg="Please enter your last name.">
                                      </div>
                                    </div>
                                    <!-- End Input -->
                                  </div>

                                  <div class="w-100"></div>

                                  <div class="col-md-6 px-2 mb-4">
                                    <!-- Input -->
                                    <label class="input-label">Country</label>
                                    <div class="js-form-message">
                                      <div class="input-group">
                                        <select class="form-control custom-select text-muted" required
                                                data-msg="Please select country.">
                                          <option value="">Select country</option>
                                          <option value="AF">Afghanistan</option>
                                          <option value="AX">Åland Islands</option>
                                          <option value="AL">Albania</option>
                                          <option value="DZ">Algeria</option>
                                          <option value="AS">American Samoa</option>
                                          <option value="AD">Andorra</option>
                                          <option value="AO">Angola</option>
                                          <option value="AI">Anguilla</option>
                                          <option value="AQ">Antarctica</option>
                                          <option value="AG">Antigua and Barbuda</option>
                                          <option value="AR">Argentina</option>
                                          <option value="AM">Armenia</option>
                                          <option value="AW">Aruba</option>
                                          <option value="AU">Australia</option>
                                          <option value="AT">Austria</option>
                                          <option value="AZ">Azerbaijan</option>
                                          <option value="BS">Bahamas</option>
                                          <option value="BH">Bahrain</option>
                                          <option value="BD">Bangladesh</option>
                                          <option value="BB">Barbados</option>
                                          <option value="BY">Belarus</option>
                                          <option value="BE">Belgium</option>
                                          <option value="BZ">Belize</option>
                                          <option value="BJ">Benin</option>
                                          <option value="BM">Bermuda</option>
                                          <option value="BT">Bhutan</option>
                                          <option value="BO">Bolivia, Plurinational State of</option>
                                          <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                                          <option value="BA">Bosnia and Herzegovina</option>
                                          <option value="BW">Botswana</option>
                                          <option value="BV">Bouvet Island</option>
                                          <option value="BR">Brazil</option>
                                          <option value="IO">British Indian Ocean Territory</option>
                                          <option value="BN">Brunei Darussalam</option>
                                          <option value="BG">Bulgaria</option>
                                          <option value="BF">Burkina Faso</option>
                                          <option value="BI">Burundi</option>
                                          <option value="KH">Cambodia</option>
                                          <option value="CM">Cameroon</option>
                                          <option value="CA">Canada</option>
                                          <option value="CV">Cape Verde</option>
                                          <option value="KY">Cayman Islands</option>
                                          <option value="CF">Central African Republic</option>
                                          <option value="TD">Chad</option>
                                          <option value="CL">Chile</option>
                                          <option value="CN">China</option>
                                          <option value="CX">Christmas Island</option>
                                          <option value="CC">Cocos (Keeling) Islands</option>
                                          <option value="CO">Colombia</option>
                                          <option value="KM">Comoros</option>
                                          <option value="CG">Congo</option>
                                          <option value="CD">Congo, the Democratic Republic of the</option>
                                          <option value="CK">Cook Islands</option>
                                          <option value="CR">Costa Rica</option>
                                          <option value="CI">Côte d'Ivoire</option>
                                          <option value="HR">Croatia</option>
                                          <option value="CU">Cuba</option>
                                          <option value="CW">Curaçao</option>
                                          <option value="CY">Cyprus</option>
                                          <option value="CZ">Czech Republic</option>
                                          <option value="DK">Denmark</option>
                                          <option value="DJ">Djibouti</option>
                                          <option value="DM">Dominica</option>
                                          <option value="DO">Dominican Republic</option>
                                          <option value="EC">Ecuador</option>
                                          <option value="EG">Egypt</option>
                                          <option value="SV">El Salvador</option>
                                          <option value="GQ">Equatorial Guinea</option>
                                          <option value="ER">Eritrea</option>
                                          <option value="EE">Estonia</option>
                                          <option value="ET">Ethiopia</option>
                                          <option value="FK">Falkland Islands (Malvinas)</option>
                                          <option value="FO">Faroe Islands</option>
                                          <option value="FJ">Fiji</option>
                                          <option value="FI">Finland</option>
                                          <option value="FR">France</option>
                                          <option value="GF">French Guiana</option>
                                          <option value="PF">French Polynesia</option>
                                          <option value="TF">French Southern Territories</option>
                                          <option value="GA">Gabon</option>
                                          <option value="GM">Gambia</option>
                                          <option value="GE">Georgia</option>
                                          <option value="DE">Germany</option>
                                          <option value="GH">Ghana</option>
                                          <option value="GI">Gibraltar</option>
                                          <option value="GR">Greece</option>
                                          <option value="GL">Greenland</option>
                                          <option value="GD">Grenada</option>
                                          <option value="GP">Guadeloupe</option>
                                          <option value="GU">Guam</option>
                                          <option value="GT">Guatemala</option>
                                          <option value="GG">Guernsey</option>
                                          <option value="GN">Guinea</option>
                                          <option value="GW">Guinea-Bissau</option>
                                          <option value="GY">Guyana</option>
                                          <option value="HT">Haiti</option>
                                          <option value="HM">Heard Island and McDonald Islands</option>
                                          <option value="VA">Holy See (Vatican City State)</option>
                                          <option value="HN">Honduras</option>
                                          <option value="HK">Hong Kong</option>
                                          <option value="HU">Hungary</option>
                                          <option value="IS">Iceland</option>
                                          <option value="IN">India</option>
                                          <option value="ID">Indonesia</option>
                                          <option value="IR">Iran, Islamic Republic of</option>
                                          <option value="IQ">Iraq</option>
                                          <option value="IE">Ireland</option>
                                          <option value="IM">Isle of Man</option>
                                          <option value="IL">Israel</option>
                                          <option value="IT">Italy</option>
                                          <option value="JM">Jamaica</option>
                                          <option value="JP">Japan</option>
                                          <option value="JE">Jersey</option>
                                          <option value="JO">Jordan</option>
                                          <option value="KZ">Kazakhstan</option>
                                          <option value="KE">Kenya</option>
                                          <option value="KI">Kiribati</option>
                                          <option value="KP">Korea, Democratic People's Republic of</option>
                                          <option value="KR">Korea, Republic of</option>
                                          <option value="KW">Kuwait</option>
                                          <option value="KG">Kyrgyzstan</option>
                                          <option value="LA">Lao People's Democratic Republic</option>
                                          <option value="LV">Latvia</option>
                                          <option value="LB">Lebanon</option>
                                          <option value="LS">Lesotho</option>
                                          <option value="LR">Liberia</option>
                                          <option value="LY">Libya</option>
                                          <option value="LI">Liechtenstein</option>
                                          <option value="LT">Lithuania</option>
                                          <option value="LU">Luxembourg</option>
                                          <option value="MO">Macao</option>
                                          <option value="MK">Macedonia, the former Yugoslav Republic of</option>
                                          <option value="MG">Madagascar</option>
                                          <option value="MW">Malawi</option>
                                          <option value="MY">Malaysia</option>
                                          <option value="MV">Maldives</option>
                                          <option value="ML">Mali</option>
                                          <option value="MT">Malta</option>
                                          <option value="MH">Marshall Islands</option>
                                          <option value="MQ">Martinique</option>
                                          <option value="MR">Mauritania</option>
                                          <option value="MU">Mauritius</option>
                                          <option value="YT">Mayotte</option>
                                          <option value="MX">Mexico</option>
                                          <option value="FM">Micronesia, Federated States of</option>
                                          <option value="MD">Moldova, Republic of</option>
                                          <option value="MC">Monaco</option>
                                          <option value="MN">Mongolia</option>
                                          <option value="ME">Montenegro</option>
                                          <option value="MS">Montserrat</option>
                                          <option value="MA">Morocco</option>
                                          <option value="MZ">Mozambique</option>
                                          <option value="MM">Myanmar</option>
                                          <option value="NA">Namibia</option>
                                          <option value="NR">Nauru</option>
                                          <option value="NP">Nepal</option>
                                          <option value="NL">Netherlands</option>
                                          <option value="NC">New Caledonia</option>
                                          <option value="NZ">New Zealand</option>
                                          <option value="NI">Nicaragua</option>
                                          <option value="NE">Niger</option>
                                          <option value="NG">Nigeria</option>
                                          <option value="NU">Niue</option>
                                          <option value="NF">Norfolk Island</option>
                                          <option value="MP">Northern Mariana Islands</option>
                                          <option value="NO">Norway</option>
                                          <option value="OM">Oman</option>
                                          <option value="PK">Pakistan</option>
                                          <option value="PW">Palau</option>
                                          <option value="PS">Palestinian Territory, Occupied</option>
                                          <option value="PA">Panama</option>
                                          <option value="PG">Papua New Guinea</option>
                                          <option value="PY">Paraguay</option>
                                          <option value="PE">Peru</option>
                                          <option value="PH">Philippines</option>
                                          <option value="PN">Pitcairn</option>
                                          <option value="PL">Poland</option>
                                          <option value="PT">Portugal</option>
                                          <option value="PR">Puerto Rico</option>
                                          <option value="QA">Qatar</option>
                                          <option value="RE">Réunion</option>
                                          <option value="RO">Romania</option>
                                          <option value="RU">Russian Federation</option>
                                          <option value="RW">Rwanda</option>
                                          <option value="BL">Saint Barthélemy</option>
                                          <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
                                          <option value="KN">Saint Kitts and Nevis</option>
                                          <option value="LC">Saint Lucia</option>
                                          <option value="MF">Saint Martin (French part)</option>
                                          <option value="PM">Saint Pierre and Miquelon</option>
                                          <option value="VC">Saint Vincent and the Grenadines</option>
                                          <option value="WS">Samoa</option>
                                          <option value="SM">San Marino</option>
                                          <option value="ST">Sao Tome and Principe</option>
                                          <option value="SA">Saudi Arabia</option>
                                          <option value="SN">Senegal</option>
                                          <option value="RS">Serbia</option>
                                          <option value="SC">Seychelles</option>
                                          <option value="SL">Sierra Leone</option>
                                          <option value="SG">Singapore</option>
                                          <option value="SX">Sint Maarten (Dutch part)</option>
                                          <option value="SK">Slovakia</option>
                                          <option value="SI">Slovenia</option>
                                          <option value="SB">Solomon Islands</option>
                                          <option value="SO">Somalia</option>
                                          <option value="ZA">South Africa</option>
                                          <option value="GS">South Georgia and the South Sandwich Islands</option>
                                          <option value="SS">South Sudan</option>
                                          <option value="ES">Spain</option>
                                          <option value="LK">Sri Lanka</option>
                                          <option value="SD">Sudan</option>
                                          <option value="SR">Suriname</option>
                                          <option value="SJ">Svalbard and Jan Mayen</option>
                                          <option value="SZ">Swaziland</option>
                                          <option value="SE">Sweden</option>
                                          <option value="CH">Switzerland</option>
                                          <option value="SY">Syrian Arab Republic</option>
                                          <option value="TW">Taiwan, Province of China</option>
                                          <option value="TJ">Tajikistan</option>
                                          <option value="TZ">Tanzania, United Republic of</option>
                                          <option value="TH">Thailand</option>
                                          <option value="TL">Timor-Leste</option>
                                          <option value="TG">Togo</option>
                                          <option value="TK">Tokelau</option>
                                          <option value="TO">Tonga</option>
                                          <option value="TT">Trinidad and Tobago</option>
                                          <option value="TN">Tunisia</option>
                                          <option value="TR">Turkey</option>
                                          <option value="TM">Turkmenistan</option>
                                          <option value="TC">Turks and Caicos Islands</option>
                                          <option value="TV">Tuvalu</option>
                                          <option value="UG">Uganda</option>
                                          <option value="UA">Ukraine</option>
                                          <option value="AE">United Arab Emirates</option>
                                          <option value="GB">United Kingdom</option>
                                          <option value="US">United States</option>
                                          <option value="UM">United States Minor Outlying Islands</option>
                                          <option value="UY">Uruguay</option>
                                          <option value="UZ">Uzbekistan</option>
                                          <option value="VU">Vanuatu</option>
                                          <option value="VE">Venezuela, Bolivarian Republic of</option>
                                          <option value="VN">Viet Nam</option>
                                          <option value="VG">Virgin Islands, British</option>
                                          <option value="VI">Virgin Islands, U.S.</option>
                                          <option value="WF">Wallis and Futuna</option>
                                          <option value="EH">Western Sahara</option>
                                          <option value="YE">Yemen</option>
                                          <option value="ZM">Zambia</option>
                                          <option value="ZW">Zimbabwe</option>
                                        </select>
                                      </div>
                                    </div>
                                    <!-- End Input -->
                                  </div>

                                  <div class="col-md-6 px-2 mb-4">
                                    <!-- Input -->
                                    <label class="input-label">Email address</label>
                                    <div class="js-form-message">
                                      <div class="input-group">
                                        <input type="text" class="form-control" name="email" placeholder="Email address" aria-label="Email address" required
                                               data-msg="Please enter a valid email address.">
                                      </div>
                                    </div>
                                    <!-- End Input -->
                                  </div>

                                  <div class="w-100"></div>

                                  <div class="col-md-6 px-2 mb-4">
                                    <!-- Input -->
                                    <label class="input-label">Company <span class="text-muted font-weight-normal ml-1">(optional)</span></label>
                                    <div class="js-form-message">
                                      <div class="input-group">
                                        <input type="text" class="form-control" name="company" placeholder="Company" aria-label="Company"
                                               data-msg="Please enter company name.">
                                      </div>
                                    </div>
                                    <!-- End Input -->
                                  </div>

                                  <div class="col-md-6 px-2 mb-4">
                                    <!-- Input -->
                                    <label class="input-label">Job title</label>
                                    <div class="js-form-message">
                                      <div class="input-group">
                                        <input type="text" class="form-control" name="jobTitle" placeholder="Job title" aria-label="Job title" required
                                               data-msg="Please enter a job title.">
                                      </div>
                                    </div>
                                    <!-- End Input -->
                                  </div>
                                </div>

                                <!-- Input -->
                                <div class="mb-5">
                                  <label class="input-label">How can we help you?</label>
                                  <div class="js-form-message input-group">
                                    <textarea class="form-control" rows="4" name="description" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
                                              data-msg="Please enter a reason."></textarea>
                                  </div>
                                </div>
                                <!-- End Input -->

                                <!-- Checkbox -->
                                <div class="js-form-message mb-3">
                                  <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                                    <input type="checkbox" class="custom-control-input" id="termsCheckboxExample1" name="termsCheckboxExample1" required
                                           data-msg="Please accept our Terms and Conditions.">
                                    <label class="custom-control-label" for="termsCheckboxExample1">
                                      <small>
                                        I agree to the
                                        <a class="link-underline" href="../page-terms.html">Terms and Conditions</a>
                                      </small>
                                    </label>
                                  </div>
                                </div>
                                <!-- End Checkbox -->

                                <!-- Checkbox -->
                                <div class="js-form-message mb-5">
                                  <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                                    <input type="checkbox" class="custom-control-input" id="newsletterCheckbox" name="newsletterCheckbox" required
                                           data-msg="Please accept our Terms and Conditions.">
                                    <label class="custom-control-label" for="newsletterCheckbox">
                                      <small>I want to receive Front's Newsletters</small>
                                    </label>
                                  </div>
                                </div>
                                <!-- End Checkbox -->

                                <button type="submit" class="btn btn-primary transition-3d-hover">Submit</button>
                              </form>
                              <!-- End Contact Form -->
                            </div>

                            <div class="col-md-1 d-none d-md-inline-block">
                              <!-- Illustration -->
                              <figure class="position-absolute bottom-0 left-0 w-100">
                                <img class="img-fluid" src="../assets/svg/illustrations/chatting-man.svg" alt="Image Description">
                              </figure>
                              <!-- End Illustration -->
                            </div>
                          </div>

                          <div class="text-center">
                            <p class="small">You'll hear from us within 1-2 business days.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Contacts Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.validation.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #4

New York, Brooklyn
Call us
+1 (062) 109-9222
Email us
hello@example.com
Visit us
153 Williamson Plaza, Maggieberg
                    
                      <!-- Map Section -->
                      <div id="contactsSection" class="position-relative mx-3 mx-md-8">
                        <div class="container space-1 space-lg-3">
                          <div class="row justify-content-md-end">
                            <div class="col-md-6 col-lg-5">
                              <div class="card bg-white position-relative z-index-999 p-5 p-sm-7">
                                <div class="mb-5">
                                  <span class="d-block font-size-2 text-dark text-lh-sm">New York,</span>
                                  <span class="d-block font-size-4 text-dark font-weight-bold text-lh-sm">Brooklyn</span>
                                </div>

                                <!-- Contacts -->
                                <div class="media mb-5">
                                  <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
                                    <i class="fas fa-phone"></i>
                                  </span>
                                  <div class="media-body">
                                    <h5 class=" mb-1">Call us</h5>
                                    <span class="d-block text-body font-size-1">+1 (062) 109-9222</span>
                                  </div>
                                </div>
                                <!-- End Contacts -->

                                <!-- Contacts -->
                                <div class="media mb-5">
                                  <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
                                    <i class="fas fa-envelope"></i>
                                  </span>
                                  <div class="media-body text-truncate">
                                    <h5 class=" mb-1">Email us</h5>
                                    <span class="d-block text-body font-size-1">hello@example.com</span>
                                  </div>
                                </div>
                                <!-- End Contacts -->

                                <!-- Contacts -->
                                <div class="media">
                                  <span class="icon icon-xs icon-soft-primary icon-circle mr-3">
                                    <i class="fas fa-map-marker-alt"></i>
                                  </span>
                                  <div class="media-body">
                                    <h5 class=" mb-1">Visit us</h5>
                                    <span class="d-block text-body font-size-1">153 Williamson Plaza, Maggieberg</span>
                                  </div>
                                </div>
                                <!-- End Contacts -->
                              </div>
                            </div>
                          </div>
                        </div>

                        <!-- Gmap -->
                        <div class="position-md-absolute top-0 right-0 bottom-0 left-0">
                          <div id="mapExample1" class="min-h-300rem h-100 rounded-lg"
                               data-hs-leaflet-options='{
                                 "map": {
                                   "scrollWheelZoom": false,
                                   "coords": [37.4040344, -122.0289704]
                                 },
                                 "marker": [
                                   {
                                     "coords": [37.4040344, -122.0289704],
                                     "icon": {
                                       "iconUrl": "../assets/svg/components/map-pin.svg",
                                       "iconSize": [50, 45]
                                     },
                                     "popup": {
                                       "text": "153 Williamson Plaza, Maggieberg",
                                       "title": "Address"
                                     }
                                   }
                                 ]
                                }'></div>
                        </div>
                        <!-- End Gmap -->
                      </div>
                      <!-- End Map Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/leaflet/dist/leaflet.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.leaflet.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF LEAFLET
                          // =======================================================
                          var leaflet = $.HSCore.components.HSLeaflet.init($('#mapExample1')[0]);

                          leaflet.fire('movestart');
                          leaflet._rawPanBy([leaflet.getCenter().lng + 250, leaflet.getCenter().lat]);
                          leaflet.fire('move');
                          leaflet.fire('moveend');

                          L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                            id: 'mapbox/light-v9'
                          }).addTo(leaflet);
                        });
                      </script>
                    
                  

Component #5

Get in touch

We'd love to talk about how we can help you.

Call us: +1 (062) 109-9222
Email us: hello@example.com
Address: 153 Williamson Plaza, Maggieberg

General Enquiries

We'll get back to you in 1-2 business days.

                    
                      <!-- Contact Form Section -->
                      <div class="container space-2">
                        <div class="row">
                          <div class="col-lg-6 mb-9 mb-lg-0">
                            <div class="mb-5">
                              <h1 class="display-4">Get in touch</h1>
                              <p>We'd love to talk about how we can help you.</p>
                            </div>

                            <!-- Leaflet -->
                            <div id="mapExample2" class="min-h-300rem mb-5"
                                 data-hs-leaflet-options='{
                                   "map": {
                                     "scrollWheelZoom": false,
                                     "coords": [37.4040344, -122.0289704]
                                   },
                                   "marker": [
                                     {
                                       "coords": [37.4040344, -122.0289704],
                                       "icon": {
                                         "iconUrl": "../assets/svg/components/map-pin.svg",
                                         "iconSize": [50, 45]
                                       },
                                       "popup": {
                                         "text": "Test text!"
                                       }
                                     }
                                   ]
                                  }'></div>
                            <!-- End Leaflet -->

                            <div class="row">
                              <div class="col-sm-6">
                                <div class="mb-3">
                                  <span class="d-block h5 mb-1">Call us:</span>
                                  <span class="d-block text-body font-size-1">+1 (062) 109-9222</span>
                                </div>

                                <div class="mb-3">
                                  <span class="d-block h5 mb-1">Email us:</span>
                                  <span class="d-block text-body font-size-1">hello@example.com</span>
                                </div>
                              </div>

                              <div class="col-sm-6">
                                <div class="mb-3">
                                  <span class="d-block h5 mb-1">Address:</span>
                                  <span class="d-block text-body font-size-1">153 Williamson Plaza, Maggieberg</span>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-lg-6">
                            <div class="ml-lg-5">
                              <!-- Form -->
                              <form class="js-validate card shadow-lg mb-4">
                                <div class="card-header border-0 bg-light text-center py-4 px-4 px-md-6">
                                  <h2 class="h4 mb-0">General Enquiries</h2>
                                </div>

                                <div class="card-body p-4 p-md-6">
                                  <div class="row">
                                    <div class="col-sm-6">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label for="firstNameExample1" class="input-label">First name</label>
                                        <input type="text" class="form-control" name="firstNameExample1" id="firstNameExample1" placeholder="Nataly" aria-label="Nataly" required
                                               data-msg="Please enter first your name">
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-6">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label for="lastNameExample1" class="input-label">Last name</label>
                                        <input type="text" class="form-control" name="lastNameExample1" id="lastNameExample1" placeholder="Gaga" aria-label="Gaga" required
                                               data-msg="Please enter last your name">
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-12">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label for="emailAddressExample1" class="input-label">Email address</label>
                                        <input type="email" class="form-control" name="emailAddressExample1" id="emailAddressExample1" placeholder="nayagaga@pixeel.com" aria-label="alex@pixeel.com" required
                                               data-msg="Please enter a valid email address">
                                      </div>
                                      <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-12">
                                      <!-- Form Group -->
                                      <div class="js-form-message form-group">
                                        <label for="message" class="input-label">Message</label>
                                        <div class="input-group">
                                          <textarea class="form-control" rows="4" name="message" id="message" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
                                                    data-msg="Please enter a reason."></textarea>
                                        </div>
                                      </div>
                                      <!-- End Form Group -->
                                    </div>
                                  </div>

                                  <button type="submit" class="btn btn-block btn-primary transition-3d-hover">Submit</button>
                                </div>
                              </form>
                              <!-- End Form -->

                              <div class="text-center">
                                <p class="small">We'll get back to you in 1-2 business days.</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Contact Form Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/leaflet/dist/leaflet.js"></script>
                      <script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.leaflet.js"></script>
                      <script src="./assets/js/hs.validation.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF LEAFLET
                          // =======================================================
                          $('#mapExample2').each(function () {
                            var leaflet = $.HSCore.components.HSLeaflet.init($(this)[0]);

                            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                              id: 'mapbox/light-v9'
                            }).addTo(leaflet);
                          });


                          // INITIALIZATION OF FORM VALIDATION
                          // =======================================================
                          $('.js-validate').each(function () {
                            var validation = $.HSCore.components.HSValidation.init($(this));
                          });
                        });
                      </script>