diff --git a/assets/css/style.css b/assets/css/style.css
index 5af72e81..ccf290ab 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -801,16 +801,41 @@ hr.-even {
/* footer - Start */
footer {
- margin-top: 2px;
background-color: var(--wtf-footer-grey);
color: white;
- padding: 3% 1%;
+ padding: 0 0 3% 0;
+ display: grid;
+ grid-template-rows: 46px auto;
+ grid-template-columns: auto 68px 15%;
+}
+
+.footer__wrapper {
+ grid-column: 1 / span 3;
display: flex;
flex-direction: row;
justify-content: center;
+ padding-top: 3%;
+ max-width: 1200px;
+ margin: 0 auto;
}
-.footer__wrapper, .footer__nav {
+.footer__top_bar_left {
+ background-color: var(--wtf-light-grey);
+}
+
+.footer__top_bar_mid {
+ background-image: url("../images/footer_triangles.svg");
+}
+
+.footer__top_bar_right {
+ background-color: var(--wtf-footer-grey);
+}
+
+.footer__content_box {
+
+}
+
+.footer__nav {
display: flex;
flex-direction: row;
justify-content: center;
@@ -1464,4 +1489,28 @@ footer {
max-width: 450px;
}
/* homepage - end */
+
+ /* footer - start */
+ footer {
+ grid-template-rows: 23px auto;
+ grid-template-columns: auto 34px 15%;
+ }
+
+ .footer__wrapper {
+ padding: 6% 0%;
+ }
+ .footer__nav {
+ flex-direction: column;
+ }
+
+ .footer__navitem {
+ margin: 1rem 0;
+ padding: 0;
+ order: 2;
+ }
+
+ .footer__navitem.-second {
+ order: 1;
+ }
+ /* footer - end */
}
diff --git a/assets/images/footer_triangles.svg b/assets/images/footer_triangles.svg
new file mode 100644
index 00000000..814a5164
--- /dev/null
+++ b/assets/images/footer_triangles.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/templates/layout.html b/templates/layout.html
index 3e2e71cd..77165f9d 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -74,31 +74,34 @@ __ ____________________