issue Rakesh9100#8 Footer UI

index.html

@@ -79,13 +79,40 @@ <h2 class="section-title">Upcoming Events</h2>
     </a>
 
     <footer class="footer">
-        <div class="container">
-            <p class="copyright">Created By Rakesh Roshan ❤️ | ©
-                <script>
-                    document.write(new Date().getFullYear());
-                </script>: All Rights Reserved
-            </p>
-        </div>
+        <footer class="footer">
+                <div class="container">
+                    <div class="contact-us">
+                        <h3 id="contactus">Contact Us</h3>
+                        <p>Email: [email protected]</p>
+                        <p>Phone: +91XXXXXXXXXX</p>
+                        <p>Address: Jharkhand, India</p>
+                    </div>
+
+                    <div class="quick-links">
+                        <h3>Quick Links</h3>
+                        <ul>
+                            <li><a href="index.html">Home</a></li>
+                            <li><a href="/assets/about/about.html">About</a></li>
+                            <li><a href="#events">upcoming-Events</a></li>
+                            <li><a href="./assets/pastevents/pastevents.html">Past Events</a></li>
+                            <li><a href="./assets/contact/contact.html">Contact</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="followus">
+                        <h3>Follow Us</h3>
+                        <div class="follow-icons">
+                            <a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
+                            <a href="https://x.com/i/flow/login?lang=en"><i class="fab fa-twitter"></i></a>
+                           <a href="https://canary.discord.com/login"><i class="fab fa-discord"></i></a>
+                           <a href="https://github.com/login"> <i class="fab fa-github"></i></a>
+                            <a href="https://api.linkedin.com/login"><i class="fab fa-linkedin"></i></a>
+                        </div>
+                    </div>
+                </div>
+
+                <p class="copyright">Created By Rakesh Roshan ❤️ | © <script>document.write(new Date().getFullYear());</script> All Rights Reserved</p>
+
     </footer>
     <script src="script.js"></script>
 </body>

style.css

@@ -558,4 +558,92 @@ body {
         break-inside: avoid;
         page-break-inside: avoid;
     }
-}
+}
+/* Footer */
+.footer {
+    background-color: #333;
+    color: #fff;
+    padding: 2rem 0;
+    text-align: center;
+}
+
+
+.footer .contact-us,
+.footer .followus,
+.footer .quick-links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+.footer h3 {
+    margin-bottom: 1rem;
+}
+
+
+.footer ul {
+    list-style: none;
+    padding: 0;
+}
+
+
+.footer ul li {
+    margin-bottom: 0.5rem;
+}
+
+
+.footer ul li a {
+    text-decoration: none;
+    color: #b197fc;
+}
+
+
+.footer .follow-icons i {
+    font-size: 1.5rem;
+    margin: 0 0.5rem;
+}
+
+
+.footer .copyright {
+    margin-top: 1.5rem;
+    font-size: 0.9rem;
+}
+@media screen and (min-width: 768px) {
+    .footer .container {
+        display: flex;
+        justify-content: space-around;
+        align-items: start;
+    }
+
+
+    .footer .follow-icons {
+        text-align: center;
+    }
+
+
+    .footer .copyright {
+        text-align: center;
+        margin-top: 1rem;
+    }
+}
+
+
+.to-top {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    background-color: #333;
+    color: #fff;
+    border-radius: 50%;
+    padding: 0.5rem;
+    text-align: center;
+    text-decoration: none;
+}
+.followus a{
+    color: white;
+
+
+}
+.followus a :hover{
+    color:rgb(193, 104, 193);
+}