orbit4-5/app/views/admin/groups/showpost.html.erb

<% content_for :page_specific_css do -%>
    <%= stylesheet_link_tag "group_show" %>
<% end -%>
<% content_for :page_specific_javascript do -%>
    <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js" %>
    <%= javascript_include_tag "group.js" %>
<% end -%>

<article class="group-post">
  <header class="group-post-meta">
    <div class="group-post-heading-wrap clearfix">
      <h2 class="group-post-title">My Awesome Post!</h2>
      <div class="group-post-avatar-wrap">
        <a class="group-post-avatar-username-toggle tool-tip-parent" href="#">
          <img class="group-post-avatar" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="">
          <span class="group-post-username tool-tip">Isaac</span>
        </a>
      </div>
    </div>
    
    <div class="group-post-sub-wrap">
      <span class="group-post-postdate">
        <i class="group-post-postdate-icon icon-time"></i> 26 March
      </span>
    </div>
  </header>
  <section class="group-post-image-wrap">
    <ul class="group-post-image-list cycle-slideshow" 
              data-cycle-slides="li" 
              data-cycle-prev=".group-post-cycle-prev" 
              data-cycle-next=".group-post-cycle-next" 
              data-cycle-fx="fade"
              data-cycle-log="false"
    > 
      <li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
      <li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
      <li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
    </ul>
    <div class="group-post-cycle-prev cycle-nav"><i class="icon-chevron-left"></i></div>
    <div class="group-post-cycle-next cycle-nav"><i class="icon-chevron-right"></i></div>
  </section>
  <section class="group-post-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt repellendus quibusdam vel dignissimos, nihil numquam ex impedit error cupiditate reprehenderit mollitia repudiandae, aliquid aut pariatur suscipit porro voluptatem magnam rem obcaecati nam et iste inventore facere. Recusandae unde natus molestias aut odit soluta quibusdam. Quidem dignissimos natus nobis expedita ea ratione quod cupiditate repellat quis iusto, nulla architecto excepturi a qui, dolores molestiae culpa voluptas! Vitae eum alias fugiat eius ab, aliquid possimus, impedit odit eaque ad magnam, molestiae natus ex. Sed placeat consectetur eveniet culpa accusamus tempora earum unde debitis dolor eum fugit minus perspiciatis veniam id quod voluptate alias minima iure ipsam, natus molestiae. Quas dicta fugit nisi aspernatur, fugiat veniam, aut commodi mollitia quam consequatur aperiam vitae odio itaque tempore error iste tempora corporis nostrum nobis accusamus. Delectus dicta, voluptatibus repellendus? Dolor consequuntur minus, mollitia, quod aspernatur suscipit et quae quam omnis obcaecati laudantium dolore nisi ab!</p>
  </section>
  <div class="group-post-attachment-wrap">
      <i class="group-post-attachment-icon icon-paper-clip"></i>
      <span class="group-post-attachments">
        <a href="#" class="btn btn-default">My-Awesome-file</a>
        <a href="#" class="btn btn-default">My-fantastic-file</a>
        <a href="#" class="btn btn-default">My-lovely-file</a>
        <a href="#" class="btn btn-default">My-stunning-file</a>
        <a href="#" class="btn btn-default">My-Awesome-file</a>
        <a href="#" class="btn btn-default">My-fantastic-file</a>
        <a href="#" class="btn btn-default">My-lovely-file</a>
        <a href="#" class="btn btn-default">My-stunning-file</a>
      </span>
  </div>
  <div class="group-post-seen-by tool-tip-parent">
    <em class="group-post-seen-by-lead">Seen by: </em>
    <span class="group-post-seen-by-name">Harry</span>
    <span class="group-post-seen-by-name">Ika</span>
    <span class="group-post-seen-by-name">Joshua</span>
    <span class="group-post-seen-by-name">Mason</span>
    <span class="group-post-seen-by-name">Tina</span>
    <span class="group-post-seen-by-name">Shelley</span>
    <span class="group-post-seen-by-name">Anna</span>
    <span class="group-post-seen-by-name">Poke</span>
    <span class="group-post-seen-by-name">Moses</span>
  </div>
  <section class="comments">
    <div class="grou-post-respond">
      <form action="">
        <h3 class="group-post-respond-title">
            Leave a comment
        </h3>
        <div class="group-post-respond-wrap">
          <label for="comment" class="screen-reader">Comment</label>
          <textarea name="comment" id="comment" class="group-post-respond-comment" cols="100" rows="2" placeholder="Your comment here."></textarea>
        </div>
        <div class="grou-post-submit-wrap">
          <input type="submit" name="submit" class="grou-post-respond-submit btn btn-primary" id="submit" value="Submit Comment">
        </div>
      </form>
    </div>

    <h3 class="group-post-comment-title">
      Comments
    </h3>
    <ol class="group-post-comment-list">
      <li class="group-post-comment">
        <div class="group-post-comment-wrap">
          <div class="group-post-comment-avatar">
            <img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
          </div>
          <div class="group-post-comment-body">
            <div class="group-post-comment-author-wrap">
              <div class="group-post-comment-author">Joshua Milton</div>
              <div class="group-post-comment-time muted">24 March</div>
            </div>
            <div class="group-post-comment-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
            </div>
          </div>
        </div>
      </li>
      <li class="group-post-comment">
        <div class="group-post-comment-wrap">
          <div class="group-post-comment-avatar">
            <img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
          </div>
          <div class="group-post-comment-body">
            <div class="group-post-comment-author-wrap">
              <div class="group-post-comment-author">Joshua Milton</div>
              <div class="group-post-comment-time muted">24 March</div>
            </div>
            <div class="group-post-comment-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
            </div>
          </div>
        </div>
      </li>
      <li class="group-post-comment">
        <div class="group-post-comment-wrap">
          <div class="group-post-comment-avatar">
            <img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
          </div>
          <div class="group-post-comment-body">
            <div class="group-post-comment-author-wrap">
              <div class="group-post-comment-author">Joshua Milton</div>
              <div class="group-post-comment-time muted">24 March</div>
            </div>
            <div class="group-post-comment-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
            </div>
          </div>
        </div>
      </li>
    </ol>
  </section>
</article>
</div>