Notus Design System PRO by Creative Tim

Contact Us 1

Copied

Get in touch

We are here to help your business

I've said what I wanted and needed to say, so you can go to your mother, since you were not there.

Find us at the office

Bld Mihail Kogalniceanu, nr. 8,

7652 Bucharest,

Romania

Give us a ring

Michael Jordan

+40 762 321 762

Mon - Fri, 8:00-22:00

Contact Us

First name

Last name

Email address

Your message

<div class="w-full">
    <div class="bg-blueGray-900 py-20" style="background-image: url('../../assets/img/illustrations/1.svg');">
       <div class="container mx-auto px-4">
          <div class="flex flex-wrap -mx-4">
             <div class="mx-auto flex justify-center flex-col text-white px-4 relative lg:w-4/12 w-full md:w-5/12">
                <div class="flex flex-wrap -mx-4 justify-start">
                   <div class="px-4 relative w-full text-left">
                      <span class="text-blueGray-500 bg-blueGray-100 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Get in touch</span>
                      <h2 class="text-4xl font-bold mt-3 mb-1 text-white">We are here to help your business</h2>
                      <p class="mt-2 mb-4 text-xl leading-relaxed text-white">I've said what I wanted and needed to say, so you can go to your mother, since you were not there.</p>
                   </div>
                </div>
                <div class="rounded text-left p-6 flex items-start">
                   <div class="bg-white rounded-full justify-center items-center inline-flex text-center w-12 h-12 text-blueGray-700"><i class="fas fa-map-marker-alt"></i></div>
                   <div class="ml-6 flex-1">
                      <h4 class="text-white text-2xl font-semibold leading-tight mt-2 mb-2">Find us at the office</h4>
                      <p class="text-white opacity-60">Bld Mihail Kogalniceanu, nr. 8,</p>
                      <p class="text-white opacity-60">7652 Bucharest,</p>
                      <p class="text-white opacity-60">Romania</p>
                   </div>
                </div>
                <div class="rounded text-left p-6 flex items-start">
                   <div class="bg-white rounded-full justify-center items-center inline-flex text-center w-12 h-12 text-blueGray-700"><i class="fas fa-mobile"></i></div>
                   <div class="ml-6 flex-1">
                      <h4 class="text-white text-2xl font-semibold leading-tight mt-2 mb-2">Give us a ring</h4>
                      <p class="text-white opacity-60">Michael Jordan</p>
                      <p class="text-white opacity-60">+40 762 321 762</p>
                      <p class="text-white opacity-60">Mon - Fri, 8:00-22:00</p>
                   </div>
                </div>
             </div>
             <div class="mx-auto px-4 relative w-full lg:w-5/12 w-full md:w-7/12">
                <div class="shadow-lg rounded-lg text-blueGray-500 ml-12 p-6 mt-12 mb-12 relative flex flex-col min-w-0 break-words bg-white w-full">
                   <h4 class="text-xl font-bold leading-tight pb-6">Contact Us</h4>
                   <div class="flex-auto">
                      <div class="flex flex-wrap -mx-4">
                         <div class="px-4 relative w-full  md:w-6/12  ">
                            <div class="mb-3 pt-0 relative">
                               <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">First name</label>
                               <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-user-circle"></i></span><input placeholder="First name..." type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
                            </div>
                         </div>
                         <div class="px-4 relative w-full  md:w-6/12  ">
                            <div class="mb-3 pt-0 relative">
                               <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Last name</label>
                               <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="far fa-id-badge"></i></span><input placeholder="Last name..." type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
                            </div>
                         </div>
                         <div class="px-4 relative w-full    ">
                            <div class="mb-3 pt-0 relative">
                               <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Email address</label>
                               <div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-envelope"></i></span><input placeholder="Email address..." type="email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div>
                            </div>
                         </div>
                         <div class="px-4 relative w-full    ">
                            <div class="mb-3 pt-0 relative">
                               <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Your message</label>
                               <div class="mb-3 pt-0"><textarea rows="6" type="textarea" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></textarea></div>
                            </div>
                         </div>
                      </div>
                      <div class="w-full text-right mt-2"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Send message</button></div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

Contact Us 2

Copied

Have you seen

All that we have been through

I've heard that people, people that are not very nice, speak about me behind my back. Is it like so, my brother? You say you know me from '95, but jokes on you, since now it is 2021.

Contact Us

Give us a ring

Alice Grace

+40 762 321 762

Mon - Fri, 8:00-17:00

Find us at

St. Michael Kog, no. 8,

7652 San Francisco,

United States

First name

Email address

<div class="w-full">
    <div class="relative py-20 overflow-hidden bg-blueGray-900">
       <div id="map" class="w-full block overflow-hidden absolute top-0 left-0 min-h-700-px h-full"></div>
       <div class="mb-12 flex flex-wrap -mx-4 justify-center">
          <div class="px-4 relative w-full lg:w-8/12 text-center">
             <h6 class="mb-2 font-bold uppercase text-pink-500">Have you seen</h6>
             <h3 class="text-3xl font-bold mt-3 mb-1 text-white">All that we have been through</h3>
             <p class="mt-2 mb-4 text-xl leading-relaxed text-white opacity-75">I've heard that people, people that are not very nice, speak about me behind my back. Is it like so, my brother? You say you know me from '95, but jokes on you, since now it is 2021.</p>
          </div>
       </div>
       <div class="px-4 relative w-full lg:w-6/12 md:w-10/12">
          <div class="py-12">
             <div class="shadow-lg rounded-lg text-blueGray-500 ml-12 p-6 mt-12 mb-12 relative flex flex-col min-w-0 break-words bg-white w-full">
                <h4 class="text-xl font-bold leading-tight pb-6">Contact Us</h4>
                <div class="flex-auto">
                   <div class="flex flex-wrap -mx-4">
                      <div class="px-4 relative w-full  md:w-6/12  ">
                         <div class="text-center py-6">
                            <div class="text-white bg-lightBlue-500 shadow-lg rounded rounded-full justify-center items-center inline-flex text-center p-2 mb-6 w-16 h-16"><i class="fas fa-phone text-lg"></i></div>
                            <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Give us a ring</h4>
                            <div class="mb-4">
                               <p class="text-blueGray-500">Alice Grace</p>
                               <p class="text-blueGray-500">+40 762 321 762</p>
                               <p class="text-blueGray-500">Mon - Fri, 8:00-17:00</p>
                            </div>
                         </div>
                      </div>
                      <div class="px-4 relative w-full  md:w-6/12  ">
                         <div class="text-center py-6">
                            <div class="text-white bg-lightBlue-500 shadow-lg rounded rounded-full justify-center items-center inline-flex text-center p-2 mb-6 w-16 h-16"><i class="fas fa-map-marker-alt text-lg"></i></div>
                            <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Find us at</h4>
                            <div class="mb-4">
                               <p class="text-blueGray-500">St. Michael Kog, no. 8,</p>
                               <p class="text-blueGray-500">7652 San Francisco,</p>
                               <p class="text-blueGray-500">United States</p>
                            </div>
                         </div>
                      </div>
                      <div class="px-4 relative w-full  md:w-6/12  ">
                         <div class="mb-3 pt-0 relative">
                            <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">First name</label>
                            <div class="mb-3 pt-0"><input placeholder="First name..." type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                         </div>
                      </div>
                      <div class="px-4 relative w-full  md:w-6/12  ">
                         <div class="mb-3 pt-0 relative">
                            <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Email address</label>
                            <div class="mb-3 pt-0"><input placeholder="Email address..." type="Email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                         </div>
                      </div>
                   </div>
                   <div class="w-full text-right mt-2"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Send Message</button></div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

Contact Us 3

Copied

They rise

A lot of people rise with claims

Leave me alone, since I know, leave me alone to live my life. Dude, I've already told you, you can go cry in your corner since you haven't eaten from my bowl.

Send us a message

Our team will reply in 2-3 business days

First name

Email address

Your message

Other contact details

Come and visit us

5th Avenue, New York

+40 (312) 563 241

[email protected]

<div class="w-full">
    <div class="py-20 relative bg-blueGray-900">
       <div id="map" class="w-full absolute max-h-700-px h-full"></div>
       <div class="container mx-auto px-4 mt-64">
          <div class="mb-12 flex flex-wrap -mx-4 justify-center">
             <div class="px-4 relative w-full lg:w-8/12 text-center">
                <h6 class="mb-2 text-lg font-bold uppercase text-teal-500">They rise</h6>
                <h2 class="text-4xl font-bold mt-0 mb-1 text-white">A lot of people rise with claims</h2>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-white opacity-75">Leave me alone, since I know, leave me alone to live my life. Dude, I've already told you, you can go cry in your corner since you haven't eaten from my bowl.</p>
             </div>
          </div>
          <div class="flex flex-wrap -mx-4">
             <div class="m-auto px-4 relative w-full">
                <div class="shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
                   <div class="flex flex-wrap">
                      <div class="p-6 relative w-full lg:w-8/12 md:w-7/12">
                         <div class="pb-4 border-b border-blueGray-300">
                            <h4 class="text-xl font-bold leading-tight mt-0">Send us a message</h4>
                            <p class="mt-1 text-blueGray-500">Our team will reply in 2-3 business days</p>
                         </div>
                         <div class="pt-6 flex-auto">
                            <div class="flex flex-wrap -mx-4">
                               <div class="px-4 relative w-full  md:w-6/12  ">
                                  <div class="mb-3 pt-0 relative">
                                     <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1 mt-2">First name</label>
                                     <div class="mb-3 pt-0"><input placeholder="First name..." type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                                  </div>
                               </div>
                               <div class="px-4 relative w-full  md:w-6/12  ">
                                  <div class="mb-3 pt-0 relative">
                                     <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1 mt-2">Email address</label>
                                     <div class="mb-3 pt-0"><input placeholder="Email address..." type="Email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                                  </div>
                               </div>
                               <div class="px-4 relative w-full    ">
                                  <div class="mb-3 pt-0 relative">
                                     <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1 mt-2">Your message</label>
                                     <div class="mb-3 pt-0"><textarea placeholder="Your message" rows="6" type="textarea" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></textarea></div>
                                  </div>
                               </div>
                            </div>
                            <div class="w-full text-center md:text-right mt-2"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-lightBlue-500 border-lightBlue-500 active:bg-lightBlue-600 active:border-lightBlue-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Send Message</button></div>
                         </div>
                      </div>
                      <div class="relative w-full lg:w-4/12 md:w-5/12">
                         <div class="bg-lightBlue-500 text-lightBlue-500 text-left h-full w-full flex items-center justify-center rounded-r-none rounded-b md:rounded-b-none md:rounded-r">
                            <div class="p-6">
                               <h4 class="text-2xl font-bold leading-tight text-center text-white">Other contact details</h4>
                               <p class="mt-1 text-white opacity-75 text-lg text-center">Come and visit us</p>
                               <div class="text-left w-full my-6 items-center flex items-center">
                                  <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-map-marker-alt"></i></div>
                                  <p class="ml-3 text-white">5th Avenue, New York</p>
                               </div>
                               <div class="text-left w-full my-6 items-center flex items-center">
                                  <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-phone"></i></div>
                                  <p class="ml-3 text-white">+40 (312) 563 241</p>
                               </div>
                               <div class="text-left w-full my-6 items-center flex items-center">
                                  <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-envelope"></i></div>
                                  <p class="ml-3 text-white">[email protected]</p>
                               </div>
                               <div class="text-left w-full my-6 items-center flex items-center">
                                  <div class="bg-white shadow-lg rounded-full justify-center items-center inline-flex text-center w-10 h-10"><i class="fas fa-headphones"></i></div>
                                  <p class="ml-3 text-white">[email protected]</p>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

PresentationSections

Blogs

Contact Us 1

We are here to help your business

Find us at the office

Give us a ring

Contact Us

Contact Us 2

Have you seen

All that we have been through

Contact Us

Give us a ring

Find us at

Contact Us 3

They rise

A lot of people rise with claims

Send us a message

Other contact details