feat: index footer with social media links

DuoAlly · Jan 9, 2025 · 9634c8f · 9634c8f
1 parent eed4fd8
commit 9634c8f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,9 @@
 	<link rel="icon" type="image/jpeg" href="./images/logo.jpg">
 	<link rel="stylesheet" href="style.css">
 	<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 </head>
+
 <body>
 	<header>
 		<div class="container header-content" data-aos="fade-up">
@@ -98,9 +100,26 @@ <h3>Current Research Areas</h3>
         </div>
     </section>
 
-    <footer>
-        <div class="container footer-content">
-            <p>&copy; 2025 DuoAlly AI | <a href="https://github.com/DuoAlly">GitHub Repository</a></p>
+	<footer class="footer">
+        <div class="social-links">
+			<a href="https://github.com/DuoAlly" class="social-icon" target="_blank">
+                <i class="fab fa-github"></i>
+                <span>GitHub</span>
+            </a>
+			<a href="https://x.com/DuoallyAI" class="social-icon" target="_blank">
+                <svg viewBox="0 0 24 24">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+                </svg>
+                <span>X</span>
+            </a>
+            <a href="https://www.linkedin.com/company/duoally/" class="social-icon" target="_blank">
+                <i class="fab fa-linkedin" ></i>
+                <span>LinkedIn</span>
+            </a>
+
+        </div>
+        <div class="copyright">
+            © 2025 DuoAlly AI. All rights reserved.
         </div>
     </footer>
 

diff --git a/style.css b/style.css
@@ -182,23 +182,46 @@ section {
 
 /* Footer */
 footer {
-    background: var(--text);
+    background: #333;
     color: var(--white);
-    padding: 4rem 0;
-    margin-top: 4rem;
+    padding: 1rem 0;
+    margin-top: 1rem;
+	text-align: center;
 }
 
 .footer-content {
     text-align: center;
 }
 
-.footer-content a {
-    color: var(--primary);
-    text-decoration: none;
+.social-links {
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
+	margin-bottom: 1rem;
 }
 
-.footer-content a:hover {
-    text-decoration: underline;
+.social-icon {
+	color: white;
+	text-decoration: none;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	transition: color 0.3s ease;
+}
+
+.social-icon:hover {
+	color: #2563EB;
+}
+
+.social-icon svg {
+	width: 18px;
+	height: 18px;
+	fill: currentColor;
+}
+
+.copyright {
+	font-size: 0.9rem;
+	opacity: 0.8;
 }
 
 /* Animation Classes */
@@ -287,7 +310,7 @@ footer {
     }
 }
 
-/* robot animation css */
+/* Robot Animation*/
 .robot-container {
 	background: transparent;
 	display: flex;
@@ -422,4 +445,4 @@ footer {
 	0% { filter: hue-rotate(0deg); }
 	50% { filter: hue-rotate(180deg); }
 	100% { filter: hue-rotate(360deg); }
-}
+}