styles for tutorials list

Author: des75

cl-bunny/tutorials/index.html

@@ -16,19 +16,37 @@
   </div>
 </div>
 
-<section class="content homepage">
+<section class="content tutorials">
 	<div class="width">
-		<div class="home-section-content cl-rabbit">
+		<div class="home-section-content">
 			<h1>Tutorials</h1>
 
-			<ol>
-				<li><a href="tutorial-one-cl.html">Introduction</a></li>
-				<li><a href="tutorial-two-cl.html">Work Queues</a></li>
-				<li><a href="tutorial-three-cl.html">Publish/Subscribe</a></li>
-				<li><a href="tutorial-four-cl.html">Routing</a></li>
-				<li><a href="tutorial-five-cl.html">Topics</a></li>
-				<li><a href="tutorial-six-cl.html">Remote procedure call (RPC)</li></a>
-			</ol>
+			<nav class="tutorials-list">
+				<a href="tutorial-one-cl.html">
+					<img src="http://i.imgur.com/VjRoMDS.png">
+					<span>Introduction</span>
+				</a>
+				<a href="tutorial-two-cl.html">
+					<img src="http://i.imgur.com/Tf7ltsH.png">
+					<span>Work Queues</span>
+				</a>
+				<a href="tutorial-three-cl.html">
+					<img src="http://i.imgur.com/T2dIpCt.png">
+					<span>Publish/Subscribe</span>
+				</a>
+				<a href="tutorial-four-cl.html">
+					<img src="http://i.imgur.com/WiZ2UuV.png">
+					<span>Routing</span>
+				</a>
+				<a href="tutorial-five-cl.html">
+					<img src="http://i.imgur.com/L02kpQt.png">
+					<span>Topics
+				</a>
+				<a href="tutorial-six-cl.html">
+					<img src="http://i.imgur.com/SwxhQcm.png">
+					<span>Remote procedure call (RPC)</span>
+				</a>
+			</nav>
 		</div>
 	</div>
 </section>

style/style.css

@@ -112,6 +112,10 @@ section.central{
 			line-height: 30px;
 		}
 	}
+	&.tutorials{
+		padding: 50px 0;
+		@include ffx;
+	}
 }
 
 .home-section{
@@ -139,6 +143,42 @@ section.central{
 	}
 }
 
+.tutorials-list{
+	a{
+		display: block;
+		float: left;
+		width: 32%;
+		height: 200px;
+	    line-height: 130px;
+		margin: 1% 0 0 1%;
+		padding: 0 20px;
+		position: relative;
+		text-align: center;
+			border: 5px solid #eee;
+		@include box-sizing;
+
+		img{
+			max-width: 100%;
+			vertical-align: middle;
+		}
+
+		span{
+			position: absolute;
+			bottom: 12px;
+			left: 0;
+			width: 100%;
+			line-height: 30px;
+			font-size: 24px;
+			color: black;
+			font-weight: bold;
+		}
+
+		&:hover{
+			border: 5px solid $color_main;
+		}
+	}
+}
+
 footer{
 	.width{
 		width: 500px;