From b256ef1752905b108b7092ed202060b1adb27fc2 Mon Sep 17 00:00:00 2001
From: MANI <chandramanigupta2003@gmail.com>
Date: Mon, 7 Oct 2024 15:21:22 +0530
Subject: [PATCH 1/2] added Footer with all the icons

---
 index.html | 61 ++++++++++++++++++++++++++++++++++++++-------
 styles.css | 73 +++++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 102 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index 94d9a90..c1596f8 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css" type="text/css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="script.js" defer></script>
 </head>
 
@@ -27,9 +28,10 @@
             <li>
                 <a href="#">Join our Community</a>
                 <ul class="dropdown">
-                    <li><a href="#"> Whatsapp</a></li>
-                    <li><a href="#">Discord</a></li>
+                    <li><a href="#"> Whatsapp <img src="C:\Users\Ananya\OneDrive\Documents\GitHub\official-website\images\whatsapp-icon.png" alt="WhatsApp" width="20"></a></li>
+                    <li><a href="#">Discord <img src="C:\Users\Ananya\OneDrive\Documents\GitHub\official-website\images\discord-icon.png" alt="Discord" width="20"></a></li>
                 </ul>
+            </li>
             <li class="hamburger-menu">
                 <a href="javascript:void(0);" class="toggle-button">
                     <span class="bar"></span>
@@ -43,7 +45,6 @@
                     <li><a href="#">Follow Us</a></li>
                 </ul>
             </li>
-            </li>
         </ul>
     </nav>
 
@@ -84,10 +85,52 @@ <h2>About Community</h2>
         </div>
     </section>
 
-    <footer>
-
+    <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-logo-section">
+                <img src="/images/logo.png" class="footer-logo" alt="Code Social Logo">
+                <p>&copy; 2023 Code Social. All rights reserved.</p>
+            </div>
+            <div class="footer-links">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="#">About Us</a></li>
+                    <li><a href="#">Live Events</a></li>
+                    <li><a href="#">Join Our Team</a></li>
+                    <li><a href="#">Contact Us</a></li>
+                </ul>
+            </div>
+            <div class="footer-community">
+                <h3>Our Community</h3>
+                <ul>
+                    <li><a href="#">Discord Server</a></li>
+                    <li><a href="#">WhatsApp Group</a></li>
+                    <li><a href="#">LinkedIn Page</a></li>
+                    <li><a href="#">GitHub Organization</a></li>
+                </ul>
+            </div>
+            <div class="footer-social">
+                <h3>Connect With Us</h3>
+                <div class="social-icons">
+                    <a href="https://discord.gg/MSTNyRSPYW" target="_blank" aria-label="Join our Discord server">
+                        <i class="fab fa-discord"></i>
+                    </a>
+                    <a href="https://wa.me/your-whatsapp-number" target="_blank" aria-label="Connect on WhatsApp">
+                        <i class="fab fa-whatsapp"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/company/code-social/" target="_blank" aria-label="Follow us on LinkedIn">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                    <a href="https://github.com/your-github-org" target="_blank" aria-label="Check our GitHub">
+                        <i class="fab fa-github"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>Made with <i class="fas fa-heart"></i> by Code Social Community</p>
+        </div>
     </footer>
-
-</body>
-
-</html>
\ No newline at end of file
+    
+    </body>
+    </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 3473231..2897e48 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,3 @@
-
 /* Navbar Styling */
 * {
     margin: 0px;
@@ -192,28 +191,27 @@
 .social-icons img:hover {
     transform: scale(1.1); /* Slightly enlarge the icon on hover */
 }
-/* Footer Styles */
+
+
 .footer {
     background-color: #222;
     color: #fff;
-    padding: 20px 0;
+    padding: 40px 0 20px;
 }
 
 .footer-container {
     display: flex;
     justify-content: space-between;
-    align-items: center;
     flex-wrap: wrap;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }
 
-.footer-logo-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
+.footer-logo-section, .footer-links, .footer-community, .footer-social {
+    flex: 1;
+    min-width: 200px;
+    margin-bottom: 20px;
 }
 
 .footer-logo {
@@ -221,43 +219,51 @@
     margin-bottom: 10px;
 }
 
-.footer-links ul {
+.footer h3 {
+    font-size: 1.2rem;
+    margin-bottom: 15px;
+    color: #f39c12;
+}
+
+.footer ul {
     list-style-type: none;
     padding: 0;
 }
 
-.footer-links ul li {
-    margin: 5px 0;
+.footer ul li {
+    margin-bottom: 8px;
 }
 
-.footer-links ul li a {
+.footer ul li a {
     color: #fff;
     text-decoration: none;
     transition: color 0.3s;
 }
 
-.footer-links ul li a:hover {
-    color: #f39c12; /* Accent color for hover effect */
+.footer ul li a:hover {
+    color: #f39c12;
 }
 
-.footer-social a {
-    margin-right: 10px;
+.social-icons {
+    display: flex;
+    gap: 15px;
 }
 
-.footer-social a img {
-    width: 30px;
-    height: 30px;
-    transition: transform 0.3s;
+.social-icons a {
+    color: #fff;
+    font-size: 24px;
+    transition: color 0.3s, transform 0.3s;
 }
 
-.footer-social a img:hover {
+.social-icons a:hover {
+    color: #f39c12;
     transform: scale(1.1);
 }
 
 .footer-bottom {
     text-align: center;
     margin-top: 20px;
-    padding-top: 10px;
+    padding-top: 20px;
     border-top: 1px solid #444;
 }
 
@@ -266,3 +272,24 @@
     font-size: 14px;
 }
 
+.footer-bottom .fa-heart {
+    color: #e74c3c;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .footer-container {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .footer-logo-section, .footer-links, .footer-community, .footer-social {
+        width: 100%;
+        margin-bottom: 30px;
+    }
+
+    .social-icons {
+        justify-content: center;
+    }
+}
\ No newline at end of file

From 6c16d506a32092ca43d970deb2ef1fbe5a87ef92 Mon Sep 17 00:00:00 2001
From: MANI <chandramanigupta2003@gmail.com>
Date: Mon, 7 Oct 2024 23:57:31 +0530
Subject: [PATCH 2/2] resolved footer conflicts

---
 index.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index c1596f8..1de6f6f 100644
--- a/index.html
+++ b/index.html
@@ -131,6 +131,7 @@ <h3>Connect With Us</h3>
             <p>Made with <i class="fas fa-heart"></i> by Code Social Community</p>
         </div>
     </footer>
-    
-    </body>
-    </html>
\ No newline at end of file
+
+</body>
+
+</html>