fixing projects page

content/assets/stylesheets/includes/projects.css

@@ -0,0 +1,16 @@
+/*# sourceMappingURL=projects.css.map */
+/* line 4, /Users/mehmet/Projects/zeus.ugent.be/content/assets/stylesheets/includes/projects.scss */
+.imgspace {
+  display: flex;
+  justify-content: space-around;
+  width: 100%; }
+
+/* line 10, /Users/mehmet/Projects/zeus.ugent.be/content/assets/stylesheets/includes/projects.scss */
+.imgcenter {
+  display: flex;
+  justify-content: center;
+  /* align horizontal */
+  align-items: center;
+  /* align vertical */ }
+
+/*# sourceMappingURL=projects.css.map */

content/assets/stylesheets/includes/projects.css.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "projects.css",
+  "sources": [
+    "projects.scss"
+  ],
+  "sourcesContent": [],
+  "mappings": "AACA,wCAAwC;;AAExC,SAAS,CAAC;EACN,OAAO,EAAE,IAAK;EACd,eAAe,EAAE,YAAa;EAC9B,KAAK,EAAE,IAAK,GAHL;;;AAMX,UAAU,CAAC;EACP,OAAO,EAAE,IAAK;EAClB,eAAe,EAAE,MAAO;EAAE,sBAAsB;EAChD,WAAW,EAAE,MAAO;EAAE,oBAAoB,EAH9B",
+  "names": []
+}

content/assets/stylesheets/includes/projects.scss

@@ -0,0 +1,15 @@
+
+/*# sourceMappingURL=projects.css.map */
+
+.imgspace {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+}
+
+.imgcenter {
+    display: flex;
+justify-content: center; /* align horizontal */
+align-items: center; /* align vertical */
+    
+}

content/assets/stylesheets/main.scss

@@ -21,3 +21,4 @@ $family-sans-serif: 'Open Sans', sans-serif;
 @import "includes/blogpost";
 @import "includes/general";
 @import "includes/404";
+@import "includes/projects"

content/projects.erb

@@ -2,17 +2,47 @@
 navigable: true
 title: Projecten
 ---
-<% 5.times do %>
-<section class="hero is-primary">
-  <div class="hero-body">
+  <div class="content">
     <div class="container">
-      <h1 class="title">
-        Hydra
-      </h1>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus facere, ut in magnam harum at, aliquam nostrum totam tempore distinctio explicabo natus quis pariatur quos maiores dignissimos inventore! Ad amet harum ipsum laudantium modi ipsa dolores, omnis impedit nostrum expedita sed molestias similique veritatis, quo explicabo odit minus cum quibusdam accusamus beatae quam vitae cumque ipsam eius. Alias ipsam blanditiis deleniti nam magni veritatis, quas quae. Quam quia at tempora repellat optio aliquam, quasi deserunt esse distinctio voluptate harum hic sed vel blanditiis nam modi fuga, totam neque vero! Sunt, ipsum sit! Libero quam temporibus deserunt, quo itaque perspiciatis earum.
-      </p>
-    </div>
-  </div>
-</section>
-<% end %>
+        <div class="tile is-vertical">
+            <div class="tile">
+                <article class="tile is-child notification is-default">
+                <p class="title has-text-centered">Hydra</p>
+                <div class="imgcenter"><img src="https://camo.githubusercontent.com/c10b728127bc26db9cb80879072e2119276f5b7a/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f353637362f34363935352f30313031636566342d353861382d313165322d386231362d3036353337633338613863662e706e67"></div>
+                    <p></p>
+                <p class="subtitle has-text-centered">Android, iOS, and Windows 10 application providing all the information a student at Ghent University needs.</p>    
+                    <div class="imgspace">
+                    <a href="https://itunes.apple.com/be/app/hydra/id602640924"><img src="https://camo.githubusercontent.com/c5065f53773c01c20c7cb90cbbefc9552b4e3187/687474703a2f2f73747564656e742e7567656e742e62652f68796472612f696d672f73746f72652d696f732e706e67"></a>
+                    <a href="http://play.google.com/store/apps/details?id=be.ugent.zeus.hydra"><img src ="https://camo.githubusercontent.com/2b3471ae9f71b68d99ec52802a1c14c9a6803086/687474703a2f2f73747564656e742e7567656e742e62652f68796472612f696d672f73746f72652d616e64726f69642e706e67"></a>
+                    
+                    <a href="http://www.windowsphone.com/s?appId=08d3268e-aad6-48fa-ae83-5ccd1663e73a"><img src="assets/images/win.png"></a>
+                    </div>
+                    <p></p>
+                    <div class=" imgspace">
+                <a href="https://github.com/ZeusWPI/hydra-iOS">iOS <span class="icon"><i class="fa fa-github"></i></span></a>
+                   
+                <a href="https://github.com/ZeusWPI/hydra-android">Android <span class="icon"><i class="fa fa-github"></i></span></a>      
+                        
+                <a href="https://github.com/ZeusWPI/hydra-windows">Windows 10 <span class="icon"><i class="fa fa-github"></i></span></a>
+                    </div>
+                </article>
+            </div>
+        </div>
+      </div>
+</div>
+  <div class="content">
+    <div class="container">
+        <div class="tile is-vertical">
+            <div class="tile">
+                <article class="tile is-child notification is-default">
+                <p class="title has-text-centered">Tap</p>
+                <p class="subtitle has-text-centered">🍺   Yes. We have to drink. But we also have to pay. This does the drinking part. <a href="https://zeus.ugent.be/tap">zeus.ugent.be/tap</a></p>    
+                    <div class=" imgspace">
+                <a href="https://github.com/ZeusWPI/Tap">Tap <span class="icon"><i class="fa fa-github"></i></span></a>
+                        
+                    </div>
+                </article>
+            </div>
+        </div>
+      </div>
+</div>