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="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<!-- 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.
<!-- 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="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<!-- 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
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="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<!-- 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-9222Email us
hello@example.comVisit 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="./assets/vendor/leaflet/dist/leaflet.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/leaflet/dist/leaflet.js"></script>
<!-- JS Front -->
<!-- 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
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="./assets/vendor/leaflet/dist/leaflet.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/leaflet/dist/leaflet.js"></script>
<script src="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<!-- 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>