|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + |
| 4 | +<head> |
| 5 | + |
| 6 | + <meta charset="utf-8"> |
| 7 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 8 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 9 | + <meta name="description" content=""> |
| 10 | + <meta name="author" content=""> |
| 11 | + |
| 12 | + <title>Clean Blog - Contact</title> |
| 13 | + |
| 14 | + <!-- Bootstrap Core CSS --> |
| 15 | + <link href="css/bootstrap.min.css" rel="stylesheet"> |
| 16 | + |
| 17 | + <!-- Custom CSS --> |
| 18 | + <link href="css/clean-blog.min.css" rel="stylesheet"> |
| 19 | + |
| 20 | + <!-- Custom Fonts --> |
| 21 | + <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> |
| 22 | + <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'> |
| 23 | + <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> |
| 24 | + |
| 25 | + <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> |
| 26 | + <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
| 27 | + <!--[if lt IE 9]> |
| 28 | + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> |
| 29 | + <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> |
| 30 | + <![endif]--> |
| 31 | + |
| 32 | +</head> |
| 33 | + |
| 34 | +<body> |
| 35 | + |
| 36 | + <!-- Navigation --> |
| 37 | + <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> |
| 38 | + <div class="container-fluid"> |
| 39 | + <!-- Brand and toggle get grouped for better mobile display --> |
| 40 | + <div class="navbar-header page-scroll"> |
| 41 | + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |
| 42 | + <span class="sr-only">Toggle navigation</span> |
| 43 | + <span class="icon-bar"></span> |
| 44 | + <span class="icon-bar"></span> |
| 45 | + <span class="icon-bar"></span> |
| 46 | + </button> |
| 47 | + <a class="navbar-brand" href="index.html">Start Bootstrap</a> |
| 48 | + </div> |
| 49 | + |
| 50 | + <!-- Collect the nav links, forms, and other content for toggling --> |
| 51 | + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
| 52 | + <ul class="nav navbar-nav navbar-right"> |
| 53 | + <li> |
| 54 | + <a href="index.html">Home</a> |
| 55 | + </li> |
| 56 | + <li> |
| 57 | + <a href="about.html">About</a> |
| 58 | + </li> |
| 59 | + <li> |
| 60 | + <a href="post.html">Sample Post</a> |
| 61 | + </li> |
| 62 | + <li> |
| 63 | + <a href="contact.html">Contact</a> |
| 64 | + </li> |
| 65 | + </ul> |
| 66 | + </div> |
| 67 | + <!-- /.navbar-collapse --> |
| 68 | + </div> |
| 69 | + <!-- /.container --> |
| 70 | + </nav> |
| 71 | + |
| 72 | + <!-- Page Header --> |
| 73 | + <!-- Set your background image for this header on the line below. --> |
| 74 | + <header class="intro-header" style="background-image: url('img/contact-bg.jpg')"> |
| 75 | + <div class="container"> |
| 76 | + <div class="row"> |
| 77 | + <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> |
| 78 | + <div class="page-heading"> |
| 79 | + <h1>Contact Me</h1> |
| 80 | + <hr class="small"> |
| 81 | + <span class="subheading">Have questions? I have answers (maybe).</span> |
| 82 | + </div> |
| 83 | + </div> |
| 84 | + </div> |
| 85 | + </div> |
| 86 | + </header> |
| 87 | + |
| 88 | + <!-- Main Content --> |
| 89 | + <div class="container"> |
| 90 | + <div class="row"> |
| 91 | + <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> |
| 92 | + <p>Want to get in touch with me? Fill out the form below to send me a message and I will try to get back to you within 24 hours!</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 | + <!-- NOTE: 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="row control-group"> |
| 98 | + <div class="form-group col-xs-12 floating-label-form-group controls"> |
| 99 | + <label>Name</label> |
| 100 | + <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."> |
| 101 | + <p class="help-block text-danger"></p> |
| 102 | + </div> |
| 103 | + </div> |
| 104 | + <div class="row control-group"> |
| 105 | + <div class="form-group col-xs-12 floating-label-form-group controls"> |
| 106 | + <label>Email Address</label> |
| 107 | + <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."> |
| 108 | + <p class="help-block text-danger"></p> |
| 109 | + </div> |
| 110 | + </div> |
| 111 | + <div class="row control-group"> |
| 112 | + <div class="form-group col-xs-12 floating-label-form-group controls"> |
| 113 | + <label>Phone Number</label> |
| 114 | + <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."> |
| 115 | + <p class="help-block text-danger"></p> |
| 116 | + </div> |
| 117 | + </div> |
| 118 | + <div class="row control-group"> |
| 119 | + <div class="form-group col-xs-12 floating-label-form-group controls"> |
| 120 | + <label>Message</label> |
| 121 | + <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea> |
| 122 | + <p class="help-block text-danger"></p> |
| 123 | + </div> |
| 124 | + </div> |
| 125 | + <br> |
| 126 | + <div id="success"></div> |
| 127 | + <div class="row"> |
| 128 | + <div class="form-group col-xs-12"> |
| 129 | + <button type="submit" class="btn btn-default">Send</button> |
| 130 | + </div> |
| 131 | + </div> |
| 132 | + </form> |
| 133 | + </div> |
| 134 | + </div> |
| 135 | + </div> |
| 136 | + |
| 137 | + <hr> |
| 138 | + |
| 139 | + <!-- Footer --> |
| 140 | + <footer> |
| 141 | + <div class="container"> |
| 142 | + <div class="row"> |
| 143 | + <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> |
| 144 | + <ul class="list-inline text-center"> |
| 145 | + <li> |
| 146 | + <a href="#"> |
| 147 | + <span class="fa-stack fa-lg"> |
| 148 | + <i class="fa fa-circle fa-stack-2x"></i> |
| 149 | + <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> |
| 150 | + </span> |
| 151 | + </a> |
| 152 | + </li> |
| 153 | + <li> |
| 154 | + <a href="#"> |
| 155 | + <span class="fa-stack fa-lg"> |
| 156 | + <i class="fa fa-circle fa-stack-2x"></i> |
| 157 | + <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> |
| 158 | + </span> |
| 159 | + </a> |
| 160 | + </li> |
| 161 | + <li> |
| 162 | + <a href="#"> |
| 163 | + <span class="fa-stack fa-lg"> |
| 164 | + <i class="fa fa-circle fa-stack-2x"></i> |
| 165 | + <i class="fa fa-github fa-stack-1x fa-inverse"></i> |
| 166 | + </span> |
| 167 | + </a> |
| 168 | + </li> |
| 169 | + </ul> |
| 170 | + <p class="copyright text-muted">Copyright © Your Website 2014</p> |
| 171 | + </div> |
| 172 | + </div> |
| 173 | + </div> |
| 174 | + </footer> |
| 175 | + |
| 176 | + <!-- jQuery --> |
| 177 | + <script src="js/jquery.min.js"></script> |
| 178 | + |
| 179 | + <!-- Bootstrap Core JavaScript --> |
| 180 | + <script src="js/bootstrap.min.js"></script> |
| 181 | + |
| 182 | + <!-- Custom Theme JavaScript --> |
| 183 | + <script src="js/clean-blog.min.js"></script> |
| 184 | + |
| 185 | +</body> |
| 186 | + |
| 187 | +</html> |
0 commit comments