Contact Sections
Contact Sections style 1
Email:
support@domain.com
Call:
+1 234 567 890
Working Time:
08.00AM to 20.00PM
Location:
Amphitheatre, Mountain View, San Francisco, CA 9321, United States
<!-- start contact -->
<div id="contact" class="relative py-20 md:py-24 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
<div class="container xl:max-w-6xl mx-auto px-4">
<!-- row -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full w-full px-4 lg:w-5/12 lg:pr-12 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".1s">
<div class="p-12 shadow rounded bg-white dark:bg-gray-800">
<!-- contact email -->
<div class="mb-6">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full w-1/6 px-4 text-center">
<!-- icon -->
<svg class="mt-2 text-3xl text-blue-700 inline-block" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><rect stroke="currentColor" x="48" y="96" width="416" height="320" rx="40" ry="40" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline stroke="currentColor" points="112 160 256 272 400 160" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<!-- <i class="text-primary icon fas fa-envelope"></i> -->
</div>
<div class="flex-shrink max-w-full w-10/12 px-4">
<p class="text-lg leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Email:</p>
<p>support@domain.com</p>
</div>
</div>
</div>
<!-- contact phone -->
<div class="mb-6">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full w-1/6 px-4 text-center">
<!-- icon -->
<svg class="mt-2 text-3xl text-blue-700 inline-block transform ltr:rotate-0 rtl:-rotate-90" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path stroke="currentColor" d="M451,374c-15.88-16-54.34-39.35-73-48.76C353.7,313,351.7,312,332.6,326.19c-12.74,9.47-21.21,17.93-36.12,14.75s-47.31-21.11-75.68-49.39-47.34-61.62-50.53-76.48,5.41-23.23,14.79-36c13.22-18,12.22-21,.92-45.3-8.81-18.9-32.84-57-48.9-72.8C119.9,44,119.9,47,108.83,51.6A160.15,160.15,0,0,0,83,65.37C67,76,58.12,84.83,51.91,98.1s-9,44.38,23.07,102.64,54.57,88.05,101.14,134.49S258.5,406.64,310.85,436c64.76,36.27,89.6,29.2,102.91,23s22.18-15,32.83-31a159.09,159.09,0,0,0,13.8-25.8C465,391.17,468,391.17,451,374Z" style="fill:none;stroke-miterlimit:10;stroke-width:32px"/></svg>
<!-- <i class="text-primary icon fas fa-phone"></i> -->
</div>
<div class="flex-shrink max-w-full w-10/12 px-4">
<p class="text-lg leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Call:</p>
<p class="mb-0">+1 234 567 890</p>
</div>
</div>
</div>
<!-- hour working -->
<div class="mb-6">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full w-1/6 px-4 text-center">
<!-- icon -->
<svg class="mt-2 text-3xl text-blue-700 inline-block" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path stroke="currentColor" d="M256,64C150,64,64,150,64,256s86,192,192,192,192-86,192-192S362,64,256,64Z" style="fill:none;stroke-miterlimit:10;stroke-width:32px"/><polyline stroke="currentColor" points="256 128 256 272 352 272" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<!-- <i class="text-primary icon fas fa-clock"></i> -->
</div>
<div class="flex-shrink max-w-full w-10/12 px-4">
<p class="text-lg leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Working Time:</p>
<p class="mb-0">08.00AM to 20.00PM</p>
</div>
</div>
</div>
<!-- address -->
<div class="mb-6">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full w-1/6 px-4 text-center">
<!-- icon -->
<svg class="mt-2 text-3xl text-blue-700 inline-block" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path stroke="currentColor" d="M313.27,124.64,198.73,51.36a32,32,0,0,0-29.28.35L56.51,127.49A16,16,0,0,0,48,141.63v295.8a16,16,0,0,0,23.49,14.14l97.82-63.79a32,32,0,0,1,29.5-.24l111.86,73a32,32,0,0,0,29.27-.11l115.43-75.94a16,16,0,0,0,8.63-14.2V74.57a16,16,0,0,0-23.49-14.14l-98,63.86A32,32,0,0,1,313.27,124.64Z" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line stroke="currentColor" x1="328" y1="128" x2="328" y2="464" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line stroke="currentColor" x1="184" y1="48" x2="184" y2="384" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<!-- <i class="text-primary icon fas fa-map-marked"></i> -->
</div>
<div class="flex-shrink max-w-full w-10/12 px-4">
<p class="text-lg leading-normal mb-2 font-semibold text-gray-800 dark:text-gray-100">Location:</p>
<p class="mb-0">Amphitheatre, Mountain View, San Francisco, CA 9321, United States</p>
</div>
</div>
</div>
<!-- maps responsive -->
<div class="relative overflow-hidden mb-6" style="padding-bottom: 75%">
<iframe class="absolute top-0 left-0 w-full h-full lazy" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1537389.2000627194!2d-105.93786665117793!3d41.18442046635789!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2sid!4v1585008753367!5m2!1sen!2sid" aria-label="Google maps" width="800" height="600" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div><!-- end maps responsive -->
</div>
</div>
<div class="flex-shrink max-w-full w-full px-4 lg:w-7/12 lg:pl-0 mt-12 lg:mt-0 wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
<div class="w-100 p-12 shadow rounded bg-white dark:bg-gray-800">
<!-- contact form -->
<form action="#">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink w-full max-w-full md:w-1/2 px-4 mb-6">
<label class="inline-block mb-2" for="name">Your Name</label>
<input type="text" name="name" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="name">
<div class="validate"></div>
</div>
<div class="flex-shrink w-full max-w-full md:w-1/2 px-4 mb-6">
<label class="inline-block mb-2" for="email">Your Email</label>
<input type="email" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="email" id="email">
<div class="validate"></div>
</div>
</div>
<div class="mb-6">
<label class="inline-block mb-2" for="subject">Subject</label>
<input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="subject" id="subject">
<div class="validate"></div>
</div>
<div class="mb-6">
<label class="inline-block mb-2" for="messages">Message</label>
<textarea class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="message" rows="10" id="messages"></textarea>
<div class="validate"></div>
</div>
<div class="text-center mb-6">
<button class="py-3 px-5 -ml-1 rounded-md leading-5 text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="ltr:mr-2 rtl:ml-2 tranform ltr:rotate-0 rtl:-rotate-90 inline-block" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></line></svg>
Send Message
</button>
</div>
</form><!-- end contact form -->
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- End contact -->
Contact Sections style 2
Contact Us
Our Maps
Working Time: Monday - Saturday: 09:00 AM - 08:00 PM
Phone Number: +1 234 5678 90
Email: Support@domain.com
<!-- start contact -->
<div id="contact" class="relative py-16 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2">
<div class="contact-area w-100 p-4">
<h3 class="text-2xl leading-normal font-semibold text-gray-800 dark:text-gray-100 mb-12 text-center">Contact Us</h3>
<!-- contact form -->
<form action="#">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink w-full max-w-full md:w-1/2 px-4 mb-6">
<label class="inline-block mb-2" for="name">Your Name</label>
<input type="text" name="name" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="name">
<div class="validate"></div>
</div>
<div class="flex-shrink w-full max-w-full md:w-1/2 px-4 mb-6">
<label class="inline-block mb-2" for="email">Your Email</label>
<input type="email" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="email" id="email">
<div class="validate"></div>
</div>
</div>
<div class="mb-6">
<label class="inline-block mb-2" for="subject">Subject</label>
<input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="subject" id="subject">
<div class="validate"></div>
</div>
<div class="mb-6">
<label class="inline-block mb-2" for="messages">Message</label>
<textarea class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="message" rows="10" id="messages"></textarea>
<div class="validate"></div>
</div>
<div class="text-center mb-6">
<button class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="ltr:mr-2 rtl:ml-2 tranform ltr:rotate-0 rtl:-rotate-90 inline-block" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></line></svg>
Send Message
</button>
</div>
</form><!-- end contact form -->
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2">
<div class="p-6">
<h3 class="text-2xl leading-normal font-semibold text-gray-800 dark:text-gray-100 mb-12 text-center">Our Maps</h3>
<!-- maps responsive -->
<div class="relative overflow-hidden mb-6" style="padding-bottom: 75%">
<iframe class="absolute top-0 left-0 w-full h-full lazy" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1537389.2000627194!2d-105.93786665117793!3d41.18442046635789!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2sid!4v1585008753367!5m2!1sen!2sid" aria-label="Google maps" width="800" height="600" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div><!-- end maps responsive -->
<p class="mb-4"><b>Working Time</b>: Monday - Saturday: 09:00 AM - 08:00 PM</p>
<p class="mb-4"><b>Phone Number</b>: +1 234 5678 90</p>
<p class="mb-4"><b>Email</b>: Support@domain.com</p>
</div>
</div>
</div>
</div>
</div><!-- End contact -->
Contact Sections style 3
Contact Us
Have questions about service, please contact us.
<!-- contact start -->
<div id="contact" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4 justify-center">
<div class="max-w-ful px-4 w-full lg:w-8/12">
<div class="bg-gray-50 border border-gray-200 dark:bg-gray-900 dark:bg-opacity-20 dark:border-gray-800 rounded-md w-full p-12">
<!-- section header -->
<header class="text-center mx-auto mb-12 lg:px-20">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Contact</span> Us</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
<p class="text-gray-600 leading-relaxed font-light text-xl mx-auto pb-2">Have questions about service, please contact us.</p>
</header><!-- end section header -->
<!-- contact form -->
<form action="#">
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink w-full max-w-full md:w-1/2 px-4 mb-6">
<label class="inline-block mb-2" for="name">Your Name</label>
<input type="text" name="name" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="name">
<div class="validate"></div>
</div>
<div class="flex-shrink w-full max-w-full md:w-1/2 px-4 mb-6">
<label class="inline-block mb-2" for="email">Your Email</label>
<input type="email" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="email" id="email">
<div class="validate"></div>
</div>
</div>
<div class="mb-6">
<label class="inline-block mb-2" for="subject">Subject</label>
<input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="subject" id="subject">
<div class="validate"></div>
</div>
<div class="mb-6">
<label class="inline-block mb-2" for="messages">Message</label>
<textarea class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="message" rows="10" id="messages"></textarea>
<div class="validate"></div>
</div>
<div class="text-center mb-6">
<button class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="ltr:mr-2 rtl:ml-2 tranform ltr:rotate-0 rtl:-rotate-90 inline-block" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></line></svg>
Send Message
</button>
</div>
</form><!-- end contact form -->
</div>
</div>
</div>
</div>
</div><!-- End contact -->