updated footer

nj-coder · nj-coder · commit 576199018745 · 2019-12-01T15:42:47.000+11:00
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
@@ -1,5 +1,38 @@
 <div class="footer">
-    <div class="get-template">
+
+  <div class="content">
+
+    <div class="details">
+      <div class="title">
+        NJ-Coder
+      </div>
+
+      <div class="socials">
+        <div class="links">
+          <a class="link-wrap" href="https://www.linkedin.com/in/nidhin-joseph-225b49a3/" target="_blank">
+            <i class="fab fa-linkedin"></i>
+          </a>
+          <a class="link-wrap" href="https://github.com/nj-coder" target="_blank">
+            <i class="fab fa-github"></i>
+          </a>
+          <a class="link-wrap" href="https://stackoverflow.com/users/3289660/nidhin-joseph" target="_blank">
+            <i class="fab fa-stack-overflow"></i>
+          </a>
+          <a class="link-wrap" href="https://www.facebook.com/nidhin.joseph.1992" target="_blank">
+            <i class="fab fa-facebook-square"></i>
+          </a>
+        </div>
+      </div>
+
+      <div class="get-template">
         Love this template? Fork it from <a href="https://github.com/nj-coder/nj-coder.com" target="_blank">GitHub</a>
+      </div>
     </div>
+
+    <div class="hire-me">
+      4
+    </div>
+
+  </div>
+
 </div>
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
@@ -1,15 +1,74 @@
 .footer {
   padding: 1em;
   background: #021017;
+  color: #fff;
 
-  .get-template {
-    font-size: 12px;
-    text-align: center;
-    color: #fff;
- 
-    a {
-      text-decoration-color: #fff;
-      color: #fff;
+  .content {
+    display: flex;
+    align-items: center;
+    width: 80vw;
+    margin: 1em auto;
+
+    .details {
+      margin-right: 2em;
+      flex-grow: 1;
+      flex-basis: 0;
+      text-align: center;
+
+      .title {
+        color: #fff;
+        font-size: 1.5em;
+        font-weight: bold;
+        letter-spacing: 4px;
+        text-transform: uppercase;
+        margin-bottom: 1em;
+      }
+
+      .socials {
+        text-align: center;
+        position: relative;
+        margin-bottom: 2em;
+
+        .links {
+          padding: 0 4px;
+          position: relative;
+          display: inline-flex;
+
+          a {
+            padding: .5em 1em;
+            background: #fff;
+            display: block;
+            color: #021017;
+            border-radius: 7px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
+            margin-right: 1em;
+
+            &:last-child {
+              margin: 0;
+            }
+
+            &:hover {
+              color: #fff;
+              background: var(--primary);
+            }
+          }
+        }
+      }
+
+      .get-template {
+        font-size: 12px;
+        color: #797979;
+
+        a {
+          text-decoration-color: #797979;
+          color: #797979;
+        }
+      }
+    }
+
+    .hire-me {
+      flex-grow: 1;
+      flex-basis: 0;
     }
   }
 }
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -1,4 +1,4 @@
-<div class="home">
+<div class="home" style="display: none;">
 
   <div class="header">
     <div class="left">

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="home">`
	`1`	`+<div class="home" style="display: none;">`
`2`	`2`
`3`	`3`	`<div class="header">`
`4`	`4`	`<div class="left">`