added a footer

tigergraph · Nov 8, 2021 · 0af698f · 0af698f
1 parent 9f6c687
commit 0af698f
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 3 deletions.
diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip
diff --git a/src/css/footer.css b/src/css/footer.css
@@ -1,4 +1,4 @@
-footer.footer {
+/* footer.footer {
   background-color: var(--footer-background);
   color: var(--footer-font-color);
   font-size: calc(15 / var(--rem-base) * 1rem);
@@ -12,4 +12,142 @@ footer.footer {
 
 .footer a {
   color: var(--footer-link-font-color);
+} */
+
+.footer {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 50px 30px 20px 80px;
+  color: #2f2f2f;
+  border-top: 1px solid #e5e5e5;
+  font-family: acumin-pro, system-ui, sans-serif;
+  margin: 0;
+  grid-template-rows: auto 1fr auto;
+  font-size: 14px;
+  background-color: #f4f4f4;
+  align-items: start;
+}
+
+#footer-logo {
+  margin-bottom: 25px;
+  height: 34px;
+  background: url(https://www.tigergraph.com/wp-content/uploads/2020/05/TG_LOGO.svg) no-repeat;
+}
+
+.footer > * {
+  flex: 1 100%;
+}
+
+.footer__addr {
+  margin-right: 1.25em;
+  margin-bottom: 2em;
+}
+
+.footer__logo {
+  font-family: 'Pacifico', cursive;
+  font-weight: 400;
+  text-transform: lowercase;
+  font-size: 1.5rem;
+}
+
+.footer__addr h2 {
+  margin-top: 1.3em;
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.nav__title {
+  font-weight: 400;
+  font-size: 15px;
+}
+
+.footer address {
+  font-style: normal;
+  color: #999;
+}
+
+.footer__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  max-width: max-content;
+  background-color: rgb(33, 33, 33, 0.07);
+  border-radius: 100px;
+  color: #2f2f2f;
+  line-height: 0;
+  margin: 0.6em 0;
+  font-size: 1rem;
+  padding: 0 1.3em;
+}
+
+.footer ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.footer li {
+  line-height: 2em;
+}
+
+.footer a {
+  text-decoration: none;
+}
+
+.footer__nav {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.footer__nav > * {
+  flex: 1 50%;
+  margin-right: 1.25em;
+}
+
+.nav__ul a {
+  color: #999;
+}
+
+.nav__ul--extra {
+  column-count: 2;
+  column-gap: 1.25em;
+}
+
+.legal {
+  display: flex;
+  flex-wrap: wrap;
+  color: #999;
+}
+
+.legal__links {
+  display: flex;
+  align-items: center;
+}
+
+.heart {
+  color: #2f2f2f;
+}
+
+@media screen and (min-width: 24.375em) {
+  .legal .legal__links {
+    margin-left: auto;
+  }
+}
+
+@media screen and (min-width: 40.375em) {
+  .footer__nav > * {
+    flex: 1;
+  }
+
+  .nav__item--extra {
+    flex-grow: 2;
+  }
+
+  .footer__addr {
+    flex: 1 0;
+  }
+
+  .footer__nav {
+    flex: 2 0;
+  }
 }
diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs
@@ -1,9 +1,85 @@
-<footer class="footer">
+{{!-- <footer class="footer">
   <div class="footer-columns">
     <div>
       <p> <a href="https://www.tigergraph.com/support/">Support</a> | <a href="https://community.tigergraph.com/">Community</a> | <a href="https://www.tigergraph.com/contact/">Contact</a> </p>
       <p> <a href="https://www.linkedin.com/company/tigergraph/">Linkedin</a> | <a href="https://www.facebook.com/TigerGraphDB/">Facebook</a> | <a href="https://twitter.com/tigergraphdb">Twitter</a> | <a>GitHub</a></p>
       <p> Copyright © 2021 TigerGraph | <a href="https://www.tigergraph.com/privacy-policy/">Privacy Policy</a></p> 
     </div>
   </div>
-</footer>
+</footer> --}}
+
+<footer class="footer">
+  <div class="footer__addr">
+    <div id="footer-logo" alt="TigerGraph Logo"> </div>
+
+    <address>
+      3 Twin Dolphin Drive, Ste 225<br>
+      Redwood City, CA 94065<br>
+    </address>
+  </div>
+
+  <ul class="footer__nav">
+
+    <li class="nav__item nav__item--extra">
+      <h2 class="nav__title">Resources</h2>
+
+      <ul class="nav__ul nav__ul--extra">
+        <li>
+          <a href="https://www.tigergraph.com/support/">Support</a>
+        </li>
+
+        <li>
+          <a href="https://community.tigergraph.com/">Community</a>
+        </li>
+
+        <li>
+          <a href="https://developers.tigergraph.com/">Developer Site</a>
+        </li>
+
+        <li>
+          <a href="https://testdrive.tigergraph.com/">Test Drive</a>
+        </li>
+      </ul>
+    </li>
+
+    <li class="nav__item">
+      <h2 class="nav__title">Social</h2>
+
+      <ul class="nav__ul">
+        <li>
+          <a href="https://www.linkedin.com/company/tigergraph/">Linkedin</a>
+        </li>
+
+        <li>
+          <a href="https://www.facebook.com/TigerGraphDB/">Facebook</a>
+        </li>
+
+        <li>
+          <a href="https://twitter.com/tigergraphdb">Twitter</a>
+        </li>
+      </ul>
+    </li>
+
+    <li class="nav__item">
+      <h2 class="nav__title">Legal</h2>
+
+      <ul class="nav__ul">
+        <li>
+          <a href="https://www.tigergraph.com/privacy-policy/">Privacy Policy</a>
+        </li>
+
+        <li>
+          <a href="https://www.tigergraph.com/terms/">Terms of Use</a>
+        </li>
+
+        <li>
+          <a href="/sitemap.xml">Sitemap</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <div class="legal">
+    <p>Copyright © 2021 TigerGraph</p>
+  </div>
+</footer>