add CSS grid styles for the footer

1 files changed, 40 insertions, 0 deletions

diff --git a/static/css/grid.css b/static/css/grid.css
index 71a2f9a..3e46450 100644
--- a/static/css/grid.css
+++ b/static/css/grid.css
@@ -34,4 +34,44 @@
 .banner-illustration {
     height: auto;
     width: 120%;
+}
+
+/* FOOTER */
+.footer {
+    display: grid;
+    grid-template-areas: "home links links" "social social social" "contact contact copy";
+}
+
+.footer-home {
+    grid-area: home;
+}
+
+.footer-links {
+    grid-area: links;
+}
+
+.footer-menu {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.footer-social {
+    display: grid;
+    grid-area: social;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.footer-contact {
+    display: grid;
+    grid-area: contact;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, 1fr);
+}
+
+.footer-copy {
+    grid-area: copy;
 }
\ No newline at end of file