Notus Design System PRO by Creative Tim

Contact 1

Copied

Message us

Type in the bellow form

They say there's no future for the street rascals, nothing for them, leave them to fall. But it isn't always how you would like it to be, especially when you do nothing for yourself.

Want to work with us?

Complete this form and we will get back to you in 24 hours.

Full Name

Email

Message

<div class="w-full">
    <section class="relative block py-24 bg-blueGray-900">
       <div class="container mx-auto px-4">
          <div class="mb-12 flex flex-wrap -mx-4 justify-center">
             <div class="px-4 relative w-full lg:w-8/12 text-center">
                <span class="text-teal-500 bg-teal-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Message us</span>
                <h3 class="text-3xl font-bold mt-3 mb-1 text-white">Type in the bellow form</h3>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-white opacity-75">They say there's no future for the street rascals, nothing for them, leave them to fall. But it isn't always how you would like it to be, especially when you do nothing for yourself.</p>
             </div>
          </div>
          <div class="flex flex-wrap justify-center">
             <div class="w-full lg:w-6/12 px-4">
                <div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200">
                   <div class="flex-auto p-5 lg:p-10">
                      <h4 class="text-2xl font-semibold">Want to work with us?</h4>
                      <p class="leading-relaxed mt-1 mb-4 text-blueGray-500">Complete this form and we will get back to you in 24 hours.</p>
                      <div class="mt-8">
                         <div class="relative w-full mb-3">
                            <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Full Name</label>
                            <input placeholder="Full Name" type="text" class="px-3 py-3 placeholder-blueGray-400 text-blueGray-500 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150 border-transparent">
                         </div>
                         <div class="relative w-full mb-3">
                            <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Email</label>
                            <input placeholder="Email" type="email" class="px-3 py-3 placeholder-blueGray-400 text-blueGray-500 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150 border-transparent">
                         </div>
                         <div class="relative w-full mb-3">
                            <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Message</label>
                            <textarea placeholder="Type a message..." type="textarea" rows="4" cols="80" class="px-3 py-3 placeholder-blueGray-400 text-blueGray-500 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150 border-transparent"></textarea>
                         </div>
                      </div>
                      <div class="text-center mt-6">
                         <button class="text-xs px-4 py-2 shadow hover:shadow-md text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 rounded outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold">Send Message</button>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </section>
 </div>

Contact 2

Copied

We are here

Are you looking for answers?

You have no idea who I am. You do not know me at all. Have you ever written a song line that a full crowd would shout when you enter the stage? I do not think so.

Address

12124 First Street, nr 54

Email

[email protected]

Phone

+1(424) 535 3523

Contact

Andrew Samian

<div class="w-full">
    <div class="overflow-hidden contact-us-3 py-20">
       <div class="p-0 flex items-center relative min-h-400-px h-400-px max-h-999-px mb-50-px">
          <img alt="..." class="w-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/bg_contactus3.a17e8c4a.svg">
       </div>
       <div class="pt-12 container mx-auto px-4">
          <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-lightBlue-500">We are here</h6>
                <h2 class="text-4xl font-bold mt-0 mb-1 text-blueGray-700">Are you looking for answers?</h2>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">You have no idea who I am. You do not know me at all. Have you ever written a song line that a full crowd would shout when you enter the stage? I do not think so.</p>
             </div>
          </div>
          <div class="flex flex-wrap -mx-4 items-center justify-center -mt-6"><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"><i class="mr-1 fas fa-comment"></i> Chat with us</button></div>
          <div class="flex flex-wrap -mx-4 mt-12">
             <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 w-6/12 border-r">
                <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">Address</h4>
                   <div class="mb-4">
                      <p class="text-blueGray-500">12124 First Street, nr 54</p>
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 w-6/12 border-r">
                <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-envelope text-lg"></i>
                   </div>
                   <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Email</h4>
                   <div class="mb-4">
                      <p class="text-blueGray-500">[email protected]</p>
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 w-6/12 border-r">
                <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-mobile-alt text-lg"></i></div>
                   <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Phone</h4>
                   <div class="mb-4">
                      <p class="text-blueGray-500">+1(424) 535 3523</p>
                   </div>
                </div>
             </div>
             <div class="px-4 relative w-full lg:w-3/12 w-full md:w-6/12 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-user-circle text-lg"></i>
                   </div>
                   <h4 class="text-xl font-bold leading-tight mt-0 mb-2">Contact</h4>
                   <div class="mb-4">
                      <p class="text-blueGray-500">Andrew Samian</p>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

Contact 3

Copied

Leave a message

Tell us more about you

There are a lot of people around you that make you feel invincible, but keep in mind, that they say it only to make you smaller. You've made a few bucks, you've found your way to the market.

Your Name

Job Title

Email address

Your message

<div class="w-full">
    <div class="bg-blueGray-100">
       <div class="w-full px-16 mx-auto px-4 mt-12 mb-6 pt-16">
          <div class="flex flex-wrap -mx-4 justify-center">
             <div class="px-4 relative w-full text-center">
                <span class="text-orange-500 bg-orange-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Leave a message</span>
                <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Tell us more about you</h2>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">There are a lot of people around you that make you feel invincible, but keep in mind, that they say it only to make you smaller. You've made a few bucks, you've found your way to the market.</p>
             </div>
          </div>
       </div>
       <div class="flex flex-wrap -mx-4">
          <div class="mx-auto px-4 relative w-full md:w-6/12">
             <div class="rounded-lg p-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl z-2">
                <div class="px-4 py-5 flex-auto">
                   <div class="flex flex-wrap -mx-4">
                      <div class="px-4 relative w-full md:w-6/12">
                         <div class="pb-4">
                            <label class="inline-block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Your 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="ex: John Smith" 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="pb-4">
                            <label class="inline-block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Job Title</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-book"></i></span><input placeholder="ex: Managing Parter" 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="pb-4">
                            <label class="inline-block uppercase text-blueGray-700 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="pb-4">
                            <label class="inline-block uppercase text-blueGray-700 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="flex flex-wrap -mx-4">
                      <div class="ml-auto text-right px-4 relative w-full md:w-6/12"><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-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Contact Us</button></div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

PresentationSections

Contact

Contact 1

Type in the bellow form

Want to work with us?

Contact 2

We are here

Are you looking for answers?

Address

Email

Phone

Contact

Contact 3

Tell us more about you