Merge pull request #120 from Dishika18/main

Improved Footer Section

about.html

@@ -32,11 +32,6 @@
             text-align: center;
             color: #2C3E50;
         }
-        p {
-            line-height: 1.6;
-            margin-bottom: 20px;
-            text-align: justify;
-        }
         a {
             color: #3498DB;
             text-decoration: none;
@@ -76,43 +71,159 @@
         .card p{
             color: black;
         }
+        .title{
+            color: white;
+        }
+        .container h2{
+            color: beige;
+        }
+        .dark-theme .card h3{
+            color: black;
+        }
+        /* Footer section */
+        footer {
+            background: linear-gradient(135deg, #1c1c1c, #333);
+            color: #e6e6e6;
+            padding: 20px 0;
+            position: relative;
+            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
+            overflow: hidden;
+            border-top-left-radius: 40px;
+            border-top-right-radius: 40px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
         .footer-content {
             display: flex;
-            justify-content: space-between;
-            padding: 20px;
-            background: #2C3E50;
-            color: #fff;
-            border-radius: 0 0 8px 8px;
+            justify-content: space-around;
+            align-items: flex-start;
+            padding: 40px 20px;
+            flex-wrap: wrap;
+            position: relative;
+            z-index: 2;
         }
+
         .footer-section {
             flex: 1;
-            padding: 10px;
+            margin: 15px;
+            min-width: 250px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 20px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .footer-section:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
         }
+
         .footer-section h3 {
-            margin-bottom: 15px;
-            font-size: 18px;
+            font-size: 2rem;
+            margin-bottom: 20px;
+            color: #ffffff;
+            background: linear-gradient(45deg, #007bff, #ff7bff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: 700;
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 10px;
+        }
+
+        .footer-section p,
+        .footer-section ul {
+            font-size: 1rem;
+            color: #ccc;
+        }
+
+        .footer-section ul {
+            list-style-type: none;
+            padding: 0;
         }
+
+        .footer-section ul li {
+            margin: 8px 0;
+        }
+
         .footer-section a {
-            color: #3498DB;
+            color: #e6e6e6;
+            text-decoration: none;
+            position: relative;
+            transition: color 0.3s ease, background 0.3s ease;
+        }
+
+        .footer-section a::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -2px;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, #007bff, #ff7bff);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.4s ease;
+        }
+
+        .footer-section a:hover::after {
+            transform: scaleX(1);
+        }
+
+        .footer-section a:hover {
+            color: #ff7bff;
         }
+
         .footer-bottom {
-            background: #1A252F;
-            color: #fff;
             text-align: center;
-            padding: 10px 0;
+            padding: 20px 0;
+            background-color: #151515;
+            font-size: 0.9rem;
+            position: relative;
+            z-index: 2;
         }
+
         .footer-bottom p {
-            text-align: center;
+            margin: 0;
+            color: #aaa;
+        }
 
+        .social {
+            margin-top: 20px;
         }
-        .title{
-            color: white;
+
+        .social a {
+            color: #fff;
+            font-size: 1.5rem;
+            margin-right: 15px;
+            transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
+            display: inline-block;
+            text-align: center;
+            padding: 10px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
         }
-        .container h2{
-            color: beige;
+
+        .social a:hover {
+            color: #ff7bff;
+            transform: scale(1.3);
+            box-shadow: 0 0 15px rgba(255, 123, 255, 0.7);
         }
-        .dark-theme .card h3{
-            color: black;
+
+        @media (max-width: 768px) {
+            .footer-content {
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+            }
+
+            .footer-section {
+                margin-bottom: 20px;
+            }
+
+            .social a {
+                margin-right: 10px;
+            }
         }
     </style>
 
@@ -189,10 +300,12 @@ <h2>Contact Us</h2>
         <div class="footer-content">
             <div class="footer-section about">
                 <h3>Math 4 Python</h3>
-                <p>Enhance your Python skills while solving math-focused challenges. Learn, code, and improve through interactive lessons with real-time feedback.</p>
-                <p><i class="fas fa-envelope"></i> [email protected]</p>
-                <p><i class="fas fa-phone"></i> +123 456 7890</p>
+                <p>Enhance your Python skills while solving math-focused challenges. Learn, code, and improve through
+                    interactive lessons with real-time feedback.</p>
+                <p><span class="fas fa-envelope"></span> [email protected]</p>
+                <p><span class="fas fa-phone"></span> +123 456 7890</p>
             </div>
+
             <div class="footer-section links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -203,14 +316,16 @@ <h3>Quick Links</h3>
                     <li><a href="faq.html">FAQs</a></li>
                 </ul>
             </div>
+
             <div class="footer-section social">
                 <h3>Follow Us</h3>
-                <a href="#"><i class="fab fa-facebook"></i></a>
-                <a href="#"><i class="fab fa-twitter"></i></a>
-                <a href="#"><i class="fab fa-linkedin"></i></a>
-                <a href="#"><i class="fab fa-github"></i></a>
+                <a href="#"><span class="fab fa-facebook"></span></a>
+                <a href="#"><span class="fab fa-twitter"></span></a>
+                <a href="#"><span class="fab fa-linkedin"></span></a>
+                <a href="#"><span class="fab fa-github"></span></a>
             </div>
         </div>
+
         <div class="footer-bottom">
             <p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
         </div>