Style Footer

src/components/Footer.css

@@ -1,12 +1,32 @@
 .footer {
-    background-color: #333;
-    text-align: center;
-    padding: 10px 0;
-    position: relative;
-    bottom: 0; /* Stick to the bottom */
-    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: #0b0b0b;
+    color: white;
+    padding: 10px 20px;
 }
 
-.footer p {
-    color: #d4d1c6;
+.footer-links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer-links a {
+    color: gray;
+    text-decoration: none;
+    margin: 5px 0;
+    user-select: none;
+    outline: none;
+}
+
+.footer-links a:hover {
+    text-decoration: none;
+    opacity: 0.8;
+}
+
+.footer-title {
+    text-align: center;
+    flex: 0 0 auto;
 }

src/components/Footer.js

@@ -4,7 +4,18 @@ import './Footer.css';
 const Footer = () => {
     return (
         <footer className="footer">
-            <p>&copy; {new Date().getFullYear()} Jake Runyan</p>
+            <div className="footer-links left">
+                <a href="https://github.com/runyanjake/jakesphotos" rel="noopener noreferrer">GitHub</a>
+                <a href="https://www.instagram.com/jakerunyanphotography" rel="noopener noreferrer">Instagram</a>
+            </div>
+            <div className="footer-title">
+                <p>&copy; {new Date().getFullYear()} Jake Runyan</p>
+            </div>
+            <div className="footer-links right">
+                <a href="/">Home</a>
+                <a href="/contact">Contact</a>
+                <a href="/about">About</a>
+            </div>
         </footer>
     );
 };