fix: insert badge into footer

ocadotechnology · Feb 14, 2024 · 0109ee2 · 0109ee2
1 parent 8d1489d
commit 0109ee2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/portal/static/portal/img/10_years_anniversary.png b/portal/static/portal/img/10_years_anniversary.png
diff --git a/portal/static/portal/sass/partials/_footer.scss b/portal/static/portal/sass/partials/_footer.scss
@@ -104,6 +104,17 @@
   .form--row__input {
     flex: 1;
   }
+
+  .ten-yr-badge-desktop-or-tablet {
+    display: block;
+    position: static;
+    width: 45%;
+    margin: 50px 0 0 auto;
+  }
+
+  .ten-yr-badge-mobile {
+    display: none;
+  }
 }
 
 @media (max-width: $tablet-small-max-width) {
@@ -127,6 +138,17 @@
     .social-media a {
       @include _margin(0px, 10px, 0px, 10px);
     }
+
+    .ten-yr-badge-desktop-or-tablet {
+      position: static;
+      display: block;
+      width: 60%;
+      margin: 15px auto 0 auto;
+    }
+
+    .ten-yr-badge-mobile {
+      display: none;
+    }
   }
 }
 
@@ -152,5 +174,15 @@
     .landscape-logo {
       max-width: 60%;
     }
+
+    .ten-yr-badge-desktop-or-tablet {
+      display: none;
+    }
+
+    .ten-yr-badge-mobile {
+      display: block;
+      position: static;
+      width: 20%;
+    }
   }
-}
+}
diff --git a/portal/templates/portal/partials/footer.html b/portal/templates/portal/partials/footer.html
@@ -54,11 +54,13 @@
                         <a target="_blank" href="https://www.facebook.com/codeforlifeuk/"><span class="iconify" data-icon="mdi:facebook"></span></a>
                         <a target="_blank" href="https://twitter.com/codeforlifeuk"><span class="iconify" data-icon="ant-design:twitter-circle-filled"></span></a>
                     </div>
+                    <img class="ten-yr-badge-mobile" title="10 years anniversary" alt="10 years anniversary" src="{% static 'portal/img/10_years_anniversary.png' %}">
                     <img class="landscape-logo visible-sm visible-xs" title="Code for Life" alt="Code for Life" src="{% static 'portal/img/logo_cfl_white_landscape.png' %}">
                     <a target="_blank" href="https://www.ocadogroup.com/our-responsible-business/corporate-responsibility/skills-for-the-future">
                         <img title="Ocado Group" alt="Ocado Group" src="{% static 'portal/img/logo_ocado_group_white.svg' %}">
                     </a>
                 </div>
+                <img class="ten-yr-badge-desktop-or-tablet" title="10 years anniversary" alt="10 years anniversary" src="{% static 'portal/img/10_years_anniversary.png' %}">
             </div>
         </div>
         <p class="copyright">&copy; Ocado Group {% now "Y" %}</p>