work on blokmap

content/assets/stylesheets/includes/general.scss

@@ -61,7 +61,7 @@ footer.footer {
   background: rgba(255, 127, 0, 0.99);
 }
 
-.imgcenter {
+.has-content-centered, .imgcenter {
   display: flex;
   justify-content: center;
   align-items: center;

content/assets/stylesheets/includes/tiles.scss

@@ -68,5 +68,35 @@ a.box {
       }
     }
   }
-
+}
+
+#blokmap-tile {
+  position: relative;
+
+  height: 200px;
+  //background-image: url("https://i.imgur.com/PMaIG7X.jpg");
+  background-image: url("https://cldup.com/-FmSDFbd07.jpg");
+
+  background-position: center;
+
+  .overlay {
+    left: 0;
+    top: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .content {
+    position: relative;
+
+    h1, h2 {
+      color: white;
+    }
+
+    h2 {
+      margin-top: 0;
+    }
+  }
 }

content/index.erb

@@ -6,6 +6,7 @@
 
 <div id="homepage">
   <div class="tile is-vertical is-ancestor">
+    <%= render '/tiles/blokmap.*' %>
     <div class="tile is-parent is-12">
       <div class="tile is-child box highlighted">
         <div class="content">

layouts/tiles/blokmap.erb

@@ -0,0 +1,15 @@
+<div class="tile is-parent is-12">
+  <div id="blokmap-tile" class="tile is-child box has-content-centered">
+    <a href="http://blok.ugent.be">
+      <div class="overlay"><!-- EMPTY --></div>
+      <div class="content is-large has-text-centered">
+        <h1>
+          <b>Zoek de beste plek om te blokken!</b>
+        </h1>
+        <h2>
+          blok.ugent.be
+        </h2>
+      </div>
+    </a>
+  </div>
+</div>