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 bg-gradient-info shadow text-center mb-4">
            <i class="fas fa-user"></i>
          </div>
          <h3>Contact us</h3>
          <p>
            For further questions, including partnership opportunities, please email hello@creative-tim.com
            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">
                  <label>First Name</label>
                  <div class="input-group mb-4">
                    <input class="form-control" placeholder="eg. Michael" aria-label="First Name..." type="text">
                  </div>
                </div>
                <div class="col-md-6 ps-2">
                  <label>Last Name</label>
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="eg. Jordan" aria-label="Last Name...">
                  </div>
                </div>
              </div>
              <div class="mb-4">
                <label>Company</label>
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="eg. Apple Inc.">
                </div>
              </div>
              <div class="mb-4">
                <label>Email Address</label>
                <div class="input-group">
                  <input type="email" class="form-control" placeholder="eg. michael@creative-tim.com">
                </div>
              </div>
              <div class="mb-4">
                <label>Phone Number</label>
                <div class="input-group mb-3">
                  <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="form-group 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 mb-4">
                    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
                    <label class="form-check-label" 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 w-100">Send Message</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact us 2

Copy
<section class="py-10 bg-gradient-dark position-relative overflow-hidden">
  <img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute start-0 top-0 h-100 z-index-1 opacity-6">
  <div class="position-absolute w-100 z-inde-1 top-0 mt-n3">
    <svg width="100%" viewBox="0 -2 1920 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>wave-down</title>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g fill="#FFFFFF" fill-rule="nonzero">
                <g id="wave-down">
                    <path d="M0,60.8320331 C299.333333,115.127115 618.333333,111.165365 959,47.8320321 C1299.66667,-15.5013009 1620.66667,-15.2062179 1920,47.8320331 L1920,156.389409 L0,156.389409 L0,60.8320331 Z" id="Path-Copy-2" transform="translate(960.000000, 78.416017) rotate(180.000000) translate(-960.000000, -78.416017) "></path>
                </g>
            </g>
        </g>
    </svg>
  </div>
  <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="lead 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">
          <div>
            <i class="fas fa-phone text-sm"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm">(+40) 772 100 200</span>
          </div>
        </div>
        <div class="d-flex p-2 text-white opacity-8">
          <div>
            <i class="fas fa-envelope text-sm"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm">hello@creative-tim.com</span>
          </div>
        </div>
        <div class="d-flex p-2 text-white opacity-8">
          <div>
            <i class="fas fa-ticket-alt text-sm"></i>
          </div>
          <div class="ps-3">
            <span class="text-sm">Open Support Ticket</span>
          </div>
        </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">
                  <label>First name</label>
                  <div class="input-group mb-4">
                    <input class="form-control" placeholder="eg. William" aria-label="First Name..." type="text">
                  </div>
                </div>
                <div class="col-md-6 ps-2">
                  <label>Last name</label>
                  <div class="input-group mb-4">
                    <input type="text" class="form-control" placeholder="eg. Smith" aria-label="Last Name...">
                  </div>
                </div>
              </div>
              <div>
                <label>Email address</label>
                <div class="input-group">
                  <input type="email" class="form-control" placeholder="will@creative-tim.com">
                </div>
              </div>
              <div class="form-group mt-4">
                <label>Your message</label>
                <textarea name="message" class="form-control" placeholder="Type here" id="message" rows="3"></textarea>
              </div>
              <div class="row">
                <div class="col-md-8">
                  <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
                    <label class="form-check-label" 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>
  <div class="position-absolute w-100 bottom-0">
    <svg width="100%" viewBox="0 -1 1920 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>wave-up</title>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(0.000000, 5.000000)" fill="#FFFFFF" fill-rule="nonzero">
                <g id="wave-up" transform="translate(0.000000, -5.000000)">
                    <path d="M0,70 C298.666667,105.333333 618.666667,95 960,39 C1301.33333,-17 1621.33333,-11.3333333 1920,56 L1920,165 L0,165 L0,70 Z"></path>
                </g>
            </g>
        </g>
    </svg>
  </div>
</section>

Contact us 3

Copy
<section class="py-7 bg-cover position-relative" style="background-image: url(&#39;../../assets/img/curved-images/curved1.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">
          <div class="icon">
            <svg width="30px" height="35px" viewBox="0 0 45 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>map-big</title>
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-2321.000000, -593.000000)" fill="#FFFFFF" fill-rule="nonzero">
                  <g transform="translate(1716.000000, 291.000000)">
                    <g id="map-big" transform="translate(605.000000, 302.000000)">
                      <polygon points="31.875 0.71625 24.375 4.46625 24.375 40.53375 31.875 36.78375"></polygon>
                      <polygon points="20.625 4.46625 13.125 0.71625 13.125 36.78375 20.625 40.53375"></polygon>
                      <path d="M9.375,0.81375 L0.909375,5.893125 C0.346875,6.230625 0,6.84 0,7.5 L0,43.125 L9.375,37.06125 L9.375,0.81375 Z" opacity="0.70186942"></path>
                      <path d="M44.090625,5.893125 L35.625,0.81375 L35.625,37.06125 L45,43.125 L45,7.5 C45,6.84 44.653125,6.230625 44.090625,5.893125 Z" opacity="0.70186942"></path>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
          </div>
          <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">
          <div class="icon">
            <?xml version="1.0" encoding="UTF-8"?>
            <svg width="30px" height="35px" viewBox="0 0 42 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>time-alarm</title>
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-2319.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
                  <g transform="translate(1716.000000, 291.000000)">
                    <g id="time-alarm" transform="translate(603.000000, 149.000000)">
                      <path
                        d="M18.8086957,4.70034783 C15.3814926,0.343541521 9.0713063,-0.410050841 4.7145,3.01715217 C0.357693695,6.44435519 -0.395898667,12.7545415 3.03130435,17.1113478 C5.53738466,10.3360568 11.6337901,5.54042955 18.8086957,4.70034783 L18.8086957,4.70034783 Z"
                        opacity="0.6"></path>
                      <path
                        d="M38.9686957,17.1113478 C42.3958987,12.7545415 41.6423063,6.44435519 37.2855,3.01715217 C32.9286937,-0.410050841 26.6185074,0.343541521 23.1913043,4.70034783 C30.3662099,5.54042955 36.4626153,10.3360568 38.9686957,17.1113478 Z"
                        opacity="0.6"></path>
                      <path
                        d="M34.3815652,34.7668696 C40.2057958,27.7073059 39.5440671,17.3375603 32.869743,11.0755718 C26.1954189,4.81358341 15.8045811,4.81358341 9.13025701,11.0755718 C2.45593289,17.3375603 1.79420418,27.7073059 7.61843478,34.7668696 L3.9753913,40.0506522 C3.58549114,40.5871271 3.51710058,41.2928217 3.79673036,41.8941824 C4.07636014,42.4955431 4.66004722,42.8980248 5.32153275,42.9456105 C5.98301828,42.9931963 6.61830436,42.6784048 6.98113043,42.1232609 L10.2744783,37.3434783 C16.5555112,42.3298213 25.4444888,42.3298213 31.7255217,37.3434783 L35.0188696,42.1196087 C35.6014207,42.9211577 36.7169135,43.1118605 37.53266,42.5493622 C38.3484064,41.9868639 38.5667083,40.8764423 38.0246087,40.047 L34.3815652,34.7668696 Z M30.1304348,25.5652174 L21,25.5652174 C20.49574,25.5652174 20.0869565,25.1564339 20.0869565,24.6521739 L20.0869565,15.5217391 C20.0869565,15.0174791 20.49574,14.6086957 21,14.6086957 C21.50426,14.6086957 21.9130435,15.0174791 21.9130435,15.5217391 L21.9130435,23.7391304 L30.1304348,23.7391304 C30.6346948,23.7391304 31.0434783,24.1479139 31.0434783,24.6521739 C31.0434783,25.1564339 30.6346948,25.5652174 30.1304348,25.5652174 Z"
                       ></path>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
          </div>
          <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 text-center pt-4">
              <h5 class="card-title text-primary text-gradient">Contact Us</h5>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 pe-2">
                  <label>First name</label>
                  <div class="input-group input-group-sm mb-4">
                    <span class="input-group-text"><i class="fas fa-user text-secondary"></i></span>
                    <input class="form-control" placeholder="First Name" type="text" >
                  </div>
                </div>
                <div class="col-md-6 ps-2">
                  <div class="form-group">
                    <label>Last name</label>
                    <div class="input-group input-group-sm mb-4">
                      <span class="input-group-text"><i class="far fa-user text-secondary"></i></span>
                      <input class="form-control" placeholder="Last Name" type="text" >
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>Email address</label>
                <div class="input-group input-group-sm mb-4">
                  <span class="input-group-text"><i class="ni ni-email-83 text-secondary"></i></span>
                  <input class="form-control" placeholder="Email" type="email" >
                </div>
              </div>
              <div class="form-group">
                <label>Your message</label>
                <textarea name="message" class="form-control form-control-sm" placeholder="Type here" id="message" rows="6"></textarea>
              </div>

              <div class="row">
                <div class="col-md-6 text-end my-auto ms-auto">
                  <button type="submit" class="btn btn-primary btn-round bg-gradient-primary 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 m-3 border-radius-xl" style="background-image: url(&#39;../../assets/img/curved-images/curved8.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 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-n7 blur border-radius-lg shadow-blur">
      <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 bg-gradient-primary shadow text-center rounded-circle">
            <svg class="mt-3" width="15px" height="15px" viewBox="0 0 45 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>map-big</title>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g transform="translate(-2321.000000, -593.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                            <g id="map-big" transform="translate(605.000000, 302.000000)">
                                <polygon points="31.875 0.71625 24.375 4.46625 24.375 40.53375 31.875 36.78375"></polygon>
                                <polygon points="20.625 4.46625 13.125 0.71625 13.125 36.78375 20.625 40.53375"></polygon>
                                <path d="M9.375,0.81375 L0.909375,5.893125 C0.346875,6.230625 0,6.84 0,7.5 L0,43.125 L9.375,37.06125 L9.375,0.81375 Z" opacity="0.70186942"></path>
                                <path d="M44.090625,5.893125 L35.625,0.81375 L35.625,37.06125 L45,43.125 L45,7.5 C45,6.84 44.653125,6.230625 44.090625,5.893125 Z" opacity="0.70186942"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
          </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 bg-gradient-primary shadow text-center rounded-circle">
            <svg class="mt-3" width="15px" height="15px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>document</title>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                            <g transform="translate(154.000000, 300.000000)">
                                <path d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
                                <path d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
          </div>
          <h5 class="mt-3 mb-1">Email</h5>
          <p class="mb-0">hello@creative-tim.com</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 bg-gradient-primary shadow text-center rounded-circle">
            <svg class="mt-3" width="15px" height="15px" viewBox="0 0 44 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>megaphone</title>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g transform="translate(-2168.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                            <g id="megaphone" transform="translate(452.000000, 300.000000)">
                              <path d="M35.7958333,0.273166667 C35.2558424,-0.0603712374 34.5817509,-0.0908856664 34.0138333,0.1925 L19.734,7.33333333 L9.16666667,7.33333333 C4.10405646,7.33333333 0,11.4373898 0,16.5 C0,21.5626102 4.10405646,25.6666667 9.16666667,25.6666667 L19.734,25.6666667 L34.0138333,32.8166667 C34.5837412,33.1014624 35.2606401,33.0699651 35.8016385,32.7334768 C36.3426368,32.3969885 36.6701539,31.8037627 36.6666942,31.1666667 L36.6666942,1.83333333 C36.6666942,1.19744715 36.3370375,0.607006911 35.7958333,0.273166667 Z"></path>
                              <path d="M38.5,11 L38.5,22 C41.5375661,22 44,19.5375661 44,16.5 C44,13.4624339 41.5375661,11 38.5,11 Z" opacity="0.601050967"></path>
                              <path d="M18.5936667,29.3333333 L10.6571667,29.3333333 L14.9361667,39.864 C15.7423448,41.6604248 17.8234451,42.4993948 19.6501416,41.764381 C21.4768381,41.0293672 22.3968823,38.982817 21.7341667,37.1286667 L18.5936667,29.3333333 Z" opacity="0.601050967"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
          </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 bg-gradient-primary shadow text-center rounded-circle">
            <svg class="mt-3" width="15px" height="15px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>ungroup</title>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g transform="translate(-2170.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                            <g id="ungroup" transform="translate(454.000000, 151.000000)">
                                <path d="M38.1818182,10.9090909 L32.7272727,10.9090909 L32.7272727,30.9090909 C32.7272727,31.9127273 31.9127273,32.7272727 30.9090909,32.7272727 L10.9090909,32.7272727 L10.9090909,38.1818182 C10.9090909,39.1854545 11.7236364,40 12.7272727,40 L38.1818182,40 C39.1854545,40 40,39.1854545 40,38.1818182 L40,12.7272727 C40,11.7236364 39.1854545,10.9090909 38.1818182,10.9090909 Z" opacity="0.6"></path>
                                <path d="M27.2727273,29.0909091 L1.81818182,29.0909091 C0.812727273,29.0909091 0,28.2781818 0,27.2727273 L0,1.81818182 C0,0.814545455 0.812727273,0 1.81818182,0 L27.2727273,0 C28.2781818,0 29.0909091,0.814545455 29.0909091,1.81818182 L29.0909091,27.2727273 C29.0909091,28.2781818 28.2781818,29.0909091 27.2727273,29.0909091 Z"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
          </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 hello@creative-tim.com
            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">
                  <label>Full Name</label>
                  <div class="input-group mb-4">
                    <input class="form-control" placeholder="Full Name" aria-label="Full Name" type="text">
                  </div>
                </div>
                <div class="col-md-6 ps-md-2">
                  <label>Email</label>
                  <div class="input-group">
                    <input type="email" class="form-control" placeholder="hello@creative-tim.com">
                  </div>
                </div>
              </div>
              <div class="form-group mb-4 mt-md-0 mt-4">
                <label>What can we help you?</label>
                <textarea name="message" class="form-control" id="message" rows="6" placeholder="Describe your problem in at least 250 characters"></textarea>
              </div>
              <div class="row">
                <div class="col-md-12 text-center">
                  <button type="submit" class="btn bg-gradient-primary 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="lead">Amy questions or remarks? Just write us a messaage!</p>
      </div>
    </div>
    <div class="row mt-5">
      <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 my-lg-3 ms-lg-3 border-radius-md">
                <img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute start-0 top-0 h-100 opacity-6">
                <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">
                    <div>
                      <i class="fas fa-phone text-sm"></i>
                    </div>
                    <div class="ps-3">
                      <span class="text-sm opacity-8">(+40) 772 100 200</span>
                    </div>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <div>
                      <i class="fas fa-envelope text-sm"></i>
                    </div>
                    <div class="ps-3">
                      <span class="text-sm opacity-8">hello@creative-tim.com</span>
                    </div>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <div>
                      <i class="fas fa-map-marker-alt text-sm"></i>
                    </div>
                    <div class="ps-3">
                      <span class="text-sm opacity-8">730 Dyonisie Wolf <br> Bucharest, RO 010458</span>
                    </div>
                  </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 p-3 ps-0">
                  <div class="row mt-4">
                    <div class="col-md-6">
                      <label>First name</label>
                      <div class="input-group mb-4">
                        <input class="form-control" placeholder="eg. Lucas" aria-label="First Name..." type="text">
                      </div>
                    </div>
                    <div class="col-md-6 ps-2">
                      <label>Last name</label>
                      <div class="input-group mb-4">
                        <input type="text" class="form-control" placeholder="eg. Jones" aria-label="Last Name...">
                      </div>
                    </div>
                  </div>
                  <div>
                    <label>Email address</label>
                    <div class="input-group mb-4">
                      <input type="email" class="form-control" placeholder="eg. lucas@creative-tim.com">
                    </div>
                  </div>
                  <label>What are you interested on?</label>
                  <div class="d-flex">
                    <div>
                      <div class="form-check me-3">
                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
                        <label class="form-check-label" for="flexRadioDefault1">
                          Design
                        </label>
                      </div>
                    </div>
                    <div>
                      <div class="form-check me-3">
                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                        <label class="form-check-label" for="flexRadioDefault2">
                          Development
                        </label>
                      </div>
                    </div>
                    <div>
                      <div class="form-check me-3">
                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3">
                        <label class="form-check-label" for="flexRadioDefault3">
                          Support
                        </label>
                      </div>
                    </div>
                    <div>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4">
                        <label class="form-check-label" for="flexRadioDefault4">
                          Other
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group mt-4">
                    <label>Your message</label>
                    <textarea name="message" class="form-control" id="message" rows="3"></textarea>
                  </div>
                  <div class="text-end">
                    <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">
                        <label>My name is</label>
                        <input class="form-control" placeholder="Full Name" type="text" >
                      </div>

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

                      <div class="col-md-12 pe-2 mb-3">
                        <div class="form-group 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 btn-round bg-gradient-primary 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/curved-images/curved5.jpg&#39;)">
              <div class="position-absolute z-index-2 w-100 h-100 top-0 start-0 d-lg-block d-none">
                <img src="../../assets/img/wave-1.svg" class="h-100 ms-n2">
              </div>
              <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-primary opacity-9"></div>
                <div class="p-5 ps-sm-8 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">
                    <div>
                      <i class="fas fa-phone text-sm"></i>
                    </div>
                    <div class="ps-3">
                      <span class="text-sm opacity-8">(+40) 772 100 200</span>
                    </div>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <div>
                      <i class="fas fa-envelope text-sm"></i>
                    </div>
                    <div class="ps-3">
                      <span class="text-sm opacity-8">hello@creative-tim.com</span>
                    </div>
                  </div>
                  <div class="d-flex p-2 text-white">
                    <div>
                      <i class="fas fa-map-marker-alt text-sm"></i>
                    </div>
                    <div class="ps-3">
                      <span class="text-sm opacity-8">Dyonisie Wolf Bucharest, RO 010458</span>
                    </div>
                  </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 bg-gradient-primary shadow text-center mb-4">
          <i class="ni ni-single-02"></i>
        </div>
        <h2>Premium Support</h2>
        <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">
          <div>
            <i class="fas fa-map text-sm"></i>
          </div>
          <div class="ps-3">
            <span>730 Dyonisie Wolf <br> Bucharest, RO 010458</span>
          </div>
        </div>
        <div class="d-flex p-2">
          <div>
            <i class="fas fa-envelope text-sm"></i>
          </div>
          <div class="ps-3">
            <span>hello@creative-tim.com</span>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-md-5">
        <div class="icon icon-shape bg-gradient-primary shadow text-center mb-4">
          <i class="ni ni-chart-pie-35"></i>
        </div>
        <h2>Free Updates</h2>
        <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">
          <div>
            <i class="fas fa-phone text-sm"></i>
          </div>
          <div class="ps-3">
            <span>(+40) 772 100 200  <br> (+40) 763 310 190</span>
          </div>
        </div>
        <div class="d-flex p-2">
          <div>
            <i class="fas fa-envelope text-sm"></i>
          </div>
          <div class="ps-3">
            <span>hello@creative-tim.com</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>