Added OpCo footer to the code.

hlxsites · Aug 12, 2024 · 8bd1be8 · 8bd1be8
1 parent b41b633
commit 8bd1be8
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 1 deletion.
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -67,6 +67,57 @@
   color: #fff;
 }
 
+.footer-opco {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background-color: black;
+  color: #fff;
+  justify-content: center;
+}
+
+.footer-opco ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 85%;
+}
+
+.footer-opco li {
+  flex: 1 1 calc(11.111% - 10px);
+  margin: 5px;
+  box-sizing: border-box;
+}
+
+.footer-opco a {
+  display: block;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+}
+
+.footer-opco img {
+  max-width: 100%;
+  height: auto;
+  filter: brightness(0) invert(1);
+  height: 37px;
+}
+
+@media (max-width: 768px) {
+  .footer-opco li {
+    flex: 1 1 calc(33.333% - 10px); 
+  }
+}
+
+@media (max-width: 479px) {
+  .footer-opco li {
+    flex: 1 1 calc(50% - 10px);
+  }
+}
+
 #footer-black img {
   width: 55px;
 }

diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -37,6 +37,7 @@ export default async function decorate(block) {
     }
     return allAnchorTags;
   }
+
   if (resp.ok) {
     const html = await resp.text();
     const topContainer = createDivElement('top-container', '');
@@ -74,7 +75,41 @@ export default async function decorate(block) {
         link.classList.add('text-normal');
       }
     });
+
+    function footerOpco() {
+      const ulElement = document.createElement('ul');
+      const items = [
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+        { href: 'https://www.aldevron.com/?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: 'https://lifesciences.danaher.com/media_142f5f1953984f372a389eba53a44db24cebcd3a8.svg?width=2000&format=webply&optimize=medium', alt: 'Image 1' },
+      ];
+      items.forEach(item => {
+        const liElement = document.createElement('li');
+        const aElement = document.createElement('a');
+        aElement.href = item.href;
+        aElement.target = '_blank';
+        const imgElement = document.createElement('img');
+        imgElement.src = item.src;
+        imgElement.alt = item.alt;
+        aElement.appendChild(imgElement);
+        liElement.appendChild(aElement);
+        ulElement.appendChild(liElement);
+      });
+
+      const footerContainer = document.createElement('div');
+      footerContainer.classList.add('footer-opco');
+      footerContainer.appendChild(ulElement);
+      document.body.appendChild(footerContainer);
+    }
+
     decorateIcons(footerWapper);
     block.append(topContainer);
+    footerOpco();
   }
 }
diff --git a/styles/template.css b/styles/template.css
@@ -730,7 +730,7 @@ body.sidebar-50 #sidebar {
 #footer-black {
     padding: 30px 0 40px;
     text-align: center;
-    width: 85%;
+    /* width: 85%; */
 }
 
 #footer-black #footer-logo {