Merge pull request #4 from Hack-TeeEssGee/ashwani/footer

footer added
Hack-TeeEssGee · Dec 8, 2021 · 1736d7e · 1736d7e
2 parents cc353a7 + c15b3fc
commit 1736d7e
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 2 deletions.
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -1,7 +1,143 @@
 const Footer = () => {
   return (
     <div className="footer">
-      <div>
+      <nav>
+        <div className="footer-column">
+
+          <h3>QUICK LINKS</h3>
+          <ul>
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="http://www.iitkgp.ac.in/">
+                IIT Kharagpur
+              </a>
+            </li>
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="http://erp.iitkgp.ac.in/">
+                ERP Portal
+              </a>
+            </li>
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="https://gymkhana.iitkgp.ac.in/">
+                TSG Website
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="footer-column">
+          <h3>RESOURCES</h3>
+          <ul>
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer noopener" 
+                href="https://wiki.metakgp.org/w/Main_Page"> 
+                MetaKGP
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="footer-column">
+          <h3>COMMUNITY</h3>
+          <ul>
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer noopener" 
+                href="https://github.com/tsg-iitkgp">
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer noopener" 
+                href="https://www.youtube.com/c/TechologyStudentsGymkhanaIITKharagpur">
+                YouTube
+              </a>
+            </li>
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer noopener" 
+                href="https://www.facebook.com/TSG.IITKharagpur/">
+                Facebook
+              </a>
+            </li>
+          </ul>
+
+        </div>
+        <div className="footer-column">
+          <h3>QUICK INFO</h3>
+          <ul>
+            <li>
+              <a
+                //target="_blank"
+                //rel="noreferrer noopener"
+                href="/#">
+                CDC Stats
+              </a>
+            </li>
+            <li>
+              <a
+                //target="_blank"
+                //rel="noreferrer noopener"
+                href="/#">
+                Hall of Residence
+              </a>
+            </li>
+            <li>
+              <a
+                //target="_blank"
+                //rel="noreferrer noopener"
+                href="/#">
+                Faculty
+              </a>
+            </li>
+          </ul>
+
+        </div>
+        <div className="footer-column">
+          <h3>TSG</h3>
+          <ul>
+            <li>
+              <a
+                //target="_blank"
+                //rel="noreferrer noopener"
+                href="/#">
+                Office Bearers
+              </a>
+            </li>
+            <li>
+              <a
+                //target="_blank"
+                //rel="noreferrer noopener"
+                href="/#">
+                Office Staff
+              </a>
+            </li>
+            <li>
+              <a
+                //target="_blank"
+                //rel="noreferrer noopener"
+                href="/#">
+                Secreteries
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div className="footer-title">
         Made for Technology Students’ Gymkhana by the Students of IIT Kharagpur.
       </div>
     </div>

diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
@@ -8,6 +8,74 @@
 
   div {
     margin: 1rem 0.5rem;
-    text-align: center;
+  }
+
+  nav {
+    width: 50rem;
+    display: flex;
+    justify-content: space-between;
+    margin: 2rem 0;
+    font-size: 0.9rem;
+
+    .footer-column {
+      margin: 0 1rem;
+      h3 {
+        font-weight: bold;
+        font-size: 0.9rem;
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin-top: 1.2rem;
+
+        li {
+          padding-bottom: 0.8rem;
+
+          a {
+            display: block;
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+              color: $text-secondary-color;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include sm {
+    nav {
+      flex-direction: column;
+      text-align: center;
+      width: 100vw;
+      height: 300px;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      .footer-column {
+        box-sizing: border-box;
+        max-width: 30%;
+      }
+    }
+  }
+
+  @include md {
+    nav {
+      flex-direction: column;
+      text-align: center;
+      width: 100vw;
+      justify-content: flex-start;
+      height: 300px;
+      flex-wrap: wrap;
+      .footer-column {
+        box-sizing: border-box;
+        max-width: 30%;
+      }
+    }
+  }
+  &-title {
+    color: $text-secondary-color;
   }
 }