redesigned contributors page (#21)

pro1/blog/static/blog/css/style.css

@@ -1,3 +1,8 @@
+body {
+    font: 400 15px/1.8 Lato, sans-serif;
+    color: #777;
+}
+
 .navbar {
     margin-bottom: 0;
     background-color: green;
@@ -22,4 +27,29 @@
 .navbar-default .navbar-toggle {
     border-color: transparent;
     color: #fff !important;
-}
+}
+
+.thumbnail {
+    padding: 0 0 15px 0;
+    border: none;
+    border-radius: 0;
+}
+
+.thumbnail p {
+    margin-top: 15px;
+    color: #555;
+}
+
+.btn {
+    padding: 10px 20px;
+    background-color: rgb(9, 73, 41);
+    color: #f1f1f1;
+    border-radius: 0;
+    transition: .2s;
+}
+
+.btn:hover, .btn:focus {
+    border: 1px solid #333;
+    background-color: #fff;
+    color: #000;
+}

pro1/blog/templates/blog/contributor.html

@@ -3,28 +3,53 @@
 {% block content %}
 	<h1> Contributors </h1>
 	<br>
-	<article class="display-left">
-		<div class="media-body">
-			<img class="img-circle" src="{% static 'blog/images/monsij.jpeg' %}">
-			<h2><a class="article-title" href="https://github.com/monsij">monsij</a></h2>
+
+<div class="row text-center">
+	<div class="col-sm-4">
+		<div class="thumbnail">
+			<img src="{% static 'blog/images/monsij.jpeg' %}" width="400" height="300">
+			<p><strong>Monsij Biswal</strong></p>
+			<p><i>Owner</i></p>
+			<a href="https://github.com/monsij"><button class="btn">@monsij</button></a>
 		</div>
-	</article>
-	<article class="display-right">
-		<div class="media-body">
-			<img class="img-circle" src="{% static 'blog/images/harry-hov.jpeg' %}">
-			<h2><a class="article-title" href="https://github.com/harry-hov">harry-hov</a></h2>
+	</div>
+
+	<div class="col-sm-4">
+		<div class="thumbnail">
+			<img src="{% static 'blog/images/harry-hov.jpeg' %}" width="400" height="300">
+			<p><strong>Hariom Verma</strong></p>
+			<p><i>Contributor</i></p>
+			<a href="https://github.com/harry-hov"><button class="btn">@harry-hov</button></a>
 		</div>
-	</article>
-	<article class="display-left">
-		<div class="media-body">
-			<img class="img-circle" src="{% static 'blog/images/r3trd.jpeg' %}">
-			<h2><a class="article-title" href="https://github.com/r3trd">r3trd</a></h2>
+	</div>
+
+	<div class="col-sm-4">
+		<div class="thumbnail">
+			<img src="{% static 'blog/images/gutsytechster.jpeg' %}" width="400" height="300">
+			<p><strong>Prashant Sharma</strong></p>
+			<p><i>Contributor</i></p>
+			<a href="https://github.com/gutsytechster"><button class="btn">@gutsytechster</button></a>
 		</div>
-	</article>
-	<article class="display-right">
-		<div class="media-body">
-			<img class="img-circle" src="{% static 'blog/images/gutsytechster.jpeg' %}">
-			<h2><a class="article-title" href="https://github.com/gutsytechster">gutsytechster</a></h2>
+	</div>
+
+	<div class="col-sm-4">
+		<div class="thumbnail">
+			<img src="{% static 'blog/images/r3trd.jpeg' %}" width="400" height="300">
+			<p><strong>Satyajit Das</strong></p>
+			<p><i>Owner</i></p>
+			<a href="https://github.com/r3trd"><button class="btn">@r3trd</button></a>
 		</div>
-	</article>
+	</div>
+
+	<div class="col-sm-4">
+		<div class="thumbnail">
+			<img src="{% static 'blog/images/gopavasanth.jpeg' %}" width="400" height="300">
+			<p><strong>Gopa Vasanth</strong></p>
+			<p><i>Contributor</i></p>
+			<a href="https://github.com/gopavasanth"><button class="btn">@gopavasanth</button></a>
+		</div>
+	</div>
+</div>
+
+
 {% endblock content %}