Add contributors and sponsors

_includes/commercial_support.html

@@ -1,5 +1,6 @@
 <div class="container">
-  <div class="row center pady-4 bordertop-block borderbottom-block logos">
+  <div class="row center pady-2 bordertop-block borderbottom-block logos">
+    <h2 class="center padb-4">Sponsors</h2>
     <div class="col6">
       <a href="http://www.klokantech.com/contact/">
         <img src="/img/klokantech-logo.png" alt="Klokan Technologies"/>

_sass/_custom.scss

@@ -145,3 +145,26 @@ body{
   padding: 0 8px;
   font-size: 1em;
 }
+
+.contributors {
+    img {
+        max-width: 100%;
+    }
+}
+
+.contributor-profile {
+  text-align: center;
+
+  h3{
+    &:hover{
+    }
+  }
+
+  .circular:hover {
+    opacity: .95;
+  }
+
+  &:hover{
+    text-decoration: none;
+  }
+}

_sass/_helpers.scss

@@ -224,3 +224,15 @@ center, .center, .text-center{text-align: center;}
     margin-left: auto;
     margin-right: auto;
 }
+
+.circular {
+    width: 200px;
+    height: 200px;
+    background-size: cover;
+    border-radius: 100px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
+    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .2);
+}

index.html

@@ -50,25 +50,38 @@ published: true
   </div>
 
   <div class="row bordertop-block">
-    <div class="col12 padt-6">
-      <h2 class="center">Contributors</h2>
-
+    <div class="contributors col12 padt-2">
+      <h2 class="center padb-4">Contributors</h2>
       <div class="row">
-        <div class="col6 pad-5">
-          <ul class="big">
-            <li>Lukas Martinelli <a href="https://github.com/lukasmartinelli" class="user-mention">@lukasmartinelli</a></li>
-            <li>Manuel Roth <a href="https://github.com/manuelroth" class="user-mention">@manuelroth</a></li>
-          </ul>
+        <div class="contributor-profile col3 padb-3">
+          <a href="https://github.com/manuelroth">
+            <div class="circular" style="background-image: url(/img/profile-pictures/manuelroth.jpg)"></div>
+          </a>
+            <h3>Manuel Roth</h3>
+            <p>Student at HSR</p>
         </div>
-        <div class="col6 pad-5">
-          <ul class="big">
-            <li>Petr Pridal <a href="https://github.com/klokantech" class="user-mention">@klokantech</a></li>
-            <li>Stefan Keller <a href="https://github.com/sfkeller" class="user-mention">@sfkeller</a></li>
-          </ul>
+        <div class="contributor-profile col3 padb-3">
+          <a href="http://lukasmartinelli.ch/">
+            <div class="circular" style="background-image: url(/img/profile-pictures/lukasmartinelli.jpg)"></div>
+          </a>
+            <h3>Lukas Martinelli</h3>
+            <p>Student at HSR</p>
+        </div>
+        <div class="contributor-profile col3 padb-3">
+          <a href="https://www.klokantech.com/company/">
+            <div class="circular" style="background-image: url(/img/profile-pictures/petrpridal.jpg)"></div>
+          </a>
+            <h3>Petr Pridal</h3>
+            <p>CEO <a href="http://www.klokantech.com">Klokan Technologies</a></p>
+        </div>
+        <div class="contributor-profile col3 padb-3">
+          <a href="http://wiki.hsr.ch/StefanKeller/wiki.cgi?StefanKeller">
+            <div class="circular" style="background-image: url(/img/profile-pictures/stefankeller.png)"></div>
+          </a>
+          <h3>Prof. Stefan Keller</h3>
+          <p>Professor for GIS at <a href="http://hsr.ch/geometalab">HSR</a></p>
         </div>
       </div>
-
     </div>
   </div>
-
 </div>