kiso_themes 1.0.2

data/lib/generators/kiso_themes/templates/views/emails/_email_footer.html.slim

@@ -0,0 +1,15 @@
+table border: "0", cellpadding: "10", cellspacing: "0", width: "100%" 
+  tr
+    td align: "left", valign: "top" 
+      br/
+      br/
+      span.applefix style: "font-family:Arial; font-size:14px; color:#888888;" 
+        b Our Address:
+        br/
+        | My App
+        br/
+        | 123 Second Street
+        br/
+        | Anywhere Town, USA 45678
+      br/
+      br/

data/lib/generators/kiso_themes/templates/views/emails/_email_header.html.erb

@@ -0,0 +1,20 @@
+<table border="0" cellpadding="0" cellspacing="0" width="100%">
+  <tr>
+    <td align="center" valign="top">
+      <table border="0" cellpadding="10" cellspacing="0" width="100%">
+        <tr>
+          <td align="center" valign="top">
+            <br/>
+            <br/>
+            <%= link_to root_path(only_path: false), style: 'font-family:Arial; font-size:60px; color:#444444; text-decoration:none;' do %>
+            <span style="font-family:Arial; font-size:60px; color:#444444; text-decoration:none; margin-top: 20px;">My App</span>
+            <% end %>
+            <br/>
+            <br/>
+            <span style='font-family:Arial; font-weight: bold; font-size:26px; color:#444444; text-decoration:none;' ><%= message.subject %></span>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>

data/lib/generators/kiso_themes/templates/views/emails/_email_header.html.haml

@@ -0,0 +1,13 @@
+%table{border: "0", cellpadding: "0", cellspacing: "0", width: "100%"}
+  %tr
+    %td{align: "center", valign: "top"}
+      %table{border: "0", cellpadding: "10", cellspacing: "0", width: "100%"}
+        %tr
+          %td{align: "center", valign: "top"}
+            %br/
+            %br/
+            = link_to root_path(only_path: false), style: 'font-family:Arial; font-size:60px; color:#444444; text-decoration:none;' do
+              %span{style: "font-family:Arial; font-size:60px; color:#444444; text-decoration:none; margin-top: 20px;"} My App
+            %br/
+            %br/
+            %span{style: "font-family:Arial; font-weight: bold; font-size:26px; color:#444444; text-decoration:none;"}= message.subject

data/lib/generators/kiso_themes/templates/views/emails/_email_header.html.slim

@@ -0,0 +1,13 @@
+table border: "0", cellpadding: "0", cellspacing: "0", width: "100%" 
+  tr
+    td align: "center", valign: "top" 
+      table border: "0", cellpadding: "10", cellspacing: "0", width: "100%" 
+        tr
+          td align: "center", valign: "top" 
+            br/
+            br/
+            = link_to root_path(only_path: false), style: 'font-family:Arial; font-size:60px; color:#444444; text-decoration:none;' do
+              span style: "font-family:Arial; font-size:60px; color:#444444; text-decoration:none; margin-top: 20px;"  My App
+            br/
+            br/
+            span style: "font-family:Arial; font-weight: bold; font-size:26px; color:#444444; text-decoration:none;" = message.subject

data/lib/generators/kiso_themes/templates/views/frontend_pages/blog_pages/blog_archive_1.html.erb

@@ -0,0 +1,92 @@
+
+<%= content_for :js_libs, "modernizr parallax prettify" %>
+
+<main class="">
+<div class="parallax-window" data-parallax="scroll" data-speed="0.5" data-image-src="<%= asset_path("kiso_themes/stock/landscape_3.jpg") %>">
+  <div class="container">
+    <nav class="navbar navbar-landing  navbar-expand-lg">
+      <a href="javascript:" class="navbar-brand"><%= image_tag image_path("kiso_themes/pyrrmid_64.png"), width: 32, height: 32, class: "mr-2"%>PYRMID</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#standardNavbar" aria-controls="standardNavbar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="standardNavbar">
+        <ul class="nav navbar-nav ml-auto">
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">HOME</a>
+          </li>
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">ABOUT</a>
+          </li>
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">TEAM</a>
+          </li>
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">CONTACT</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+
+    <header class="text-center text-white">
+      <div class="container">
+        <h2>Your App</h2>
+        <h2 class="h4">Our Blog</h2>
+      </div>
+    </header>
+  </div>
+</div>
+
+
+</main>
+
+<article class="blog-1 blog-archive py-5">
+  <div class="col-12 col-md-8 mr-md-auto ml-md-auto">
+    <ol class="list-unstyled">
+      <li>
+        <h2 class="leading-normal mb-3">Ventolin makes me march around like Justin Brown</h2>
+        <div class="article-meta color-grey-50">
+          <%= random_avatar 40, "d-flex rounded mr-3" %>
+          <div class="media-body d-flex align-items-center">
+            <p class="m-0 media-heading"><a href="#">by John McDowall</a> in <a href="#">Rails, Front-end, Magic</a> &bull; <time>14th May 2015</time></p>
+          </div>
+        </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
+        <a href="javascript:">Read more &rarr;</a>
+      </li>
+      <li>
+        <h2 class="leading-normal mb-3">Ventolin makes me march around like Justin Brown</h2>
+        <div class="article-meta color-grey-50">
+          <%= random_avatar 40, "d-flex rounded mr-3" %>
+          <div class="media-body d-flex align-items-center">
+            <p class="m-0 media-heading"><a href="#">by John McDowall</a> in <a href="#">Rails, Front-end, Magic</a> &bull; <time>14th May 2015</time></p>
+          </div>
+        </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
+        <a href="javascript:">Read more &rarr;</a>
+      </li>
+      <li>
+        <h2 class="leading-normal mb-3">Ventolin makes me march around like Justin Brown</h2>
+        <div class="article-meta color-grey-50">
+          <%= random_avatar 40, "d-flex rounded mr-3" %>
+          <div class="media-body d-flex align-items-center">
+            <p class="m-0 media-heading"><a href="#">by John McDowall</a> in <a href="#">Rails, Front-end, Magic</a> &bull; <time>14th May 2015</time></p>
+          </div>
+        </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
+        <a href="javascript:">Read more &rarr;</a>
+      </li>
+      <li>
+        <h2 class="leading-normal mb-3">Ventolin makes me march around like Justin Brown</h2>
+        <div class="article-meta color-grey-50">
+          <%= random_avatar 40, "d-flex rounded mr-3" %>
+          <div class="media-body d-flex align-items-center">
+            <p class="m-0 media-heading"><a href="#">by John McDowall</a> in <a href="#">Rails, Front-end, Magic</a> &bull; <time>14th May 2015</time></p>
+          </div>
+        </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
+        <a href="javascript:">Read more &rarr;</a>
+      </li>
+    </ol>
+  </div>
+</article>

data/lib/generators/kiso_themes/templates/views/frontend_pages/blog_pages/blog_archive_1.html.haml

@@ -0,0 +1,80 @@
+%body
+  = content_for :js_libs, "parallax prettify"
+  %main
+    .parallax-window{"data-image-src" => "#{asset_path("kiso_themes/stock/landscape_3.jpg")}", "data-parallax" => "scroll", "data-speed" => "0.5"}
+      .container
+        %nav.navbar.navbar-landing.navbar-dark.navbar-expand-lg
+          %a.navbar-brand{href: "javascript:"}
+            = image_tag image_path("kiso_themes/pyrrmid_64.png"), width: 32, height: 32, class: "mr-2"
+            PYRMID
+          %button.navbar-toggler{"aria-controls" => "standardNavbar", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#standardNavbar", "data-toggle" => "collapse", type: "button"}
+            %span.navbar-toggler-icon
+          #standardNavbar.collapse.navbar-collapse
+            %ul.nav.navbar-nav.ml-auto
+              %li.nav-item
+                %a.nav-link{href: "javascript:"} HOME
+              %li.nav-item
+                %a.nav-link{href: "javascript:"} ABOUT
+              %li.nav-item
+                %a.nav-link{href: "javascript:"} TEAM
+              %li.nav-item
+                %a.nav-link{href: "javascript:"} CONTACT
+        %header.text-center.text-white
+          .container
+            %h2 Your App
+            %h2.h4 Our Blog
+  %article.blog-1.blog-archive.py-5
+    .col-12.col-md-8.mr-md-auto.ml-md-auto
+      %ol.list-unstyled
+        %li
+          %h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              %p.m-0.media-heading
+                %a{href: "#"} by John McDowall
+                in
+                %a{href: "#"} Rails, Front-end, Magic
+                •
+                %time 14th May 2015
+          %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          %a{href: "javascript:"} Read more →
+        %li
+          %h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              %p.m-0.media-heading
+                %a{href: "#"} by John McDowall
+                in
+                %a{href: "#"} Rails, Front-end, Magic
+                •
+                %time 14th May 2015
+          %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          %a{href: "javascript:"} Read more →
+        %li
+          %h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              %p.m-0.media-heading
+                %a{href: "#"} by John McDowall
+                in
+                %a{href: "#"} Rails, Front-end, Magic
+                •
+                %time 14th May 2015
+          %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          %a{href: "javascript:"} Read more →
+        %li
+          %h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              %p.m-0.media-heading
+                %a{href: "#"} by John McDowall
+                in
+                %a{href: "#"} Rails, Front-end, Magic
+                •
+                %time 14th May 2015
+          %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          %a{href: "javascript:"} Read more →

data/lib/generators/kiso_themes/templates/views/frontend_pages/blog_pages/blog_archive_1.html.slim

@@ -0,0 +1,80 @@
+body
+  = content_for :js_libs, "parallax prettify"
+  main
+    .parallax-window data-image-src="#{asset_path("kiso_themes/stock/landscape_3.jpg")}" data-parallax="scroll" data-speed="0.5" 
+      .container
+        nav.navbar.navbar-landing.navbar-dark.navbar-expand-lg
+          a.navbar-brand href: "javascript:" 
+            = image_tag image_path("kiso_themes/pyrrmid_64.png"), width: 32, height: 32, class: "mr-2"
+            | PYRMID
+          button.navbar-toggler aria-controls="standardNavbar" aria-expanded="false" aria-label=("Toggle navigation") data-target="#standardNavbar" data-toggle="collapse", type: "button" 
+            span.navbar-toggler-icon
+          #standardNavbar.collapse.navbar-collapse
+            ul.nav.navbar-nav.ml-auto
+              li.nav-item
+                a.nav-link href: "javascript:"  HOME
+              li.nav-item
+                a.nav-link href: "javascript:"  ABOUT
+              li.nav-item
+                a.nav-link href: "javascript:"  TEAM
+              li.nav-item
+                a.nav-link href: "javascript:"  CONTACT
+        header.text-center.text-white
+          .container
+            h2 Your App
+            h2.h4 Our Blog
+  article.blog-1.blog-archive.py-5
+    .col-12.col-md-8.mr-md-auto.ml-md-auto
+      ol.list-unstyled
+        li
+          h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              p.m-0.media-heading
+                a href: "#"  by John McDowall
+                | in
+                a href: "#"  Rails, Front-end, Magic
+                | •
+                time 14th May 2015
+          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          a href: "javascript:"  Read more →
+        li
+          h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              p.m-0.media-heading
+                a href: "#"  by John McDowall
+                | in
+                a href: "#"  Rails, Front-end, Magic
+                | •
+                time 14th May 2015
+          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          a href: "javascript:"  Read more →
+        li
+          h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              p.m-0.media-heading
+                a href: "#"  by John McDowall
+                | in
+                a href: "#"  Rails, Front-end, Magic
+                | •
+                time 14th May 2015
+          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          a href: "javascript:"  Read more →
+        li
+          h2.leading-normal.mb-3 Ventolin makes me march around like Justin Brown
+          .article-meta.color-grey-50
+            = random_avatar 40, "d-flex rounded mr-3"
+            .media-body.d-flex.align-items-center
+              p.m-0.media-heading
+                a href: "#"  by John McDowall
+                | in
+                a href: "#"  Rails, Front-end, Magic
+                | •
+                time 14th May 2015
+          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aut dolor laudantium repellat veniam consectetur voluptate excepturi voluptatum doloremque nesciunt! Accusantium, eos, vel. Ratione vero, non magnam cum qui facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          a href: "javascript:"  Read more →

data/lib/generators/kiso_themes/templates/views/frontend_pages/blog_pages/blog_post_1.html.erb

@@ -0,0 +1,227 @@
+<%= content_for :js_libs, "modernizr parallax prettify" %>
+
+<main class="">
+<div class="parallax-window" data-parallax="scroll" data-speed="0.5" data-image-src="<%= asset_path("kiso_themes/stock/landscape_3.jpg") %>">
+  <div class="container">
+    <nav class="navbar navbar-landing  navbar-expand-lg">
+      <a href="javascript:" class="navbar-brand"><%= image_tag image_path("kiso_themes/pyrrmid_64.png"), width: 32, height: 32, class: "mr-2"%>PYRMID</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#standardNavbar" aria-controls="standardNavbar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="standardNavbar">
+        <ul class="nav navbar-nav ml-auto">
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">HOME</a>
+          </li>
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">ABOUT</a>
+          </li>
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">TEAM</a>
+          </li>
+          <li class="nav-item ">
+            <a class="nav-link" href="javascript:">CONTACT</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+
+    <header class="text-center text-white">
+      <div class="container">
+        <h1>A Night to Remember</h1>
+        <h2 class="h4">How we made $122,000 at Blackjack</h2>
+      </div>
+    </header>
+  </div>
+</div>
+
+
+</main>
+
+<article class="blog-1 blog-post">
+  <div class="container py-5">
+    <div class="row">
+      <div class="col-12 col-md-3 text-muted">
+        <aside class="small text-center mt-3">
+          <em>By John McDowall</em>
+          <p class="m-0">Published <time>14th May 2015</time></p>
+          <hr class="nub" />
+          <dl class="">
+            <dt>Tags</dt>
+            <dd>
+              <ul class="list-unstyled">
+                <li>Rails</li>
+                <li>Site News</li>
+                <li>Front-end</li>
+              </ul>
+            </dd>
+          </dl>
+        </aside>
+      </div>
+      <div class="col-12 col-md-8 ">
+        <h1>How it all got started</h1>
+        <p>Old Houses are products of accretion. Over the course of many years they gather new extensions, tweaked facades, upgraded central or under-floor heating systems, alarm systems, downstairs washrooms and nursereys. And usually, once one project is completled, you"ll bask in the glow of it for a while until it"s forgotten about and the next one embarked upon. Just like Software.</p>
+        <h2>Cats in the laundry basket</h2>
+        <p>The house I live in is big and old, over 80 years. It"s been split up so that a couple live through the back portion, my wife and I live in the front half, and there"s a basement apartment. Sound travels in funny ways in old houses. Sound travels in funny ways in old houses. </p>
+        <div class="py-3">
+          <%= random_landscape %>
+        </div>
+        <h3>Rain always comes</h3>
+        <p>You see there are the remenants of what were ducts for the purposes of a forced air central heating system, all through the house. The air vents are now sealed, but the ornamentation on the baseboard that gives away their purpose is still there. The ducts lie embedded within the walls still. Long forgotten about, these heating ducts were probably installed at great expense at the time, for what was felt to be the ultimate in home comfort: hot air blown into the rooms from a central heater!</p>
+        <p>At some point, the old air heater was pulled out, radiators were found and installed, and a fancy Swedish boiler system now silently and efficiently pumps hot water around the piping and heats the house. And the ducts remain, in the walls. Now sealed up and silent. Except for when they carry sound in funny ways. Old houses are like that. </p>
+        <p>Occasionally, we are treated to the sounds of someone somewhere else in the house enjoying vigorous, short lived coitus, the echoes of it carried inside the bones of the house, inside these long forgoten about ducts that serve no purpose. Should the ducts be ripped out? That would be very costly, and damaging to the house. So they stay. Silently embedded within the walls. </p>
+        <div class="table-responsive">
+          <%= code_block do %>
+            function decodeEscape(charsetPart) {
+            var cc0 = charsetPart.charCodeAt(0);
+            if (cc0 !== 92 /* \\ */) {
+            return cc0;
+            }
+
+            var c1 = charsetPart.charAt(1);
+            var cc0 = escapeCharToCodeUnit[c1];
+
+            if (cc0) {
+            return cc0;
+            } else if ("0" <= c1 && c1 <= "7") {
+            return parseInt(charsetPart.substring(1), 8);
+            } else if (c1 === "u" || c1 === "x") {
+            return parseInt(charsetPart.substring(2), 16);
+            } else {
+            return charsetPart.charCodeAt(1);
+            }
+            }
+          <% end %>
+        </div>
+        <p>Much like the infastructure portions of almost every software design that"s ever been written. Look at your codebase. Is there something in there, some remnant of infrastructure that was built with the greatest of hopes and expectations, only to be roundly replaced when you understood the problem better?</p>
+        <p>Removing that code might be too hard now, because nobody writes perfect software. Some brittle tests somewhere might flare up, or a method call somewhere might explode. </p>
+        <p>And yet that code sits there, inside your digital walls.</p>
+        <p>Software Design is like building houses. The construction continues long after the thing is "finished", and you end up living with the choices you make for a long time, usually forever. </p>
+        <p>And sometimes, in the night, you hear odd noises carried by those old ducts.</p>
+
+        <section class="row post-footer bg-white rounded py-4">
+          <div class="col-12">
+            <div class="media color-grey-50">
+              <%= random_avatar 40, "rounded d-flex mr-3" %>
+              <div class="media-body d-flex justify-content-between">
+                <div>
+                  <p class="m-0 media-heading">Published <time>14th May 2015</time></p>
+                  <a href="#">by John McDowall</a> in <a href="#">Rails, Front-end, Magic</a>
+                </div>
+                <span class="social">
+                  <p class="m-0 text-muted small">
+                    Share this article
+                  </p>
+                  <div class="social-links">
+                    <a class="social-icon" href="#" data-platform="twitter" data-message="Message about this post" data-url="http://writertheme.com/post"><i class="fa fa-twitter"></i></a>
+                    <a class="social-icon" href="#" data-platform="facebook" data-message="Message about this post" data-url="http://writertheme.com/post"><i class="fa fa-facebook-official"></i></a>
+                    <a class="social-icon" data-platform="mail" href="mailto:test@example.com"><i class="fa fa-envelope"></i></a>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="comments row">
+          <div class="col-12">
+            <hr>
+            <h3>4 Comments</h3>
+            <div class="media mb-5">
+              <%= random_avatar 42, 'rounded mr-3 d-flex ' %>
+              <div class="media-body">
+                <div class="d-flex justify-content-between">
+                  <h5 class="mt-0"><a href="javascript:">Hiro Protagonist</a></h5>
+                  <time class="text-muted">5h ago</time>
+                </div>
+                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                <a href="javascript:" class="pt-4">Reply</a>
+                <div class="media mt-3">
+                  <%= random_avatar 42, 'rounded mr-3 d-flex ' %>
+                  <div class="media-body">
+                    <div class="d-flex justify-content-between">
+                      <h5 class="mt-0"><a href="javascript:">Mr Montezuma</a></h5>
+                      <time class="text-muted">5h ago</time>
+                    </div>
+                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
+                    <a href="javascript:" class="pt-4">Reply</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="media mb-5">
+              <%= random_avatar 42, 'rounded mr-3 d-flex ' %>
+              <div class="media-body">
+                <div class="d-flex justify-content-between">
+                  <h5 class="mt-0"><a href="javascript:">Hiro Protagonist</a></h5>
+                  <time class="text-muted">5h ago</time>
+                </div>
+                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                <a href="javascript:" class="pt-4">Reply</a>
+                <div class="media mt-3">
+                  <%= random_avatar 42, 'rounded mr-3 d-flex ' %>
+                  <div class="media-body">
+                    <div class="d-flex justify-content-between">
+                      <h5 class="mt-0"><a href="javascript:">Mr Montezuma</a></h5>
+                      <time class="text-muted">5h ago</time>
+                    </div>
+                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </p>
+                    <a href="javascript:" class="pt-4">Reply</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-body">
+                <form action="#" method="post" novalidate="" class="form">
+                  <div class="row">
+                    <div class="col-xs-12 col-sm-12 col-md-12" style="visibility: visible;">
+                      <div class="form-group">
+                        <label class="control-label" for="contact-message">Join the discussion</label>
+                        <div class="controls">
+                          <textarea name="comments" placeholder="Please be civil." class="form-control requiredField" rows="3" data-error-empty="Please enter comment"></textarea>
+                          <span class="help-block text-muted">* required</span>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col-xs-12 col-sm-6 col-md-6">
+                          <div class="form-group">
+                            <label class="control-label">Name</label>
+                            <div class="controls">
+                              <input name="contactName" placeholder="Name" class="form-control requiredField " type="text" data-error-empty="Please enter name">
+                              <span class="help-block text-muted">* required</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col-xs-12 col-sm-6 col-md-6">
+                          <div class="form-group">
+                            <label class="control-label" for="contact-mail">Email</label>
+                            <div class="controls">
+                              <input name="email" placeholder="Email" class="form-control requiredField" type="email" data-error-empty="Please enter email" data-error-invalid="Invalid email address">
+                              <span class="help-block text-muted">* required</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col-xs-12 col-sm-12 col-md-12">
+                          <div class="form-group">
+                            <button name="submit" type="button" class="w-100 btn btn-primary" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Comment Sent">Send Comment</button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </div>
+
+            </div>
+          </div>
+        </section>
+      </article>
+    </div>
+  </div>
+