Merge pull request #628 from TimOsahenru/update-footer-to-have-grid-sections

Update footer to have grid sections

Author: TimOsahenru

_includes/footer.html

@@ -1,13 +1,32 @@
 <footer role="contentinfo">
   <div class="wrapper">
-    <nav class="social-links">{%- include social.html -%}</nav>
-    <div class="footer-col-wrapper">
+    <div class="footer-grid">
+      <!-- About Us Section -->
       <div class="footer-col">
-        <a href="/coc/">Code of Conduct</a>
+        <h3>About us</h3>
+        <p>Black Python Devs is a US Non-Profit Organization under the fiscal hosting of the GNOME Foundation. The foundation aims to expand access to Python communities and resources to communities of Black Python Developers around the world.</p>
       </div>
+      <!-- Quick link Section -->
       <div class="footer-col">
-        <small>&copy; {{ 'now' | date: "%Y" }} {{ site.domain }}</small>
+        <h3>Quick link</h3>
+        <ul>
+          <li><a href="/about/">About Us</a></li>
+          <li><a href="/event/">Events</a></li>
+          <li><a href="/community/">Community</a></li>
+          <li><a href="/support/">Support</a></li>
+        </ul>
       </div>
+      <!-- Contact Us Section -->
+      <div class="footer-col">
+        <h3>Contact Us</h3>
+        <address>
+          <p>Email: <a href="mailto:[email protected]">[email protected] </a></p>
+        </address>
+        <nav>{%- include social.html -%}</nav>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <small>&copy; {{ 'now' | date: "%Y" }} {{ site.domain }}</small>
     </div>
   </div>
 </footer>

assets/css/bpd.css

@@ -369,19 +369,6 @@ footer {
   margin-left: 0;
 }
 
-.footer-col {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.footer-col-wrapper,
-.social-links {
-  font-size: 0.9375rem;
-  color: var(--minima-brand-color);
-}
-
 .social-media-list {
   display: table;
   margin: 0 auto;
@@ -414,14 +401,6 @@ footer {
   vertical-align: text-bottom;
 }
 
-.wrapper {
-  max-width: calc(800px - (30px));
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
 @media screen and (min-width: 800px) {
   .wrapper {
     max-width: calc(800px - (30px * 2));
@@ -430,12 +409,6 @@ footer {
   }
 }
 
-.wrapper:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 .page-content {
   padding: 30px 0;
   flex: 1 0 auto;
@@ -523,37 +496,102 @@ ul.speaking-list {
   }
 }
 
-.pagination {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 50px;
 }
 
-.pagination a {
+.footer-col {
+  padding: 10px;
+}
+
+.footer-col h3 {
+  margin-bottom: 10px;
+  font-size: 2em;
+}
+
+.footer-col ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-col ul li {
+  margin-bottom: 5px;
+}
+
+.footer-col ul li a {
   text-decoration: none;
-  padding: 5px 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  color: #007acc;
+  color: #007b95;
+  font-size: 16px;
 }
 
-.pagination a:hover {
-  background-color: #007acc;
-  color: #fff;
+.footer-col address p {
+  margin: 0 0 5px;
 }
 
-.pagination .current {
-  padding: 5px 10px;
-  border: 1px solid #007acc;
-  background-color: #007acc;
-  color: white;
-  border-radius: 4px;
+.footer-bottom {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 0.875em;
+  color: #555;
 }
 
-.pagination .disabled {
-  padding: 5px 10px;
-  border: 1px solid #ddd;
-  color: #aaa;
-  cursor: not-allowed;
+@media (max-width: 768px) {
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+
+  .footer-col h3 {
+    font-size: 1.5em;
+  }
+
+  .footer-col ul li a {
+    font-size: 14px;
+  }
+
+  .footer-bottom {
+    font-size: 0.75em;
+  }
+  .pagination {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pagination a {
+    text-decoration: none;
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    color: #007acc;
+  }
+
+  .pagination a:hover {
+    background-color: #007acc;
+    color: #fff;
+  }
+
+  .pagination .current {
+    padding: 5px 10px;
+    border: 1px solid #007acc;
+    background-color: #007acc;
+    color: white;
+    border-radius: 4px;
+  }
+
+  .pagination .disabled {
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+    color: #aaa;
+    cursor: not-allowed;
+  }
 }