ura.design/_layouts/post.html

---
layout: default
section_id: blog
---



<div class="full">
  <div class="post single">
    {% if page.images %}
      <div class="post-header" style="background-image: url({{site.url}}/{{page.images[0]}})">
      </div>
    {% endif %}
    <div class="four spacing"></div>
    <div class="row">
      <div class="large-9 large-centered columns">
        <div class="post-content">
          <h2>{{page.title}}</h2>
          <p class='info'>
            {% if page.categories != empty %}
              <span>
                {% for cat in page.categories %}
                  <a href="#">{{cat | capitalize }}</a>
                  {% unless forloop.last %}
                      ,
                  {% endunless %}
                {% endfor %}
              </span>
              /
            {% endif %}
            <span>{{page.date | date: "%B %d, %Y" }}</span>
            /
            <span><a href="#">2 Comments</a></span>
          </p>
          {{content}}
        </div>
      </div>
    </div>
  </div>
</div>
<div class="full light-grey">
  <div class="row">
    <div class="large-9 large-centered columns">
      <h2>
        Comments
      </h2>
    </div>
  </div>
  <div class="row">
    <div class="large-9 large-centered columns">
      <div class='comments-wrapper'>
        <ul class='comments'>
          <li>
            <div class='meta'>
              <p class='avatar'>
                <img width="39" height="39" alt="" src="{{site.url}}/images/avatar.png" />
              </p>
              <p class='info'>
                <span class='name'>Amy</span>
                <span class='datetime'>October 15, 2011 at 3:30 pm</span>
                <a href='#comment-form'>Reply</a>
              </p>
            </div>
            <p>
              Dolor consectetur et dolorem distinctio beatae doloribus magni ducimus reprehenderit voluptatibus ex officia quia. cum facere est quas provident ea nam quibusdam deserunt quis. error quis nihil ad quia corrupti asperiores labore quis error ut debitis nobis iste. laborum sint qui aut asperiores numquam itaque ea illum
            </p>
          </li>
          <li>
            <div class='meta'>
              <p class='avatar'>
                <img width="39" height="39" alt="" src="{{site.url}}/images/avatar.png" />
              </p>
              <p class='info'>
                <span class='name'>Amy</span>
                <span class='datetime'>October 15, 2011 at 3:30 pm</span>
                <a href='#comment-form'>Reply</a>
              </p>
            </div>
            <p>Quam cumque magni voluptas. possimus neque in voluptates.</p>
            <ul class='children'>
              <li>
                <div class='meta'>
                  <p class='avatar'>
                    <img width="39" height="39" alt="" src="{{site.url}}/images/avatar.png" />
                  </p>
                  <p class='info'>
                    <span class='name'>Amy</span>
                    <span class='datetime'>October 15, 2011 at 3:30 pm</span>
                    <a href='#comment-form'>Reply</a>
                  </p>
                </div>
                <p>Quas ut vel nobis veniam explicabo consequatur. iusto nisi eius iure voluptas perferendis omnis quod excepturi et eum. sed porro tenetur ut unde suscipit optio ipsum molestiae</p>
              </li>
            </ul>
          </li>
          <li>
            <div class='meta'>
              <p class='avatar'>
                <img width="39" height="39" alt="" src="{{site.url}}/images/avatar.png" />
              </p>
              <p class='info'>
                <span class='name'>Amy</span>
                <span class='datetime'>October 15, 2011 at 3:30 pm</span>
                <a href='#comment-form'>Reply</a>
              </p>
            </div>
            <p>Saepe laudantium ipsum labore dolorum officia et odio debitis et. consequatur non veniam deserunt rerum nihil sint est</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="full">
  <div class="row">
    <div class="large-9 large-centered columns">
      <h2>
        Your comments
      </h2>
    </div>
  </div>
  <div class="row">
    <div class="large-9 large-centered columns">
      <div class='two spacing'></div>
      <div id='comments-form'>
        <form class="dark" accept-charset='UTF-8' action='#' method='post'>
          <p class='name'>
            <input class='input-text required' id='name' name='name' type='text' placeholder='Name'>
          </p>
          <p class='email'>
            <input class='input-text required' id='email' name='email' type='text' placeholder='Email'>
          </p>
          <p class='message'>
            <textarea class='required' id='message' name='message' placeholder='Message'></textarea>
          </p>
          <div class='spacing'></div>
          <p>
            <input class='button boxed small' type='submit' value='Send Message'>
          </p>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="full light-grey">
  <nav class='wrapper'>
    <div class="row">
      <div class="small-6 columns">
        {% if page.previous.url %}
          <a class="previous button boxed black" href='{{page.previous.url}}'>
            <i class='fa fa-angle-left'></i> Previous post
          </a>
        {% endif %}

      </div>
      <div class="small-6 columns">
        {% if page.next.url %}
          <a class="next button boxed black" href='{{page.next.url}}'>
            Next post<i class='fa fa-angle-right'></i>
          </a>
        {% endif %}
      </div>
    </div>
  </nav>
</div>