Contact Sections

Contact us 1

Copy
<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8 mx-auto text-center">
        <div class="ms-3 mb-md-5">
          <div class="icon icon-shape icon-md bg-gradient-info shadow-info mx-auto text-center mb-4">
            <i class="material-symbols-rounded opacity-10">person</i>
          </div>
          <h3>Contact us</h3>
          <p>
            For further questions, including partnership opportunities, please email [email protected]
            or contact using our contact form.
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <div class="card card-plain">
          <form id="contact-form" method="post" autocomplete="off">
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="input-group input-group-static mb-4">
                    <label>First Name</label>
                    <input class="form-control" placeholder="eg. Michael" aria-label="First Name..." type="text">
                  </div>
                </div>
                <div class="col-md-6 ps-2">
                  <div class="input-group input-group-static">
                    <label>Last Name</label>
                    <input type="text" class="form-control" placeholder="eg. Jordan" aria-label="Last Name...">
                  </div>
                </div>
              </div>
              <div class="mb-4">
                <div class="input-group input-group-static">
                  <label>Company</label>
                  <input type="text" class="form-control" placeholder="eg. Apple Inc.">
                </div>
              </div>
              <div class="mb-4">
                <div class="input-group input-group-static">
                  <label>Email Address</label>
                  <input type="email" class="form-control" placeholder="eg. [email protected]">
                </div>
              </div>
              <div class="mb-4">
                <div class="input-group input-group-static mb-3">
                  <label>Phone Number</label>
                  <select class="input-group-text" id="inputGroupSelect01">
                    <option selected>RU</option>
                    <option value="1">EN</option>
                    <option value="2">US</option>
                    <option value="3">AR</option>
                  </select>
                  <input type="number" class="form-control ps-3" aria-label="Phone Number" placeholder="+(1111) 32322 11">
                </div>
              </div>
              <div class="input-group input-group-static mb-4">
                <label>Your message</label>
                <textarea name="message" class="form-control" placeholder="Type here" id="message" rows="6"></textarea>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-check form-switch d-flex align-items-center mb-4">
                    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
                    <label class="form-check-label mb-0 ms-3" for="flexSwitchCheckDefault">I agree to the <a href="javascript:;" class="text-dark"><u>Terms and Conditions</u></a>.</label>
                  </div>
                </div>
                <div class="col-md-12">
                  <button type="submit" class="btn bg-gradient-info float-end">Send Message</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 2

Copy
<section class="py-7 bg-gradient-dark position-relative overflow-hidden">
  <img class="position-absolute start-0 top-0 h-100 z-index-1 opacity-6" src="../../assets/img/shapes/pattern-lines.svg" alt="pattern">
  <div class="container position-relative z-index-1">
    <div class="row">
      <div class="col-lg-6 col-md-12 d-flex justify-content-center flex-column">
        <h2 class="text-white">Get in Touch</h2>
        <p class="pe-5 text-white opacity-8 z-index-1">You need more information? Check what other persons are saying about our product. They are very happy with their purchase.</p>
        <p class="mt-4 text-white opacity-8 z-index-1">730 Dyonisie Wolf <br> Bucharest, RO 010458</p>
        <div class="d-flex p-2 text-white opacity-8">
          <i class="material-symbols-rounded text-sm">call</i>
          <span class="text-sm ps-3">(+40) 772 100 200</span>
        </div>
        <div class="d-flex p-2 text-white opacity-8">
          <i class="material-symbols-rounded text-sm">email</i>
          <span class="text-sm ps-3">[email protected]</span>
        </div>
        <div class="d-flex p-2 text-white opacity-8">
          <i class="material-symbols-rounded text-sm">support</i>
          <span class="text-sm ps-3">Open Support Ticket</span>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="card mt-5 mt-lg-0">
          <form id="contact-form" method="post" autocomplete="off">
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="input-group input-group-static mb-4">
                    <label>First name</label>
                    <input class="form-control" placeholder="eg. William" aria-label="First Name..." type="text">
                  </div>
                </div>
                <div class="col-md-6 ps-2">
                  <div class="input-group input-group-static mb-4">
                    <label>Last name</label>
                    <input type="text" class="form-control" placeholder="eg. Smith" aria-label="Last Name...">
                  </div>
                </div>
              </div>
              <div>
                <div class="input-group input-group-static">
                  <label>Email address</label>
                  <input type="email" class="form-control" placeholder="[email protected]">
                </div>
              </div>
              <div class="input-group input-group-static mt-4">
                <label>Your message</label>
                <textarea name="message" class="form-control" placeholder="Type here" id="message" rows="3"></textarea>
              </div>
              <div class="row mt-3">
                <div class="col-md-8">
                  <div class="form-check form-switch d-flex align-items-center mb-2">
                    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
                    <label class="form-check-label mb-0 ms-3" for="flexSwitchCheckDefault">I agree to the <a href="javascript:;" class="text-dark text-underline">Terms and Conditions</a>.</label>
                  </div>
                </div>
                <div class="col-md-12">
                  <button type="submit" class="btn bg-gradient-info mt-3">Submit</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 3

Copy
<section class="py-7 bg-cover position-relative" style="background-image: url(&#39;../../assets/img/city-profile.jpg&#39;);">
  <div class="mask bg-gradient-dark"></div>
  <div class="container position-relative z-index-2">
    <div class="row">
      <div class="col-lg-5 my-auto">
        <h2 class="text-white">Get in Touch</h2>
        <p class="text-white text-lg mb-lg-5">You need more information? Check what other persons are saying about our product. They are very happy with their purchase.</p>
        <div class="p-3 d-flex">
          <i class="material-symbols-rounded text-3xl text-white">location_on</i>
          <div class="ms-5">
            <h5 class="text-white">Find us at the office</h5>
            <p class="text-white text-sm"> Bld Mihail Kogalniceanu, nr. 8,<br>
              7652 Bucharest,<br>
              Romania
            </p>
          </div>
        </div>
        <div class="p-3 d-flex">
          <i class="material-symbols-rounded text-3xl text-white">notifications_active</i>
          <div class="ms-5">
            <h5 class="text-white">Give us a ring</h5>
            <p class="text-white text-sm"> Michael Jordan<br>
              +40 762 321 762<br>
              Mon - Fri, 8:00-22:00
            </p>
          </div>
        </div>

      </div>
      <div class="col-lg-5 m-auto">
        <div class="card card-contact card-raised">
          <form id="contact-form1" method="post">
            <div class="card-header p-0 position-relative mt-2 mx-2 z-index-2 bg-transparent">
              <div class="bg-gradient-dark shadow-dark border-radius-lg py-3 pe-1">
                <h5 class="text-center text-white">Contact Us</h5>
              </div>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 pe-2">
                  <div class="input-group input-group-dynamic mb-4">
                    <label class="form-label">First name</label>
                    <input class="form-control" type="text" >
                  </div>
                </div>
                <div class="col-md-6 ps-2">
                  <div class="input-group input-group-dynamic mb-4">
                    <label class="form-label">Last name</label>
                    <input class="form-control" type="text" >
                  </div>
                </div>
              </div>
              <div class="input-group input-group-dynamic mb-4">
                <label class="form-label">Email address</label>
                <input class="form-control" type="email" >
              </div>
              <div class="input-group input-group-static mb-4">
                <label>Your message</label>
                <textarea name="message" class="form-control" id="message" rows="6"></textarea>
              </div>

              <div class="row">
                <div class="col-md-6 text-center m-auto">
                  <button type="submit" class="btn bg-gradient-dark mb-0">Send Message</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 4

Copy
<section class="py-7 bg-white position-relative">
  <div class="page-header min-vh-50" style="background-image: url(&#39;../../assets/img/dg1.jpg&#39;);">
    <span class="mask bg-gradient-dark opacity-4"></span>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-6 text-center mx-auto">
          <h1 class="text-white font-weight-black mt-4 mb-1">Got a question?</h1>
          <p class="lead text-white mb-6">We&#39;d like to talk more about what you need</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row mt-n5 blur border-radius-xl shadow-blur position-relative overflow-hidden">
      <div class="col-lg-3 col-md-6 col-6 position-relative my-auto">
        <div class="p-3 text-center">
          <div class="icon icon-shape icon-md bg-gradient-dark shadow-dark text-center mx-auto">
            <i class="material-symbols-rounded opacity-10">menu_book</i>
          </div>
          <h5 class="mt-3 mb-1">Address</h5>
          <p class="mb-0">12124 First Street, nr 54</p>
          <hr class="vertical dark">
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-6 position-relative my-auto">
        <div class="p-3 text-center">
          <div class="icon icon-shape icon-md bg-gradient-dark shadow-dark text-center mx-auto">
            <i class="material-symbols-rounded opacity-10">email</i>
          </div>
          <h5 class="mt-3 mb-1">Email</h5>
          <p class="mb-0">[email protected]</p>
        </div>
        <hr class="vertical dark">
      </div>
      <div class="col-lg-3 col-md-6 col-6 position-relative my-auto">
        <div class="p-3 text-center">
          <div class="icon icon-shape icon-md bg-gradient-dark shadow-dark text-center mx-auto">
            <i class="material-symbols-rounded opacity-10">call</i>
          </div>
          <h5 class="mt-3 mb-1">Phone</h5>
          <p class="mb-0">+1(424) 535 3523</p>
        </div>
        <hr class="vertical dark">
      </div>
      <div class="col-lg-3 col-md-6 col-6 position-relative my-auto">
        <div class="p-3 text-center">
          <div class="icon icon-shape icon-md bg-gradient-dark shadow-dark text-center mx-auto">
            <i class="material-symbols-rounded opacity-10">contacts</i>
          </div>
          <h5 class="mt-3 mb-1">Contact</h5>
          <p class="mb-0">Andrew Samian</p>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 5

Copy
<section class="py-7">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8 mx-auto text-center">
        <div class="ms-3 mb-md-5">
          <h3>Contact us</h3>
          <p>
            For further questions, including partnership opportunities, please email [email protected]
            or contact using our contact form.
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <div class="card card-plain">
          <form id="contact-form" method="post" autocomplete="off">
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="input-group input-group-outline mb-4">
                    <label class="form-label">Full Name</label>
                    <input class="form-control" aria-label="Full Name" type="text">
                  </div>
                </div>
                <div class="col-md-6 ps-md-2">
                  <div class="input-group input-group-outline">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control">
                  </div>
                </div>
              </div>
              <div class="input-group input-group-outline mb-4 mt-md-0 mt-4">
                <label class="form-label">What can we help you?</label>
                <textarea name="message" class="form-control" id="message" rows="6"></textarea>
              </div>
              <div class="row">
                <div class="col-md-12 text-center">
                  <button type="submit" class="btn bg-gradient-dark mt-4">Send Message</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 6

Copy
<section class="py-7 bg-gray-100 position-relative">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto text-center">
        <h2>Contact Us</h2>
        <p class="font-weight-normal">Amy questions or remarks? Just write us a messaage!</p>
      </div>
    </div>
    <div class="row mt-6">
      <div class="col-lg-10 mx-auto">
        <div class="card">
          <div class="row">
            <div class="col-lg-5 d-flex">
              <div class="bg-gradient-dark mt-n5 mb-3 ms-lg-3 border-radius-md">
                <div class="card-body p-5 position-relative">
                  <h3 class="text-white">Contact Information</h3>
                  <p class="text-white opacity-8 mb-4">Fill up the form and our Team will get back to you within 24 hours.</p>
                  <div class="d-flex p-2 text-white">
                    <i class="material-symbols-rounded text-sm">call</i>
                    <span class="text-sm opacity-8 ps-3">(+40) 772 100 200</span>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <i class="material-symbols-rounded text-sm">email</i>
                    <span class="text-sm opacity-8 ps-3">[email protected]</span>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <i class="material-symbols-rounded text-sm">location_on</i>
                    <span class="text-sm opacity-8 ps-3">730 Dyonisie Wolf <br> Bucharest, RO 010458</span>
                  </div>
                  <div class="mt-4">
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Facebook">
                      <i class="fab fa-facebook"></i>
                    </button>
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Twitter">
                      <i class="fab fa-twitter"></i>
                    </button>
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Dribbble">
                      <i class="fab fa-dribbble"></i>
                    </button>
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Instagram">
                      <i class="fab fa-instagram"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-7">
              <form id="contact-form" method="post" autocomplete="off">
                <div class="card-body position-relative">
                  <div class="row mt-4">
                    <div class="col-md-6">
                      <div class="input-group input-group-static mb-4">
                        <label>First name</label>
                        <input class="form-control" placeholder="eg. Lucas" aria-label="First Name..." type="text">
                      </div>
                    </div>
                    <div class="col-md-6 ps-2">
                      <div class="input-group input-group-static mb-4">
                        <label>Last name</label>
                        <input type="text" class="form-control" placeholder="eg. Jones" aria-label="Last Name...">
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="input-group input-group-static mb-4">
                      <label>Email address</label>
                      <input type="email" class="form-control" placeholder="eg. [email protected]">
                    </div>
                  </div>
                  <label>What are you interested on?</label>
                  <div class="d-flex">
                    <div class="form-check me-3 my-auto">
                      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
                      <label class="form-check-label mb-0 ms-0" for="flexRadioDefault1">
                        Design
                      </label>
                    </div>
                    <div class="form-check me-3 my-auto">
                      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                      <label class="form-check-label mb-0 ms-0" for="flexRadioDefault2">
                        Development
                      </label>
                    </div>
                    <div class="form-check me-3 my-auto">
                      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3">
                      <label class="form-check-label mb-0 ms-0" for="flexRadioDefault3">
                        Support
                      </label>
                    </div>
                    <div class="form-check my-auto">
                      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4">
                      <label class="form-check-label mb-0 ms-0" for="flexRadioDefault4">
                        Other
                      </label>
                    </div>
                  </div>
                  <div class="input-group input-group-static mt-4">
                    <label>Your message</label>
                    <textarea name="message" class="form-control" id="message" rows="3"></textarea>
                  </div>
                  <div class="text-end mt-4">
                    <button type="button" class="btn bg-gradient-dark mb-0">Send message</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 7

Copy
<section class="py-7">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="card overflow-hidden">
          <div class="row">
            <div class="col-lg-7">
              <form class="p-3" id="contact-form" method="post">
                <div class="card-header px-4 py-sm-5 py-3">
                  <h2>Say Hi!</h2>
                  <p class="lead"> We&#39;d like to talk with you.</p>
                </div>
                <div class="card-body pt-1">
                    <div class="row">
                      <div class="col-md-12 pe-2 mb-3">
                        <div class="input-group input-group-static">
                          <label>My name is</label>
                          <input class="form-control" placeholder="Full Name" type="text" >
                        </div>
                      </div>

                      <div class="col-md-12 pe-2 mb-3">
                        <div class="input-group input-group-static">
                          <label>I&#39;m looking for</label>
                          <input class="form-control" placeholder="What you love" type="text" >
                        </div>
                      </div>

                      <div class="col-md-12 pe-2 mb-3">
                        <div class="input-group input-group-static mb-0">
                            <label>Your message</label>
                            <textarea name="message" class="form-control" id="message" rows="6" placeholder="I want to say that..."></textarea>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-6 text-end ms-auto">
                          <button type="submit" class="btn btn-primary bg-gradient-dark mb-0">Send Message</button>
                      </div>
                    </div>
                </div>
              </form>
            </div>
            <div class="col-lg-5 position-relative bg-cover px-0" style="background-image: url(&#39;../../assets/img/examples/blog4.jpg&#39;)">
              <div class="z-index-2 text-center d-flex h-100 w-100 d-flex m-auto justify-content-center">
                <div class="mask bg-gradient-dark opacity-9"></div>
                <div class="p-5 position-relative text-start my-auto">
                  <h3 class="text-white">Contact Information</h3>
                  <p class="text-white opacity-8 mb-4">Fill up the form and our Team will get back to you within 24 hours.</p>
                  <div class="d-flex p-2 text-white">
                    <i class="material-symbols-rounded text-sm">call</i>
                    <span class="text-sm opacity-8 ps-3">(+40) 772 100 200</span>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <i class="material-symbols-rounded text-sm">email</i>
                    <span class="text-sm opacity-8 ps-3">[email protected]</span>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <i class="material-symbols-rounded text-sm">location_on</i>
                    <span class="text-sm opacity-8 ps-3">Dyonisie Wolf Bucharest, RO 010458</span>
                  </div>
                  <div class="mt-4">
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Facebook">
                      <i class="fab fa-facebook"></i>
                    </button>
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Twitter">
                      <i class="fab fa-twitter"></i>
                    </button>
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Dribbble">
                      <i class="fab fa-dribbble"></i>
                    </button>
                    <button type="button" class="btn btn-icon-only btn-link text-white btn-lg mb-0" data-toggle="tooltip" data-placement="bottom" data-original-title="Log in with Instagram">
                      <i class="fab fa-instagram"></i>
                    </button>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 8

Copy
<section class="py-7 bg-white position-relative">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-5 mb-5">
        <div class="icon icon-shape icon-md bg-gradient-dark shadow-dark text-center mb-4">
          <i class="material-symbols-rounded opacity-10">support_agent</i>
        </div>
        <h3>Premium Support</h3>
        <p class="pe-5">You need more information? Check what other persons are saying about our product. They are very happy with their purchase.</p>
        <div class="d-flex p-2 ps-0">
          <i class="material-symbols-rounded text-sm">map</i>
          <span class="ps-3">730 Dyonisie Wolf <br> Bucharest, RO 010458</span>
        </div>
        <div class="d-flex align-items-center p-2 ps-0">
          <i class="material-symbols-rounded text-sm">mail</i>
          <span class="ps-3">[email protected]</span>
        </div>
      </div>
      <div class="col-lg-6 col-md-5">
        <div class="icon icon-shape icon-md bg-gradient-dark shadow-dark text-center mb-4">
          <i class="material-symbols-rounded opacity-10">system_update_alt</i>
        </div>
        <h3>Free Updates</h3>
        <p class="pe-5">You need more information? Check what other persons are saying about our product. They are very happy with their purchase.</p>
        <div class="d-flex p-2 ps-0">
          <i class="material-symbols-rounded text-sm">call</i>
          <span class="ps-3">(+40) 772 100 200  <br> (+40) 763 310 190</span>
        </div>
        <div class="d-flex align-items-center p-2 ps-0">
          <i class="material-symbols-rounded text-sm">contact_mail</i>
          <span class="ps-3">[email protected]</span>
        </div>
      </div>
    </div>
  </div>
</section>