Created
March 3, 2021 16:02
-
-
Save sidwebworks/22e99735ae8194e5974921594bf8f100 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- !CONTACT --> | |
<section id="contact" class="text-gray-600 body-font relative"> | |
<div class="container mx-auto px-5 lg:px-24 py-10 my-8 flex sm:flex-nowrap flex-wrap"> | |
<div | |
class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative"> | |
<iframe width="100%" height="100%" class="absolute inset-0" frameborder="0" title="map" | |
marginheight="0" marginwidth="0" scrolling="no" | |
src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed" | |
style="filter: grayscale(1) contrast(1.2) opacity(0.4);"></iframe> | |
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md"> | |
<div class="lg:w-1/2 px-6"> | |
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2> | |
<p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p> | |
</div> | |
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0"> | |
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2> | |
<a class="text-teal leading-relaxed">[email protected]</a> | |
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2> | |
<p class="leading-relaxed">123-456-7890</p> | |
</div> | |
</div> | |
</div> | |
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0"> | |
<h2 class="text-teal text-3xl mb-1 font-bold title-font">Reach out to us!</h2> | |
<p class="leading-relaxed mb-5 text-gray-600">Post-ironic portland shabby chic echo park, banjo | |
fashion axe</p> | |
<form name='contact' method='POST'><input type='hidden' name='form-name' value='contact' /> | |
<div class="relative mb-4"> | |
<label for="name" class="leading-7 text-sm text-gray-600">Name</label> | |
<input required type="text" id="name" name="name" | |
class="w-full bg-white rounded border border-gray-300 focus:border-teal focus:ring-2 focus:ring-teal text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"> | |
</div> | |
<div class="relative mb-4"> | |
<label for="email" class="leading-7 text-sm text-gray-600">Email</label> | |
<input required type="email" id="email" name="email" | |
class="w-full bg-white rounded border border-gray-300 focus:border-teal focus:ring-2 focus:ring-teal text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"> | |
</div> | |
<div class="relative mb-4"> | |
<label for="message" class="leading-7 text-sm text-gray-600">Message</label> | |
<textarea required id="message" name="message" | |
class="w-full bg-white rounded border border-gray-300 focus:border-teal focus:ring-2 focus:ring-teal h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea> | |
</div> | |
<button class="cta-btn text-md" type="submit">SUBMIT | |
</button> | |
</form> | |
<p class="text-xs text-gray-500 mt-3">Chicharrones blog helvetica normcore iceland tousled brook | |
viral artisan.</p> | |
</div> | |
</div> | |
</section> | |
<!-- !CONTACT --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment