From 00e7d2e72be27c022a522d7c1bfa5f769c1d5485 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 16 Apr 2019 00:11:26 +0200
Subject: [PATCH] Header is now equiped to have a large background image and a
 slotted value is used to display the text from parent (home).

---
 src/components/Header.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4443489..4a15ae8 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,7 @@
 <template>
   <header>
-    <div class="navigate-back">Tilbake</div>
+    <!-- <div class="navigate-back">Tilbake</div> -->
+    <h1><slot></slot></h1>
   </header>
 </template>
 
@@ -25,9 +26,22 @@ export default {
 
 <style lang="scss" scoped>
   header {
-    width: 100%;
-    height: 3.5rem;
-    background-color: NavajoWhite;
+    height: 490px;
+    background-color: #f5af52;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    background-image: url('https://eu.blackdiamondequipment.com/on/demandware.static/-/Library-Sites-SharedLibrary/default/dwf668bbc0/images/heroes/S19_Wind-Shells_HP-Hero.jpg');
+    background-position: center;
+
+    h1 {
+      font-family: 'Maddac';
+      color: white;
+      text-transform: capitalize;
+      margin-right: 10%;
+      font-size: 3.5rem;
+    }
   }
 
   .navigate-back {