From bcf05bf0e17d3fe2e06d180a00a62182634341ce Mon Sep 17 00:00:00 2001
From: drewcassidy <drewcassidy@me.com>
Date: Thu, 16 Nov 2017 16:23:46 -0800
Subject: [PATCH] flags!

---
 _includes/flag.html   |  8 ++++++++
 _includes/header.html |  6 ++++++
 css/style.scss        | 45 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 _includes/flag.html

diff --git a/_includes/flag.html b/_includes/flag.html
new file mode 100644
index 0000000..cbd26ae
--- /dev/null
+++ b/_includes/flag.html
@@ -0,0 +1,8 @@
+<div class="{{include.color}} flag">
+    <div class="flagText">
+        <a href="{{include.url}}">{{include.name}}</a>
+    </div>
+        <svg width=115 height=50>
+            <polygon points="0,50 100,50, 115,25, 100,0, 0,0"/>
+        </svg>
+</div>
\ No newline at end of file
diff --git a/_includes/header.html b/_includes/header.html
index 14686eb..2f674f6 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,3 +1,9 @@
 <header>
     <h1 id = "title"> Andrew Cassidy </h1>
+    <div id="sidebar">
+        {% include flag.html color="blue" name="home" url="/" %}
+        {% include flag.html color="blue" name="home" url="/" %}
+        {% include flag.html color="blue" name="home" url="/" %}
+        {% include flag.html color="blue" name="home" url="/" %}
+    </div>
 </header>
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
index 6435c8e..7a2bda2 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,5 +1,50 @@
 ---
 ---
+$blue: #26A6A6;
+
+header {
+    left: 0;
+}
+#sidebar {
+    width: 25%;
+    left: 0;
+}
+.flagText {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 30%;
+    width: 100%;
+    position: absolute;
+    text-align: center;
+    margin: auto;
+    z-index: 2;
+
+}
+
+.flag {
+    position: relative;
+    margin-top: 10px;
+    height: 50px;
+    width: 175px;
+    fill-opacity: 0;
+    left: -10px;
+
+    svg {
+        position: relative;
+        float:right;
+        right:-25px;
+    }
+}
+
+.flag:hover {
+    fill-opacity: 100 !important;
+}
+
+.blue {
+    fill: $blue;
+    background-color: $blue;
+}
 
 footer {
     font-size: 1em;