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

1
{{!< default}}
2

3
{{> header_contact}}
4

5
<!-- Main Content -->
6
<div class="container">
7
    <div class="row">
8
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
9
            <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>
10
            <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. -->
11
            <!-- 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! -->
12
            <!-- NOTE: To use the contact form, your site must be on a live web host with PHP! The form will not work locally! -->
13
            <form name="sentMessage" id="contactForm" novalidate>
14
                <div class="row control-group">
15
                    <div class="form-group col-xs-12 floating-label-form-group controls">
16
                        <label>Name</label>
17
                        <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
18
                        <p class="help-block text-danger"></p>
19
                    </div>
20
                </div>
21
                <div class="row control-group">
22
                    <div class="form-group col-xs-12 floating-label-form-group controls">
23
                        <label>Email Address</label>
24
                        <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
25
                        <p class="help-block text-danger"></p>
26
                    </div>
27
                </div>
28
                <div class="row control-group">
29
                    <div class="form-group col-xs-12 floating-label-form-group controls">
30
                        <label>Phone Number</label>
31
                        <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
32
                        <p class="help-block text-danger"></p>
33
                    </div>
34
                </div>
35
                <div class="row control-group">
36
                    <div class="form-group col-xs-12 floating-label-form-group controls">
37
                        <label>Message</label>
38
                        <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
39
                        <p class="help-block text-danger"></p>
40
                    </div>
41
                </div>
42
                <br>
43
                <div id="success"></div>
44
                <div class="row">
45
                    <div class="form-group col-xs-12">
46
                        <button type="submit" class="btn btn-default">Send</button>
47
                    </div>
48
                </div>
49
            </form>
50
        </div>
51
    </div>
52
</div>
53

54
<hr>

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

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

3
<ul class="nav navbar-nav navbar-right">
4
  <li>
5
    <a href="index.html">Home</a>
6
  </li>
7
  <li>
8
    <a href="about.html">About</a>
9
  </li>
10
  <li>
11
    <a href="post.html">Sample Post</a>
12
  </li>
13
  <li>
14
    <a href="contact.html">Contact</a>
15
  </li>
16
</ul>

1
<a class="navbar-brand" href="{{@blog.url}}">{{@blog.title}}</a>
2
<ul class="nav navbar-nav navbar-right">
3
  <li>
4
    <a href="{{@blog.url}}">Home</a>
5
  </li>
6
  <li>
7
    <a href="{{@blog.url}}/about">About</a>
8
  </li>
9
  <li>
10
    <a href="{{@blog.url}}/contact">Contact</a>
11
  </li>
12
</ul>

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

10
    <div class="container">
11
        <div class="row">
12
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
13
                <div class="site-heading">
14
                    <h1>{{@blog.title}}</h1>
15
                    <hr class="small">
16
                    <span class="subheading">{{@blog.description}}</span>
17
                </div>
18
            </div>
19
        </div>
20
    </div>
21
</header>

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

1
{{pagination}}
2
<!-- Pager -->
3
<ul class="pager">
4
  <li class="next">
5
    <a href="#">Older Posts &rarr;</a>
6
  </li>
7
</ul>

1
<!-- Pager -->
2
<ul class='pager'>
3
  {{#if prev}}
4
    <li class='previous'>
5
      <a href='{{page_url prev}}'>&larr; Newer Posts</a>
6
    </li>
7
  {{/if}}
8
  {{#if next}}
9
    <li class='next'>
10
      <a href='{{page_url next}}'>Older Posts &rarr;</a>
11
    </li>
12
  {{/if}}
13
</ul>

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

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