Contact Sections
Component #1
Contact us
We collaborate with ambitious brands and people. Let's chat.
<!-- Contacts -->
<div class="position-relative">
<div class="bg-primary bg-img-start" style="background-image: url(../assets/svg/components/shape-7.svg);">
<div class="container content-space-t-2 content-space-t-lg-3 content-space-b-1">
<!-- Heading -->
<div class="w-lg-50 text-center mx-lg-auto mb-7">
<span class="text-cap text-white-70">Contact us</span>
<h2 class="text-white lh-base">We collaborate with ambitious brands and people. <span class="text-warning">Let's chat.</span></h2>
</div>
<!-- End Heading -->
<div class="mx-auto" style="max-width: 35rem;">
<!-- Card -->
<div class="card zi-2">
<div class="card-body">
<!-- Form -->
<form>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormFirstNameEg1">First name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstNameEg1" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormLasttNameEg1">Last name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttNameEg1" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormWorkEmailEg1">Email address</label>
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmailEg1" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormCompanyNameEg2">Company name <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameCompanyName" id="hireUsFormCompanyNameEg2" placeholder="Htmlstream" aria-label="Htmlstream">
</div>
<!-- End Form -->
<!-- Select -->
<div class="mb-4">
<label class="form-label" for="hireUsFormBudgetEg1">Budget</label>
<select id="hireUsFormBudgetEg1" class="form-select form-select-lg" name="hireUsFormNameBudget" aria-label="Tell us about your budget">
<option selected>Tell us about your budget</option>
<option value="1">$1,000 - $10,000</option>
<option value="2">$10,000 - $20,000</option>
<option value="3">$20,000 - $30,000</option>
<option value="4">$30,000 - $40,000</option>
<option value="5">$40,000 - $50,000</option>
<option value="6">$50,000 - and more</option>
</select>
</div>
<!-- End Select -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormDetailsEg1">Details</label>
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetailsEg1" placeholder="Tell us about your project" aria-label="Tell us about your project" rows="4"></textarea>
</div>
<!-- End Form -->
<!-- Check -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="signupFormPrivacyCheckEg1" name="signupFormPrivacyCheckEg1" required data-msg="Please accept our Privacy Policy.">
<label class="form-check-label small" for="signupFormPrivacyCheckEg1"> By submitting this form I have read and acknowledged the <a href=../page-privacy.html>Privacy Policy</a></label>
</div>
<!-- End Check -->
<div class="d-grid mb-2">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
<div class="text-center">
<span class="form-text">We'll get back to you in 1-2 business days.</span>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- Shape -->
<div class="shape shape-bottom zi-1">
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
</svg>
</div>
<!-- End Shape -->
</div>
<!-- End Contacts -->
Component #2
Hire us
Whatever your goal - we will get your there.
“ It has many landing page variations to choose from, which one is always a big advantage. ”
Lida Reidy
Project Manager | Mailchimp
Fill out the form and we'll be in touch as soon as possible.
<!-- Contact Form -->
<div class="bg-dark rounded-2 mx-3 mx-xl-10" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
<div class="container-xl container-fluid content-space-1 content-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">
<!-- Info -->
<h1 class="text-white">Hire us</h1>
<p class="text-white-70">Whatever your goal - we will get your there.</p>
<!-- End Info -->
<div class="border-top border-white-10 my-5" style="max-width: 10rem;"></div>
<!-- Blockquote -->
<figure>
<div class="mb-4">
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-white.svg" alt="Logo">
</div>
<blockquote class="blockquote blockquote-light">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
<figcaption class="blockquote-footer blockquote-light">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
Lida Reidy
<span class="blockquote-footer-source">Project Manager | Mailchimp</span>
</div>
</div>
</figcaption>
</figure>
<!-- End Blockquote -->
</div>
<div class="col-lg-6">
<!-- Card -->
<div class="card card-lg">
<div class="card-body">
<div class="mb-4">
<h3 class="card-title">Fill out the form and we'll be in touch as soon as possible.</h3>
</div>
<!-- Form -->
<form>
<div class="row gx-3">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label visually-hidden" for="hireUsFormFirstNameEg2">First name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstNameEg2" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label visually-hidden" for="hireUsFormLasttNameEg2">Last name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttNameEg2" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row gx-3">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label visually-hidden" for="hireUsFormWorkEmailEg2">Email address</label>
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmailEg2" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label visually-hidden" for="hireUsFormCompanyNameEg1">Company name <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameCompanyName" id="hireUsFormCompanyNameEg1" placeholder="Htmlstream" aria-label="Htmlstream">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row gx-3">
<div class="col-sm-6">
<!-- Select -->
<div class="mb-3">
<label class="form-label visually-hidden" for="hireUsFormBudgetEg2">Budget</label>
<select id="hireUsFormBudgetEg2" class="form-select form-select-lg" name="hireUsFormNameBudget" aria-label="Budget">
<option selected>Budget</option>
<option value="1">$1,000 - $10,000</option>
<option value="2">$10,000 - $20,000</option>
<option value="3">$20,000 - $30,000</option>
<option value="4">$30,000 - $40,000</option>
<option value="5">$40,000 - $50,000</option>
<option value="6">$50,000 - and more</option>
</select>
</div>
<!-- End Select -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Select -->
<div class="mb-3">
<label class="form-label visually-hidden" for="hireUsFormCountry">Country</label>
<select id="hireUsFormCountry" class="form-select form-select-lg" name="hireUsFormNameCountry" aria-label="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 Select -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-3">
<label class="form-label visually-hidden" for="hireUsFormDetailsEg2">Details</label>
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetailsEg2" placeholder="Tell us about your project" aria-label="Tell us about your project" rows="4"></textarea>
</div>
<!-- End Form -->
<!-- Check -->
<div class="form-check small mb-4">
<input type="checkbox" class="form-check-input" id="signupFormPrivacyCheckEg2" name="signupFormPrivacyCheckEg2" required data-msg="Please accept our Privacy Policy.">
<label class="form-check-label" for="signupFormPrivacyCheckEg2"> Yes, I'd like to receive occasional marketing emails from Front. I have the right to opt out at any time. <a class="link" href="../page-privacy.html">View privacy policy.</a></label>
</div>
<!-- End Check -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
</div>
<!-- End Contact Form -->
Component #3
New York,
Brooklyn
Call us
+1 (062) 109-9222Email us
hello@example.comVisit us
153 Williamson Plaza, Maggieberg
<!-- Map -->
<div id="contactsSection" class="bg-light position-relative rounded-2 mx-3 mx-md-8">
<div class="container content-space-1 content-space-lg-3">
<div class="row justify-content-md-end">
<div class="col-md-6 col-lg-5">
<!-- Card -->
<div class="card card-lg position-relative zi-999">
<div class="card-body">
<!-- Heading -->
<div class="mb-5">
<h4 class="card-title">New York,</h4>
<h2 class="card-title h1">Brooklyn</h2>
</div>
<!-- End Heading -->
<!-- Media -->
<div class="d-flex mb-5">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary me-3">
@@include("../assets/vendor/duotone-icons/gen/gen011.svg")
</span>
</div>
<div class="flex-grow-1">
<h5 class="mb-1">Call us</h5>
<span class="d-block small">+1 (062) 109-9222</span>
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="d-flex mb-5">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary me-3">
@@include("../assets/vendor/duotone-icons/com/com012.svg")
</span>
</div>
<div class="flex-grow-1">
<h5 class="mb-1">Email us</h5>
<span class="d-block small">hello@example.com</span>
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary me-3">
@@include("../assets/vendor/duotone-icons/gen/gen018.svg")
</span>
</div>
<div class="flex-grow-1">
<h5 class="mb-1">Visit us</h5>
<span class="d-block small">153 Williamson Plaza, Maggieberg</span>
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Gmap -->
<div class="position-md-absolute top-0 start-0 bottom-0 end-0">
<div id="mapEg1" class="leaflet"
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 -->
<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>
(function() {
// INITIALIZATION OF LEAFLET
// =======================================================
const leaflet = HSCore.components.HSLeaflet.init(document.getElementById('mapEg1'))
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 #4
Tell us about yourself
Whether you have questions or you would just like to say hello, contact us.
<!-- Contact Form -->
<div class="container content-space-2 content-space-lg-3">
<div class="mx-auto" style="max-width: 35rem;">
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Heading -->
<div class="text-center mb-5 mb-md-9">
<h2>Tell us about yourself</h2>
<p>Whether you have questions or you would just like to say hello, contact us.</p>
</div>
<!-- End Heading -->
<!-- Form -->
<form>
<div class="row gx-3">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormFirstNameEg3">First name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstNameEg3" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormLasttName">Last name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttName" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row gx-3">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormWorkEmail">Email address</label>
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormPhone">Phone <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNamePhone" id="hireUsFormPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormDetails">Details</label>
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetails" placeholder="Tell us about your ..." aria-label="Tell us about your ..." rows="4"></textarea>
</div>
<!-- End Form -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
<div class="text-center">
<p class="form-text">We'll get back to you in 1-2 business days.</p>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Contact Form -->
<!-- Leaflet -->
<div class="container-fluid mb-3">
<div class="overflow-hidden">
<div id="mapEg2" class="leaflet"
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"
}
}
]
}'></div>
</div>
</div>
<!-- End Leaflet -->
<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>
(function() {
// INITIALIZATION OF LEAFLET
// =======================================================
const leaflet = HSCore.components.HSLeaflet.init(document.getElementById('mapEg2'))
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 inquiries
<!-- Contact Form -->
<div class="container content-space-t-3 content-space-t-lg-5 content-space-b-2">
<div class="row">
<div class="col-lg-6 mb-9 mb-lg-0">
<!-- Heading -->
<div class="mb-5">
<h1>Get in touch</h1>
<p>We'd love to talk about how we can help you.</p>
</div>
<!-- End Heading -->
<!-- Leaflet -->
<div class="overflow-hidden">
<div id="mapEg3" class="leaflet 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": "153 Williamson Plaza, Maggieberg"
}
}
]
}'></div>
</div>
<!-- End Leaflet -->
<div class="row">
<div class="col-sm-6">
<h5 class="mb-1">Call us:</h5>
<p>+1 (062) 109-9222</p>
</div>
<!-- End Col -->
<div class="col-sm-6">
<h5 class="mb-1">Email us:</h5>
<p>hello@example.com</p>
</div>
<!-- End Col -->
<div class="col-sm-6">
<h5 class="mb-1">Address:</h5>
<p>153 Williamson Plaza, Maggieberg</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-lg-6">
<div class="ps-lg-5">
<!-- Card -->
<div class="card">
<div class="card-header border-bottom text-center">
<h3 class="card-header-title">General inquiries</h3>
</div>
<div class="card-body">
<!-- Form -->
<form>
<div class="row gx-3">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormFirstNameEg3">First name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstNameEg3" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormLasttNameEg3">Last name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttNameEg3" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row gx-3">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormWorkEmailEg3">Email address</label>
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmailEg3" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormPhoneEg3">Phone <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNamePhone" id="hireUsFormPhoneEg3" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="hireUsFormDetails">Details</label>
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetails" placeholder="Tell us about your ..." aria-label="Tell us about your ..." rows="4"></textarea>
</div>
<!-- End Form -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
<div class="text-center">
<p class="form-text">We'll get back to you in 1-2 business days.</p>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Contact Form -->
<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>
(function() {
// INITIALIZATION OF LEAFLET
// =======================================================
const leaflet = HSCore.components.HSLeaflet.init(document.getElementById('mapEg3'))
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>