contact.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1, shrink-to-fit=no"
  8. />
  9. <meta name="description" content="" />
  10. <meta name="author" content="" />
  11. <title>Clean Blog - Start Bootstrap Theme</title>
  12. <!-- Bootstrap core CSS -->
  13. <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  14. <!-- Custom fonts for this template -->
  15. <link
  16. href="vendor/fontawesome-free/css/all.min.css"
  17. rel="stylesheet"
  18. type="text/css"
  19. />
  20. <link
  21. href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
  22. rel="stylesheet"
  23. type="text/css"
  24. />
  25. <link
  26. href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
  27. rel="stylesheet"
  28. type="text/css"
  29. />
  30. <!-- Custom styles for this template -->
  31. <link href="css/clean-blog.min.css" rel="stylesheet" />
  32. </head>
  33. <body>
  34. <!-- Navigation -->
  35. <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  36. <div class="container">
  37. <a class="navbar-brand" href="/">Start Bootstrap</a>
  38. <button
  39. class="navbar-toggler navbar-toggler-right"
  40. type="button"
  41. data-toggle="collapse"
  42. data-target="#navbarResponsive"
  43. aria-controls="navbarResponsive"
  44. aria-expanded="false"
  45. aria-label="Toggle navigation"
  46. >
  47. Menu
  48. <i class="fas fa-bars"></i>
  49. </button>
  50. <div class="collapse navbar-collapse" id="navbarResponsive">
  51. <ul class="navbar-nav ml-auto">
  52. <li class="nav-item">
  53. <a class="nav-link" href="/">Home</a>
  54. </li>
  55. <li class="nav-item">
  56. <a class="nav-link" href="/about">About</a>
  57. </li>
  58. <li class="nav-item">
  59. <a class="nav-link" href="/post">Sample Post</a>
  60. </li>
  61. <li class="nav-item">
  62. <a class="nav-link" href="/contact">Contact</a>
  63. </li>
  64. </ul>
  65. </div>
  66. </div>
  67. </nav>
  68. <!-- Page Header -->
  69. <header
  70. class="masthead"
  71. style="background-image: url('img/contact-bg.jpg')"
  72. >
  73. <div class="overlay"></div>
  74. <div class="container">
  75. <div class="row">
  76. <div class="col-lg-8 col-md-10 mx-auto">
  77. <div class="page-heading">
  78. <h1>Contact Me</h1>
  79. <span class="subheading">Have questions? I have answers.</span>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </header>
  85. <!-- Main Content -->
  86. <div class="container">
  87. <div class="row">
  88. <div class="col-lg-8 col-md-10 mx-auto">
  89. <p>
  90. Want to get in touch? Fill out the form below to send me a message
  91. and I will get back to you as soon as possible!
  92. </p>
  93. <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. -->
  94. <!-- WARNING: Some web hosts do not allow emails to be sent through forms to common mail hosts like Gmail or Yahoo. It's recommended that you use a private domain email address! -->
  95. <!-- To use the contact form, your site must be on a live web host with PHP! The form will not work locally! -->
  96. <form name="sentMessage" id="contactForm" novalidate>
  97. <div class="control-group">
  98. <div class="form-group floating-label-form-group controls">
  99. <label>Name</label>
  100. <input
  101. type="text"
  102. class="form-control"
  103. placeholder="Name"
  104. id="name"
  105. required
  106. data-validation-required-message="Please enter your name."
  107. />
  108. <p class="help-block text-danger"></p>
  109. </div>
  110. </div>
  111. <div class="control-group">
  112. <div class="form-group floating-label-form-group controls">
  113. <label>Email Address</label>
  114. <input
  115. type="email"
  116. class="form-control"
  117. placeholder="Email Address"
  118. id="email"
  119. required
  120. data-validation-required-message="Please enter your email address."
  121. />
  122. <p class="help-block text-danger"></p>
  123. </div>
  124. </div>
  125. <div class="control-group">
  126. <div
  127. class="form-group col-xs-12 floating-label-form-group controls"
  128. >
  129. <label>Phone Number</label>
  130. <input
  131. type="tel"
  132. class="form-control"
  133. placeholder="Phone Number"
  134. id="phone"
  135. required
  136. data-validation-required-message="Please enter your phone number."
  137. />
  138. <p class="help-block text-danger"></p>
  139. </div>
  140. </div>
  141. <div class="control-group">
  142. <div class="form-group floating-label-form-group controls">
  143. <label>Message</label>
  144. <textarea
  145. rows="5"
  146. class="form-control"
  147. placeholder="Message"
  148. id="message"
  149. required
  150. data-validation-required-message="Please enter a message."
  151. ></textarea>
  152. <p class="help-block text-danger"></p>
  153. </div>
  154. </div>
  155. <br />
  156. <div id="success"></div>
  157. <div class="form-group">
  158. <button
  159. type="submit"
  160. class="btn btn-primary"
  161. id="sendMessageButton"
  162. >
  163. Send
  164. </button>
  165. </div>
  166. </form>
  167. </div>
  168. </div>
  169. </div>
  170. <hr />
  171. <!-- Footer -->
  172. <footer>
  173. <div class="container">
  174. <div class="row">
  175. <div class="col-lg-8 col-md-10 mx-auto">
  176. <ul class="list-inline text-center">
  177. <li class="list-inline-item">
  178. <a href="#">
  179. <span class="fa-stack fa-lg">
  180. <i class="fas fa-circle fa-stack-2x"></i>
  181. <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  182. </span>
  183. </a>
  184. </li>
  185. <li class="list-inline-item">
  186. <a href="#">
  187. <span class="fa-stack fa-lg">
  188. <i class="fas fa-circle fa-stack-2x"></i>
  189. <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
  190. </span>
  191. </a>
  192. </li>
  193. <li class="list-inline-item">
  194. <a href="#">
  195. <span class="fa-stack fa-lg">
  196. <i class="fas fa-circle fa-stack-2x"></i>
  197. <i class="fab fa-github fa-stack-1x fa-inverse"></i>
  198. </span>
  199. </a>
  200. </li>
  201. </ul>
  202. <p class="copyright text-muted">
  203. Copyright &copy; Your Website 2019
  204. </p>
  205. </div>
  206. </div>
  207. </div>
  208. </footer>
  209. <!-- Bootstrap core JavaScript -->
  210. <script src="vendor/jquery/jquery.min.js"></script>
  211. <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  212. <!-- Contact Form JavaScript -->
  213. <script src="js/jqBootstrapValidation.js"></script>
  214. <script src="js/contact_me.js"></script>
  215. <!-- Custom scripts for this template -->
  216. <script src="js/clean-blog.min.js"></script>
  217. </body>
  218. </html>