layout with tutorial cards for index

Author: jamesdam

public/stylesheets/style.css

@@ -8,4 +8,36 @@ body {
 
 a {
   color: #00B7FF;
-}
+}
+
+.im {
+    height: 150px;
+    width: 100%;
+    border: solid 1px white;
+    -o-object-fit: fill;
+    -o-object-position: top center;
+    object-fit: fill;
+    object-position: top center;
+}
+
+.im:hover
+{
+opacity:0.5;
+filter:alpha(opacity=100); /* For IE8 and earlier */
+}
+
+.atext{
+	height: 40px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.tut-sub-by-wrap {
+	padding-top: 4px;
+	border-top: 1px solid #E2E2E2;
+	margin-top: 4px;
+	height:14px;
+	line-height: 14px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

views/bit/tut_card.jade

@@ -0,0 +1,20 @@
+li.span3
+  div.thumbnail
+    img.im(src="http://devtacular.com/images/article_icon_javascript.png")
+    div.atext
+      a sample heading
+    div.tut-sub-by-wrap
+      span By 
+      a James Dam
+    div.tut-sub-by-wrap
+      span.label(href="/a") tag
+      a.label(href="/a") tag
+      a.label(href="/a") tag
+      a.label(href="/a") tag
+    dib.tut-sub-by-wrap
+      span
+        i.icon-thumbs-up
+        b 1000
+      span
+        i.icon-eye-open
+        b 1000

views/index.jade

@@ -2,4 +2,13 @@ extends layout
 
 block content
   h1= title
-  p Welcome to #{title}
+  p Welcome to #{title}
+    div.row-fluid
+      ul.thumbnails
+        - for (var i = 0; i < 4; ++i) {
+          include bit/tut_card
+        - }
+      ul.thumbnails
+        - for (var i = 0; i < 4; ++i) {
+          include bit/tut_card
+        - }  

views/layout.jade

@@ -2,8 +2,8 @@ doctype 5
 html
   head
     title= title
-    link(rel='stylesheet', href='/stylesheets/style.css')
     link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
+    link(rel='stylesheet', href='/stylesheets/style.css')
   body
     include bit/topbar
     div.container