initial footer

src/App.vue

@@ -65,7 +65,6 @@ body {
     font-family: "Open Sans", sans-serif;
     text-transform: uppercase;
     font-weight: 800;
-    color: #000000;
     margin-left: 2rem;
     margin-right: 2rem;
   }

src/components/Footer.vue

 <template>
-  <footer class="footer container-fluid py-4">
-    <div class="d-flex flex-column align-items-center">
-      <p class="mb-2">PLATFORM ONE</p>
-      <div class="embed-responsive li-embed ">
-        <iframe class="embed-responsive-item" src="./static/li.html" />
+  <footer class="footer py-4">
+    <div class="container">
+      <div class="row tl-row">
+        <div
+          class="col-lg-2 col-md-6 mb-4 mb-lg-0 d-flex flex-column align-items-center"
+        >
+          <img
+            class="my-auto"
+            src="@/assets/images/icons/Logo_P1_Yodahead-WH.png"
+          />
+        </div>
+
+        <div
+          class="col-lg-2 col-md-6 mb-4 mb-lg-0 d-flex flex-column align-items-center"
+        >
+          <h6 class="mx-0 mt-auto">Get Connected</h6>
+          <div class="embed-responsive li-embed mb-auto">
+            <iframe class="embed-responsive-item" src="./static/li.html" />
+          </div>
+        </div>
+
+        <div
+          class="col-lg-4 col-md-6 mb-4 mb-lg-0 d-flex flex-column justify-content-center"
+        >
+          <div>
+            <img width="80" src="@/assets/images/branches/af-logo-white.png" />
+          </div>
+          United States Air Force Website
+        </div>
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <div class="d-flex flex-column mx-auto link-container">
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://software.af.mil"
+            >
+              Chief Software Officer Site
+            </ExternalLink>
+            <ExternalLink inline class="text-left" href="https://repo1.dsop.io">
+              Repo One
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://ironbank.dsop.io"
+            >
+              Iron Bank
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://software.af.mil/training/"
+            >
+              DevSecOps Training Resources
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://chat.collab.cdl.af.mil/"
+            >
+              Chat
+            </ExternalLink>
+            <ExternalLink
+              inline
+              class="text-left"
+              href="https://repo1.dsop.io/dsawg-devsecops/"
+            >
+              DSAWG on Repo1
+            </ExternalLink>
+          </div>
+        </div>
       </div>
     </div>
   </footer>
 </template>
 <script>
-export default {};
+import ExternalLink from "@/components/ExternalLink";
+export default {
+  components: {
+    ExternalLink
+  }
+};
 </script>
 <style lang="scss" scoped>
 .footer {
-  position: relative;
-  background-color: $primary-bg-color;
+  background-color: $secondary-bg-color;
+  color: $secondary-text-color;
   border-top: 1px solid #c6c6c6;
-  color: #000000;
 
-  p {
-    font-family: "Anton", sans-serif !important;
-    letter-spacing: 0.06rem;
-    font-size: 1.5rem;
+  .tl-row > * {
+    border-right: 1px solid #c6c6c6;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .link-container {
+    max-width: 255px;
+    a {
+      white-space: nowrap;
+    }
+  }
+
+  h6 {
+    color: $secondary-text-color;
   }
   .li-embed {
     height: 40px;
+    min-width: 130px;
+  }
+
+  @include media-breakpoint-down(md) {
+    .tl-row > * {
+      border-right: none;
+    }
+  }
+  @include media-breakpoint-down(sm) {
   }
 }
 </style>