diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 698ed8c..2d901b7 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -67,6 +67,55 @@ color: #fff; } +.footer-opco { + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: #1a1919; + color: #fff; +} + +.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: 37px; + filter: brightness(0) invert(1); +} + +@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 index d10901c..7fabce4 100644 --- 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,43 @@ export default async function decorate(block) { link.classList.add('text-normal'); } }); + + // eslint-disable-next-line + function footerOpco() { + const ulElement = document.createElement('ul'); + const items = [ + { href: 'https://www.abcam.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/abcam.svg', alt: 'Abcam' }, + { href: 'https://www.beckman.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/beckman.svg', alt: 'Beckman' }, + { href: 'https://www.idbs.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/idbs.svg', alt: 'IDBS' }, + { href: 'https://www.leica-microsystems.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/leica.svg', alt: 'Leica' }, + { href: 'http://www.moleculardevices.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/moldev.svg', alt: 'MolDev' }, + { href: 'http://www.phenomenex.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/phenomenex.svg', alt: 'Phenomenex' }, + { href: 'https://sciex.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/sciex.svg', alt: 'Sciex' }, + { href: 'https://www.aldevron.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/aldevron.svg', alt: 'Aldevron' }, + { href: 'https://www.idtdna.com?utm_source=aldevron_website&utm_medium=referral&utm_content=footer', src: '../../icons/opcos/idt.svg', alt: 'IDT' }, + ]; + 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; + imgElement.loading = 'lazy'; + 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/icons/opcos/abcam.svg b/icons/opcos/abcam.svg new file mode 100644 index 0000000..83d6190 --- /dev/null +++ b/icons/opcos/abcam.svg @@ -0,0 +1,27 @@ + + + + + + + + + + diff --git a/icons/opcos/aldevron.svg b/icons/opcos/aldevron.svg new file mode 100644 index 0000000..22d8f67 --- /dev/null +++ b/icons/opcos/aldevron.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/opcos/beckman.svg b/icons/opcos/beckman.svg new file mode 100644 index 0000000..8134a39 --- /dev/null +++ b/icons/opcos/beckman.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/opcos/idbs.svg b/icons/opcos/idbs.svg new file mode 100644 index 0000000..fde611d --- /dev/null +++ b/icons/opcos/idbs.svg @@ -0,0 +1,26 @@ + + + + + + + + + + diff --git a/icons/opcos/idt.svg b/icons/opcos/idt.svg new file mode 100644 index 0000000..cde0e34 --- /dev/null +++ b/icons/opcos/idt.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/opcos/leica.svg b/icons/opcos/leica.svg new file mode 100644 index 0000000..e2c43be --- /dev/null +++ b/icons/opcos/leica.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + diff --git a/icons/opcos/moldev.svg b/icons/opcos/moldev.svg new file mode 100644 index 0000000..d44675c --- /dev/null +++ b/icons/opcos/moldev.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/opcos/phenomenex.svg b/icons/opcos/phenomenex.svg new file mode 100644 index 0000000..fecb75e --- /dev/null +++ b/icons/opcos/phenomenex.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/opcos/sciex.svg b/icons/opcos/sciex.svg new file mode 100644 index 0000000..31b3872 --- /dev/null +++ b/icons/opcos/sciex.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + +