contacts.html

<!DOCTYPE html>
<html lang="en" class="no-js">
  <!-- Head -->
  <head>
    <title>Contacts | Stream - UI Kit</title>

    <!-- Meta -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="keywords" content="Bootstrap Theme, Freebies, UI Kit, MIT license">
    <meta name="description" content="Stream - UI Kit">
    <meta name="author" content="htmlstream.com">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <!-- Web Fonts -->
    <link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700%7COpen+Sans:300,400,600,700" rel="stylesheet">

    <!-- Web Fonts -->
    <link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700%7COpen+Sans:300,400,600,700" rel="stylesheet">

    <!-- Bootstrap Styles -->
    <link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap/css/bootstrap.css">

    <!-- Components Vendor Styles -->
    <link rel="stylesheet" type="text/css" href="assets/vendors/font-awesome/css/fontawesome-all.min.css">

    <!-- Theme Styles -->
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
  </head>
  <!-- End Head -->

  <body>
    <!-- Header -->
    <header>
      <!-- Navbar -->
      <nav class="js-navbar-scroll navbar fixed-top navbar-expand-lg navbar-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html">
            <img src="assets/img/logo-white.png" alt="Stream UI Kit" style="width: 100px;">
          </a>

          <button class="navbar-toggler" type="button"
                  data-toggle="collapse"
                  data-target="#navbarTogglerDemo"

                  aria-controls="navbarTogglerDemo"
                  aria-expanded="false"
                  aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo">
            <ul class="navbar-nav mt-2 mt-lg-0">
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link active" href="index.html">Back to UI Kit</a>
              </li>
            </ul>

            <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="home-page.html">Home</a>
              </li>
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="services.html">Services</a>
              </li>
              <li class="nav-item dropdown mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  About <i class="fas fa-angle-down small ml-1"></i>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="about-us.html">About Us</a>
                  <a class="dropdown-item" href="about-me.html">About Me</a>
                </div>
              </li>
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link active" href="contacts.html">Contacts</a>
              </li>
            </ul>
            <div>
              <a class="btn btn-primary" data-toggle="modal" href="#callUsModal">
                <i class="fas fa-phone-square mr-1"></i> Call Me
              </a>
            </div>
          </div>
        </div>
      </nav>
      <!-- End Navbar -->

      <!-- Promo Block -->
      <section class="js-parallax u-promo-block u-promo-block--mheight-500 u-overlay u-overlay--dark text-white" style="background-image: url(assets/img-temp/1920x1080/img7.jpg);">
        <!-- Promo Content -->
        <div class="container u-overlay__inner u-ver-center u-content-space">
          <div class="row justify-content-center">
            <div class="col-12">
              <div class="text-center">
                <h1 class="display-sm-4 display-lg-3">Got a Question?</h1>
                <p class="h6 text-uppercase u-letter-spacing-sm mb-0">It is good to meet you</p>
              </div>
            </div>
          </div>
        </div>
        <!-- End Promo Content -->
      </section>
      <!-- End Promo Block -->
    </header>
    <!-- End Header -->

    <main role="main">
      <!-- Icon Block -->
      <section class="container-fluid">
        <div class="row text-center u-icon-block">
          <!-- Icon Block Column -->
          <div class="col-lg-4 u-icon-block__col">
            <span class="u-icon u-icon-primary u-icon--size--xl rounded-circle mb-4">
              <span class="fas fa-map u-icon__inner text-white"></span>
            </span>
            <h3 class="h5">Address</h3>
            <p class="mb-0">61 Oxford str., London, 3DG</p>
          </div>
          <!-- End Icon Block Column -->

          <!-- Icon Block Column -->
          <div class="col-lg-4 u-icon-block__col u-icon-block__col--left-brd">
            <span class="u-icon u-icon-primary u-icon--size--xl rounded-circle mb-4">
              <span class="fas fa-mobile u-icon__inner text-white"></span>
            </span>
            <h3 class="h5">Phone Number</h3>
            <p class="mb-0">1-800-643-4500</p>
          </div>
          <!-- End Icon Block Column -->

          <!-- Icon Block Column -->
          <div class="col-lg-4 u-icon-block__col u-icon-block__col--left-brd">
            <span class="u-icon u-icon-primary u-icon--size--xl rounded-circle mb-4">
              <span class="fas fa-envelope-open u-icon__inner text-white"></span>
            </span>
            <h3 class="h5">Email</h3>
            <p class="mb-0">mail@htmlstream.com</p>
          </div>
          <!-- End Icon Block Column -->
        </div>
      </section>
      <!-- End Icon Block -->

      <!-- Contact Form -->
      <section class="u-content-space">
        <div class="container">
          <header class="text-center w-md-50 mx-auto mb-8">
            <h2 class="h1">Tell us about yourself</h2>
            <p class="h5">Your business needs a little push. We strive to figure out ways to help your audience grow.</p>
          </header>

          <form class="text-center w-md-75 mx-auto" action="#">
            <div class="row">
              <div class="col-lg-6 form-group mb-4">
                <input class="form-control form-control-lg" placeholder="Name" type="text">
              </div>

              <div class="col-lg-6 form-group mb-4">
                <input class="form-control form-control-lg" placeholder="Email" type="email">
              </div>

              <div class="col-lg-6 form-group mb-4">
                <input class="form-control form-control-lg" placeholder="Subject" type="text">
              </div>

              <div class="col-lg-6 form-group mb-4">
                <input class="form-control form-control-lg" placeholder="Phone" type="tel">
              </div>

              <div class="col-lg-12 form-group mb-6">
                <textarea class="form-control form-control-lg" rows="7" placeholder="Message"></textarea>
              </div>
            </div>

            <div class="text-center">
              <button class="btn btn-lg btn-primary py-3 px-4" type="submit">Send Your Message</button>
            </div>
          </form>
        </div>
      </section>
      <!-- End Contact Form -->
    </main>

    <!-- Footer -->
    <footer class="bg-dark py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-8 text-center text-md-left mb-3 mb-md-0">
            <small class="text-white">&copy; 2018 <a class="text-white" href="https://htmlstream.com">Htmlstream</a>. All Rights Reserved.</small>
          </div>

          <div class="col-md-4 align-self-center">
            <ul class="list-inline text-center text-md-right mb-0">
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Facebook">
                <a class="text-white" target="_blank" href="https://www.facebook.com/htmlstream">
                  <i class="fab fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Instagram">
                <a class="text-white" target="_blank" href="https://www.instagram.com/htmlstream">
                  <i class="fab fa-instagram"></i>
                </a>
              </li>
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Twitter">
                <a class="text-white" target="_blank" href="https://twitter.com/htmlstream">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Dribbble">
                <a class="text-white" target="_blank" href="https://dribbble.com/htmlstream">
                  <i class="fab fa-dribbble"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <!-- End Footer -->

    <!-- Call Us Modal Window -->
    <div class="modal fade" id="callUsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <form action="#">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">We'll call you</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group mb-4">
                <input type="text" class="form-control" id="modalName" placeholder="Your Name">
              </div>
              <div class="form-group mb-4">
                <input type="tel" class="form-control" id="modalPhone" placeholder="Your Phone Number">
              </div>
              <div class="text-right">
                <button type="submit" class="btn btn-primary">Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- End Call Us Modal Window -->

    <!-- JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
    <!-- Global Vendor -->
    <script src="assets/vendors/jquery.min.js"></script>
    <script src="assets/vendors/jquery.migrate.min.js"></script>
    <script src="assets/vendors/popper.min.js"></script>
    <script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>

    <!-- Components Vendor  -->
    <script src="assets/vendors/jquery.parallax.js"></script>

    <!-- Theme Settings and Calls -->
    <script src="assets/js/global.js"></script>

    <!-- Theme Components and Settings -->
    <script src="assets/js/vendors/parallax.js"></script>
    <!-- END JAVASCRIPTS -->
  </body>
  <!-- End Body -->
</html>