added header

nj-coder · nj-coder · commit cb4412ebd627 · 2019-10-06T13:22:53.000+11:00
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -1,4 +1,16 @@
 <div class="home">
+  <div class="header">
+    <div class="left">
+      NJ-Coder
+    </div>
+    <div class="right">
+      <div class="link-wrappeer">
+        <a href="#">TECHS</a>
+        <a href="#">PORTFOLIO</a>
+        <a href="#" class="hire-me">Hire Me</a>
+      </div>
+    </div>
+  </div>
   <div class="top-section">
     <div class="left">
       <div class="outer-circle">
@@ -7,4 +19,5 @@
     </div>
     <div class="right">2</div>
   </div>
-</div>
+</div>
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
@@ -1,16 +1,64 @@
-$shadow-primary: #6E48AA;
-$shadow-secondary: #9D50BB;
+$shadow-primary: #1e3c72;
+$shadow-secondary: #2a5298;
 
 .home {
 
+  .header {
+    display: grid;
+    grid-template-columns: 30vw 70vw;
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+
+    .left {
+      padding: 1em 1em 1em 2em;
+      text-align: left;
+      background: $shadow-primary;
+    }
+
+    .right {
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 10vw;
+
+      a {
+        text-transform: uppercase;
+        color: #000;
+        font-size: 12px;
+        margin-right: 2em;
+        text-decoration: none;
+
+        &:last-child {
+          margin: 0;
+        }
+
+        &:hover:not(.hire-me) {
+          color: $shadow-secondary;
+          border-bottom: 1px solid $shadow-secondary;
+        }
+      }
+
+      .hire-me {
+        color: #ffffff;
+        background: linear-gradient(to right, $shadow-primary, $shadow-primary);
+        padding: 2px 12px;
+        border-radius: 12px;
+      }
+    }
+  }
+
   .top-section {
     height: 100vh;
     width: 100%;
     color: #fff;
     background: $shadow-secondary;
     background: linear-gradient(to right, $shadow-primary, $shadow-primary);
     display: grid;
-    grid-template-columns: 30% 70%;
+    grid-template-columns: 30vw 70vw;
+
 
     .left {
       height: 100%;
@@ -29,7 +77,7 @@ $shadow-secondary: #9D50BB;
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
         border: 10px solid #ffffff;
         overflow: visible;
-        z-index: 10;
+        z-index: 1;
         display: flex;
         align-items: center;
         justify-content: center;
