diff --git a/site/_includes/footer.html b/site/_includes/footer.html
index 09826be..564d035 100644
--- a/site/_includes/footer.html
+++ b/site/_includes/footer.html
@@ -1 +1,21 @@
-<footer>Footer</footer>
+<footer>
+  <div>
+    <div class="head">INFO</div>
+      <div class="child">
+        Author: {{page.author}}<br>
+        <a href="/credits.html">Credits</a>
+      </div>
+    </div>
+
+  <div>
+    <div class="head">What was it again?</div>
+      <div class="child">
+        something<br>
+        something else
+      </div>
+  </div>
+
+  <div>
+    <img src="test"> <!-- TODO: replace with actual image and add metadata attr -->
+  </div>
+</footer>
diff --git a/site/_sass/_footer.scss b/site/_sass/_footer.scss
new file mode 100644
index 0000000..db649ba
--- /dev/null
+++ b/site/_sass/_footer.scss
@@ -0,0 +1,37 @@
+/* Author: Marco Tereh */
+/* this file only concerns elements which are children of the <footer> */
+
+footer{
+  background-color: grey; /* TODO: replace placeholder color and add text color */
+  overflow: auto;
+}
+
+footer > div {
+  float: left;
+  margin: 10px;
+  width: CALC(33% - 20px);
+}
+
+footer .head {
+  text-decoration: underline;
+}
+
+footer .child {
+  margin-left: 5px;
+}
+
+footer > div:nth-child(2){
+  text-align: center;
+
+  .child{
+    text-align: left;
+    width: fit-content;
+    margin: auto;
+  }
+}
+
+footer div img {
+  height: 50px;
+  width: 50px;
+  margin-left: CALC(100% - 50px);
+}
\ No newline at end of file