สอนสร้าง Theme Ghost เพื่อไปขาย Themeforest ตอนที่ 4

{{!< default}}

{{> header_contact}}

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <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>
            <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. -->
            <!-- 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! -->
            <!-- NOTE: To use the contact form, your site must be on a live web host with PHP! The form will not work locally! -->
            <form name="sentMessage" id="contactForm" novalidate>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Name</label>
                        <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Email Address</label>
                        <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Phone Number</label>
                        <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Message</label>
                        <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <br>
                <div id="success"></div>
                <div class="row">
                    <div class="form-group col-xs-12">
                        <button type="submit" class="btn btn-default">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<hr>

<header class='intro-header' style="background-image: url('{{asset "img/home-bg.jpg"}}')">
  <div class='container'>
    <div class='row'>
      <div class='col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1'>
        <div class='page-heading'>
          <h1>Contact Me</h1>
          <hr class='small' />
          <span class='subheading'>Have questions? I have answers (maybe).</span>
        </div>
      </div>
    </div>
  </div>
</header>

<a class="navbar-brand" href="index.html">Start Bootstrap</a>

<ul class="nav navbar-nav navbar-right">
  <li>
    <a href="index.html">Home</a>
  </li>
  <li>
    <a href="about.html">About</a>
  </li>
  <li>
    <a href="post.html">Sample Post</a>
  </li>
  <li>
    <a href="contact.html">Contact</a>
  </li>
</ul>

<a class="navbar-brand" href="{{@blog.url}}">{{@blog.title}}</a>
<ul class="nav navbar-nav navbar-right">
  <li>
    <a href="{{@blog.url}}">Home</a>
  </li>
  <li>
    <a href="{{@blog.url}}/about">About</a>
  </li>
  <li>
    <a href="{{@blog.url}}/contact">Contact</a>
  </li>
</ul>

<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header"
{{#if @blog.logo}}
    style="background-image: url('{{@blog.logo}}')">
{{else}}
    style="background-image: url('assets/img/home-bg.jpg')">
{{/if}}

    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1>{{@blog.title}}</h1>
                    <hr class="small">
                    <span class="subheading">{{@blog.description}}</span>
                </div>
            </div>
        </div>
    </div>
</header>

<header class="intro-header"
{{#if image}}
    style="background-image: url('{{image}}')">
{{else}}
    style="background-image: url('{{asset "img/home-bg.jpg"}}')">
{{/if}}

{{pagination}}
<!-- Pager -->
<ul class="pager">
  <li class="next">
    <a href="#">Older Posts &rarr;</a>
  </li>
</ul>

<!-- Pager -->
<ul class='pager'>
  {{#if prev}}
    <li class='previous'>
      <a href='{{page_url prev}}'>&larr; Newer Posts</a>
    </li>
  {{/if}}
  {{#if next}}
    <li class='next'>
      <a href='{{page_url next}}'>Older Posts &rarr;</a>
    </li>
  {{/if}}
</ul>

<p class="copyright text-muted">Copyright &copy; Your Website 2014</p>

<p class='copyright text-muted'>Copyright &copy; {{@blog.title}} {{date format='YYYY'}}</p>