Merge pull request #93 from akshayks13/main

Enhanced the footer section in the index.html file
GarimaSingh0109 · Oct 2, 2024 · 459fad9 · 459fad9
2 parents da240a0 + afeec9c
commit 459fad9
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 119 deletions.
diff --git a/index.html b/index.html
@@ -142,125 +142,6 @@
             font-style: italic;
         }
 
-        /* Footer Styles */
-        .footer {
-            background-color: #aca7eb;
-            color: #ffffff;
-            padding: 40px 0;
-        }
-
-        .footer-content {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-
-        .footer-section {
-            flex: 1;
-            margin-bottom: 20px;
-            min-width: 200px;
-        }
-
-        .text {
-            padding-right: 20px; 
-            max-width: 50%; 
-        }
-        .image {
-            max-width: 50%; 
-        }
-        .image img {
-            width: 100%; 
-            height: auto;
-            border-radius: 5px; 
-
-
-        .footer-section h3 {
-            font-size: 18px;
-            font-weight: 700;
-            margin-bottom: 15px;
-            color: #ffffff;
-        }
-
-        .footer-section ul {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        .footer-section ul li {
-            margin-bottom: 8px;
-
-        }
-
-        .footer-section ul li a {
-            color: #e0e0e0;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-
-        .footer-section ul li a:hover {
-            color: #ffffff;
-            text-decoration: underline;
-        }
-
-        .social-icons {
-            margin-top: 15px;
-        }
-
-        .social-icons a {
-            color: #ffffff;
-            font-size: 20px;
-            margin-right: 15px;
-            transition: color 0.3s ease;
-        }
-
-        .social-icons a:hover {
-            color: #e0e0e0;
-        }
-
-        .footer-bottom {
-            text-align: center;
-            padding-top: 20px;
-            margin-top: 20px;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        /* Responsive Styles */
-        @media (max-width: 768px) {
-            .navbar {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-
-            .navbar ul {
-                flex-direction: column;
-                gap: 10px;
-                margin-top: 10px;
-            }
-
-            .hero-content {
-                flex-direction: column;
-            }
-
-            .hero-text {
-                padding-right: 0;
-                margin-bottom: 30px;
-            }
-
-            .features-card, .testimonial-card {
-                width: 100%;
-            }
-
-            .footer-content {
-                flex-direction: column;
-            }
-
-            .footer-section {
-                margin-bottom: 30px;
-            }
-        }
     </style>
 </head>
 <body>

diff --git a/style.css b/style.css
@@ -168,8 +168,96 @@ body {
 }
 
 
+/* Footer Styles */
+.footer {
+    background-color: #1a1a1a;
+    color: #fff;
+    padding: 40px 0;
+    font-size: 14px;
+}
+
+.footer .footer-content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.footer .footer-section {
+    flex-basis: 23%;
+    margin-bottom: 20px;
+}
+
+.footer .footer-section h3 {
+    font-size: 18px;
+    margin-bottom: 20px;
+    font-weight: 600;
+    color: #fff;
+    border-bottom: 2px solid #00c6ff;
+    padding-bottom: 10px;
+}
+
+.footer .footer-section ul {
+    list-style: none;
+    padding: 0;
+}
+
+.footer .footer-section ul li {
+    margin-bottom: 10px;
+}
+
+.footer .footer-section ul li a {
+    color: #ccc;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer .footer-section ul li a:hover {
+    color: #00c6ff;
+}
+
+.footer .footer-section .social-icons a {
+    margin-right: 10px;
+    color: #ccc;
+    text-decoration: none;
+    font-size: 18px;
+    transition: color 0.3s ease;
+}
+
+.footer .footer-section .social-icons a:hover {
+    color: #00c6ff;
+}
+
+.footer-bottom {
+    text-align: center;
+    padding: 20px 0;
+    background-color: #111;
+    font-size: 12px;
+}
 
+.footer-bottom p {
+    margin: 0;
+    color: #ccc;
+}
+
+/* Responsive Footer */
+@media (max-width: 768px) {
+    .footer .footer-content {
+        flex-direction: column;
+        align-items: center;
+    }
 
+    .footer .footer-section {
+        flex-basis: 100%;
+        text-align: center;
+    }
+
+    .footer .footer-section ul li {
+        margin-bottom: 8px;
+    }
+}
 
 
 /* media queries */