<section class="lg:py-20 py-14"> <div class="max-w-7xl mx-auto lg:pb-16 px-4 pb-14 lg:flex lg:items-center"> <div style="filter: drop-shadow(0px 50px 100px rgba(18, 50, 65, 0.10));" class="lg:w-[45%] bg-white lg:py-16 md:p-10 p-6 rounded-md mb-10"> <input class="w-full border border-[#BDCBCE] rounded-sm p-5 text-black focus:outline-[#002630] mb-6" type="text" id="fname" placeholder="Your Name"> <input class="w-full border border-[#BDCBCE] rounded-sm p-5 text-black focus:outline-[#002630] mb-6" type="email" id="mail" placeholder="Your Email"> <textarea class="w-full border border-[#BDCBCE] rounded-sm p-5 text-black focus:outline-[#002630] mb-8" id="message" rows="5" placeholder="Your Message"></textarea> <button class="w-full text-white font-medium text-xl bg-[#FE9100] py-4 rounded-md border border-[#FE9100] hover:bg-transparent hover:text-[#FE9100] hover:transition-all hover:duration-500 duration-500 transition-all">SUBMIT</button> </div> <div class="lg:w-[55%] lg:pl-20 lg:text-left text-center"> <h2 class="lg:text-5xl lg:pb-10 md:text-4xl text-3xl font-bold text-[#002630] leading-[1.3em] pb-3 capitalize">We're eager to receive your input.</h2> <p class="text-base font-normal text-[#002630] leading-[1.5em] pb-8 lg:pb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pellentesque elit eget gravida cum. A cras semper auctor neque vitae tempus quam. Lacus vestibulum sed arcu non odio euismod lacinia. Ac placerat vestibulum lectus mauris ultrices eros.</p> <button class="text-xl rounded-md uppercase font-bold leading-[1.4em] px-14 py-3 text-[#002630] border border-[#002630] hover:bg-[#002630] hover:text-white transition-all duration-500 hover:transition-all hover:duration-500">let’s get started</button> </div> </div> <div class="max-w-7xl mx-auto lg:pb-14 px-4 pb-10 text-center lg:text-left"> <h1 class="lg:text-5xl md:text-5xl text-4xl font-bold text-[#002630]">Find Us Anywere</h1> </div> <div> <div class="mapouter"><div class="gmap_canvas"><iframe src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" style="width: 100%; height: 600px;"></iframe><style>.mapouter{position:relative;height:600px;width:100%}.gmap_canvas{overflow:hidden;height:600px;width:100%}.gmap_canvas iframe{position:relative;z-index:2}.gmap_canvas a{top:0;z-index:0}</style><a href="https://www.eireportingonline.com">ei reporting</a></div></div> </div> </section>
<div class="max-w-7xl mx-auto px-4 py-12"> <h1 class="lg:text-6xl lg:text-left md:text-5xl text-4xl font-bold leading-[1.25em] text-[#002630] text-center lg:mb-16 mb-12">GET IN TOUCH</h1> <div class="lg:flex md:pb-8"> <div class="lg:w-2/5 mb-10"> <div class="lg:flex lg:items-center lg:space-x-4 text-center lg:mb-16 mb-10"> <div class="lg:w-[10%] lg:pb-0 pb-4"> <img class="mx-auto" src="https://ik.imagekit.io/tailwindbuddy/fi_152851_b57_hw642k.svg?updatedAt=1694604150748" alt="icon1"> </div> <div class="lg:w-[90%] lg:text-left"> <h6 class="md:text-base text-sm font-semibold leading-[1.25em] text-[#002630] uppercase lg:pb-0 pb-1">Phone Number</h6> <a href="tel:+00123345789" class="md:text-2xl text-xl font-normal leading-[1.3em] text-[#002630] inline-block">00-123 456 789</a> </div> </div> <div class="lg:flex lg:items-center lg:space-x-4 text-center"> <div class="lg:w-[10%] lg:pb-0 pb-4"> <img class="mx-auto" src="https://ik.imagekit.io/tailwindbuddy/Frame%201_0Bz6h1kDI.svg?updatedAt=1694604150877" alt="icon1"> </div> <div class="lg:w-[90%] lg:text-left"> <h6 class="md:text-base text-sm font-semibold leading-[1.25em] text-[#002630] uppercase lg:pb-0 pb-1">Email</h6> <a href="mailto:info@yoursite.com" class="md:text-2xl text-xl font-normal leading-[1.3em] text-[#002630] inline-block">info@yoursite.com</a> </div> </div> </div> <div class="mb-10"> <div class="lg:flex lg:space-x-3 text-center pb-5"> <div class="lg:w-[10%] lg:pb-0 pb-4"> <img class="mx-auto" src="https://ik.imagekit.io/tailwindbuddy/pin%20(1)%201_1ACJDIJjQ.svg?updatedAt=1694604640233" alt="icon1"> </div> <div class="lg:w-[90%] lg:text-left"> <h6 class="md:text-base text-sm font-semibold leading-[1.25em] text-[#002630] uppercase pb-1">address</h6> <h5 class="md:text-2xl text-xl font-normal leading-[1.3em] text-[#002630]">8779 WindsorSt. Fuquay Varina, NC 27526</h5> </div> </div> <div class="lg:justify-start lg:pl-14 flex justify-center space-x-4"> <img class="cursor-pointer" src="https://ik.imagekit.io/tailwindbuddy/facebook%20(6)%204_bueqLkVpn.svg?updatedAt=1694604150343" alt="fb"> <img class="cursor-pointer" src="https://ik.imagekit.io/tailwindbuddy/twitter%20(3)%204_SlAImZrwH.svg?updatedAt=1694604085725" alt="tx"> </div> </div> </div> <div style="box-shadow: 0px 50px 100px 0px rgba(18, 50, 65, 0.10);" class="text-center bg-white rounded-[36px] md:p-14 px-6 py-10"> <div class="md:flex md:space-x-6"> <input class="w-full border border-[#BDCBCE] rounded-2xl p-5 placeholder-[#002630] text-[#002630] focus:outline-[#002630] mb-6" type="text" id="fname" placeholder="First Name*"> <input class="w-full border border-[#BDCBCE] rounded-2xl p-5 placeholder-[#002630] text-[#002630] focus:outline-[#002630] mb-6" type="text" id="lname" placeholder="Last Name*"> </div> <div class="md:flex md:space-x-6"> <input class="w-full border border-[#BDCBCE] rounded-2xl placeholder-[#002630] p-5 text-[#002630] focus:outline-[#002630] mb-6" type="email" id="email" placeholder="Email Address*"> <input class="w-full border border-[#BDCBCE] rounded-2xl placeholder-[#002630] p-5 text-[#002630] focus:outline-[#002630] mb-6" type="tel" id="tel" placeholder="Phone Number*"> </div> <textarea class="w-full border border-[#BDCBCE] rounded-2xl placeholder-[#002630] p-5 text-[#002630] focus:outline-[#002630] mb-6" id="message" rows="8" placeholder="Message*"></textarea> <button class="text-white font-medium text-xl bg-[#03A9F4] py-4 px-20 rounded-full border border-[#03A9F4] hover:bg-transparent hover:text-[#03A9F4] hover:transition-all hover:duration-500 duration-500 transition-all">GET IN TOUCH</button> </div> </div>
<section> <div class="max-w-7xl mx-auto px-4 py-10 text-center lg:text-left"> <h1 class="lg:text-6xl md:text-5xl text-4xl font-bold text-[#002630]">CONTACT US</h1> </div> <div> <div class="mapouter"><div class="gmap_canvas"><iframe src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" style="width: 100%; height: 600px;"></iframe><style>.mapouter{position:relative;height:600px;width:100%}.gmap_canvas{overflow:hidden;height:600px;width:100%}.gmap_canvas iframe{position:relative;z-index:2}.gmap_canvas a{top:0;z-index:0}</style><a href="https://www.eireportingonline.com">ei reporting</a></div></div> </div> <div class="max-w-7xl mx-auto px-4 py-14 lg:flex lg:items-center"> <div class="lg:w-[55%] lg:pr-20 lg:text-left text-center pb-16"> <h2 class="lg:text-5xl lg:pb-10 md:text-4xl text-3xl font-bold text-[#002630] leading-[1.25em] pb-3 capitalize">We're eager to receive your input.</h2> <p class="text-base font-normal text-[#002630] leading-[1.5em] pb-8 lg:pb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pellentesque elit eget gravida cum. A cras semper auctor neque vitae tempus quam. Lacus vestibulum sed arcu non odio euismod lacinia. Ac placerat vestibulum lectus mauris ultrices eros.</p> <button class="text-xl rounded-md uppercase font-bold leading-[1.4em] px-14 py-3 text-[#002630] border border-[#002630] hover:bg-[#002630] hover:text-white transition-all duration-500 hover:transition-all hover:duration-500">let’s get started</button> </div> <div style="filter: drop-shadow(0px 50px 100px rgba(18, 50, 65, 0.10));" class="lg:w-[45%] bg-white lg:py-16 lg:-mt-36 z-30 md:p-10 p-6 rounded-md"> <input class="w-full border border-[#BDCBCE] rounded-sm p-5 text-black focus:outline-[#002630] mb-6" type="text" id="fname" placeholder="Your Name"> <input class="w-full border border-[#BDCBCE] rounded-sm p-5 text-black focus:outline-[#002630] mb-6" type="email" id="mail" placeholder="Your Email"> <textarea class="w-full border border-[#BDCBCE] rounded-sm p-5 text-black focus:outline-[#002630] mb-8" id="message" rows="5" placeholder="Your Message"></textarea> <button class="w-full text-white font-medium text-xl bg-[#03A9F4] py-4 rounded-md border border-[#03A9F4] hover:bg-transparent hover:text-[#03A9F4] hover:transition-all hover:duration-500 duration-500 transition-all">SUBMIT</button> </div> </div> </section>
<section class="py-12 lg:py-20"> <div class="max-w-7xl mx-auto px-4 lg:flex lg:pb-20"> <div class="mb-10 lg:mb-0 lg:w-1/2"> <div class="lg:flex lg:space-x-4 text-center lg:mb-12 mb-10"> <div class="lg:w-[10%] lg:pb-0 pb-5"> <img class="mx-auto" src="https://ik.imagekit.io/tailwindbuddy/Frame%201_tr347vLhH.svg?updatedAt=1694625926156" alt="icon1"> </div> <div class="lg:w-[90%] lg:text-left"> <h6 class="md:text-base text-sm font-semibold leading-[1.25em] text-[#002630] uppercase lg:pb-0 pb-1">Email</h6> <a href="mailto:info@yoursite.com" class="md:text-2xl text-xl font-normal leading-[1.3em] text-[#002630] inline-block">info@yoursite.com</a> </div> </div> <div class="lg:flex lg:space-x-4 text-center lg:mb-12 mb-10"> <div class="lg:w-[10%] lg:pb-0 pb-5"> <img class="mx-auto" src="https://ik.imagekit.io/tailwindbuddy/fi_152851_36AghXuW5.svg?updatedAt=1694625925949" alt="icon1"> </div> <div class="lg:w-[90%] lg:text-left"> <h6 class="md:text-base text-sm font-semibold leading-[1.25em] text-[#002630] uppercase lg:pb-0 pb-1">Phone Number</h6> <a href="tel:+00123345789" class="md:text-2xl text-xl font-normal leading-[1.3em] text-[#002630] inline-block">00-123 456 789</a> </div> </div> <div class="lg:flex lg:space-x-3 text-center lg:pb-0 pb-5"> <div class="lg:w-[10%] lg:pb-0 pb-5"> <img class="mx-auto" src="https://ik.imagekit.io/tailwindbuddy/pin%20(1)%201__jJVLvv4-.svg?updatedAt=1694625925479" alt="icon1"> </div> <div class="lg:w-[90%] lg:text-left"> <h6 class="md:text-base text-sm font-semibold leading-[1.25em] text-[#002630] uppercase pb-1">address</h6> <h5 class="md:text-2xl text-xl font-normal leading-[1.3em] text-[#002630]">8779 Windsor<br> St. Fuquay Varina, NC 27526</h5> </div> </div> </div> <div class="text-center lg:text-left lg:w-1/2"> <h2 class="lg:text-5xl lg:pb-6 md:text-4xl text-3xl font-bold text-[#002630] lg:leading-[1.3] leading-[1.3em] pb-3 uppercase">We Look Forward To Hearing From You!</h2> <p class="lg:text-xl lg:leading-[1.6em] text-base font-normal text-[#002630] leading-[1.5em] pb-8 lg:pb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pellentesque elit eget gravida cum. A cras semper auctor neque vitae tempus quam. Lacus vestibulum sed arcu non odio euismod lacinia. Ac placerat vestibulum lectus mauris ultrices eros.</p> </div> </div> <div class="mb-10"> <div class="mapouter"><div class="gmap_canvas"><iframe src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" style="width: 100%; height: 600px;"></iframe><style>.mapouter{position:relative;height:600px;width:100%}.gmap_canvas{overflow:hidden;height:600px;width:100%}.gmap_canvas iframe{position:relative;z-index:2}.gmap_canvas a{top:0;z-index:0}</style><a href="https://www.eireportingonline.com">ei reporting</a></div></div> </div> <div style="box-shadow: 0px 50px 100px 0px rgba(18, 50, 65, 0.10);" class="max-w-7xl mx-auto text-center bg-white md:p-14 px-6 py-10 mx-4 lg:-mt-56 z-20 relative"> <div class="md:flex md:space-x-6"> <input class="w-full border border-[#BDCBCE] p-4 placeholder-[#002630] text-[#002630] focus:outline-[#002630] mb-6" type="text" id="fname" placeholder="First Name*"> <input class="w-full border border-[#BDCBCE] p-4 placeholder-[#002630] text-[#002630] focus:outline-[#002630] mb-6" type="text" id="lname" placeholder="Last Name*"> </div> <div class="md:flex md:space-x-6"> <input class="w-full border border-[#BDCBCE] placeholder-[#002630] p-4 text-[#002630] focus:outline-[#002630] mb-6" type="email" id="email" placeholder="Email Address*"> <input class="w-full border border-[#BDCBCE] placeholder-[#002630] p-4 text-[#002630] focus:outline-[#002630] mb-6" type="text" id="cname" placeholder="Company Name*"> </div> <input class="w-full border border-[#BDCBCE] placeholder-[#002630] p-4 text-[#002630] focus:outline-[#002630] mb-6" type="text" id="Sub" placeholder="Subject*"> <div class="md:flex md:space-x-6"> <input class="w-full border border-[#BDCBCE] placeholder-[#002630] p-4 text-[#002630] focus:outline-[#002630] mb-6" type="tel" id="tel" placeholder="Phone Number*"> <input class="w-full border border-[#BDCBCE] placeholder-[#002630] p-4 text-[#002630] focus:outline-[#002630] mb-6" type="text" id="hno" placeholder="Street No.*"> <input class="w-full border border-[#BDCBCE] placeholder-[#002630] p-4 text-[#002630] focus:outline-[#002630] mb-6" type="text" id="Town" placeholder="Town Name*"> </div> <textarea class="w-full border border-[#BDCBCE] placeholder-[#002630] p-4 text-[#002630] focus:outline-[#002630] mb-6" id="message" rows="6" placeholder="Message*"></textarea> <button class="text-white font-medium text-xl bg-[#E8430E] py-4 px-20 border border-[#E8430E] hover:bg-transparent hover:text-[#E8430E] hover:transition-all hover:duration-500 duration-500 transition-all">SEND MESSAGE</button> </div> </section>
<section class="px-4 py-12 md:py-16 lg:py-20"> <div class="max-w-7xl mx-auto lg:flex"> <div class=""> <h2 class="lg:text-7xl uppercase lg:text-left lg:pb-24 text-5xl font-bold text-[#0063A1] text-center pb-8">Contact Us</h2> <div class="mb-14 lg:flex"> <div class="lg:w-3/5 lg:pr-40 mb-10 md:px-20 lg:px-0"> <input class="placeholder:text-lg lg:placeholder:text-3xl py-4 border-b-2 border-b-[#0063A1] w-full focus:outline-[#0063A1] focus:outline-0 mb-4 lg:mb-14" type="text" id="name" placeholder="Full Name"> <input class="placeholder:text-lg lg:placeholder:text-3xl py-4 border-b-2 border-b-[#0063A1] w-full focus:outline-[#0063A1] focus:outline-0 mb-4 lg:mb-14" type="email" id="email" placeholder="E-mail"> <input class="placeholder:text-lg lg:placeholder:text-3xl py-4 border-b-2 border-b-[#0063A1] w-full focus:outline-[#0063A1] focus:outline-0 mb-8 lg:mb-16" type="text" id="msg" placeholder="Message"> <button style="box-shadow: -1px 6px 13px 0px rgba(0, 157, 255, 0.10), -3px 23px 23px 0px rgba(0, 157, 255, 0.09), -8px 52px 31px 0px rgba(0, 157, 255, 0.05), -14px 92px 37px 0px rgba(0, 157, 255, 0.01), -22px 143px 41px 0px rgba(0, 157, 255, 0.00);" class="text-2xl font-normal text-white leading-[1.4em] bg-[#0063A1] rounded-tl-[48px] rounded-br-[48px] py-5 w-full hover:rounded-full hover:transition-all hover:duration-500">Contact Us</button> </div> <div class="lg:w-2/5"> <div class="lg:text-left text-center lg:pb-14 mb-10"> <h3 class="lg:text-3xl text-2xl font-bold text-[#0063A1]">Contact</h3> <h4 class="lg:text-3xl text-2xl font-normal text-[#0063A1]">hello@.com</h4> </div> <div class="lg:text-left text-center mb-12 lg:mb-28"> <h3 class="lg:text-3xl text-2xl font-bold text-[#0063A1]">Based in</h3> <h4 class="lg:text-3xl text-2xl font-normal text-[#0063A1]">New camp,<br> Chandigarh</h4> </div> <div class="lg:justify-start flex justify-center space-x-10"> <img class="cursor-pointer" src="https://ik.imagekit.io/tailwindbuddy/Facebook%20-%20Negative_DSFReRrwU.svg?updatedAt=1694628548684" alt="fb"> <img class="cursor-pointer" src="https://ik.imagekit.io/tailwindbuddy/Group_McnQDWX0Q.svg?updatedAt=1694628548395" alt="ins"> <img class="cursor-pointer" src="https://ik.imagekit.io/tailwindbuddy/Twitter%20-%20Negative_IyvQ-JAEt.svg?updatedAt=1694628548429" alt="tx"> </div> </div> </div> </div> <div class=""> <img class="mx-auto rounded-tl-[55px] rounded-br-[55px]" src="https://ik.imagekit.io/tailwindbuddy/woman-using-her-smartphone-while-home%201_pkDHzQuwmf.png?updatedAt=1694628549693" alt="img"> </div> </div> </section>