From fae46cf033c9e4fe1b1f011b40750c357d711fae Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Wed, 22 Nov 2023 04:41:37 +0530 Subject: [PATCH] Updated the code based on requirement --- blocks/herobanner/herobanner.css | 88 +++++++++---------------------- blocks/herobanner/herobanner.js | 35 +++--------- icons/about-pattern.png | Bin 0 -> 10413 bytes styles/styles_2020.css | 6 --- 4 files changed, 30 insertions(+), 99 deletions(-) create mode 100644 icons/about-pattern.png diff --git a/blocks/herobanner/herobanner.css b/blocks/herobanner/herobanner.css index 5cb407b1..b79767aa 100644 --- a/blocks/herobanner/herobanner.css +++ b/blocks/herobanner/herobanner.css @@ -1,80 +1,40 @@ -.hero-banner { - position: relative; - width: 100%; - height: 480px; - opacity: 1; - transition-duration: 0ms; - background-size: cover; +.module.split-bg::before { + background-image: url('../../icons/about-pattern.png'); } -.hero-banner.right-content .arrow { - position: absolute; - zoom: 1; - background: url('//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png') 0 50% no-repeat; - background-size: cover; - height: 100%; - right: 0; - top: 0; - width: 50%; -} - -.hero-banner picture * { - height: 100%; -} - -.hero-banner .content { - position: absolute; - right: 140px; - z-index: 30; - top: 30px; - width: 25%; - text-align: left; - padding: 70px 40px 40px 5px; - margin: auto; -} - -.hero-banner .content .title, .hero-banner .content .description { +.herobanner .content .title, .hero-banner .content .description, p { color: #fff; font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif; - letter-spacing: 1px; - padding: 0 0 15px; -} - -.hero-banner .content .title { - font-family: Brown-Ald,Helvetica,Arial,sans-serif; - font-weight: 700; - font-size: 30px; - letter-spacing: -.02em; - line-height: normal; - margin: 0; - padding: 0 0 0.5em; -} - -.hero-banner .content .description { - font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif; - font-size: 14px; - font-weight: 400; - line-height: 23.2px; - text-align: left; - padding: 0.6em 0; + padding: 15px 0; } -.hero-banner .content .button { - font-weight: 400; - line-height: 18px; - font-size: 18px; - border: 1px solid #fff; - font-family: Brown-Ald,Helvetica,Arial,sans-serif; - transition: background .3s; +.herobanner h1, .herobanner h2, .herobanner h3, .herobanner h4, .herobanner h5, .herobanner h6 { + color: #fff; + padding: 0 0 15px; } -.content .button { +.herobanner .content .button { background: transparent; border: 1px solid #fff; color: #fff; } -button{ +.herobanner button{ font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif; } + +@media (max-width: 1024px) { + .herobanner h1, .herobanner h2, .herobanner h3, .herobanner h4, .herobanner h5, .herobanner h6 { + padding: 0; + } +} + +@media (max-width: 767px) { + .module.wide-section .outer { + background-image: url('../../icons/about-pattern.png'); + background-position: 100% 50%; + background-repeat: no-repeat; + background-size: auto 130%; + } +} \ No newline at end of file diff --git a/blocks/herobanner/herobanner.js b/blocks/herobanner/herobanner.js index c84d351d..ad037633 100644 --- a/blocks/herobanner/herobanner.js +++ b/blocks/herobanner/herobanner.js @@ -1,39 +1,16 @@ export default function decorate(block) { - const clonedBlock = block.cloneNode(true); - const paras = block.querySelectorAll('p'); - const pictureElement = clonedBlock.querySelector('picture'); + const imageContaner = block.children[0]; const moduleDiv = document.createElement('div'); moduleDiv.classList.add('module', 'mmg-rich-columns', 'padding-all', 'custom-bg', 'bg', 'wide-section', 'split-bg', 'style-standard'); - moduleDiv.style.backgroundColor = '#fff'; - moduleDiv.style.backgroundImage = `url(${pictureElement.querySelector('img').src})`; + moduleDiv.style.backgroundImage = `url(${imageContaner.querySelector('img').src})`; + const contentContainer = block.children[1]; const outDiv = document.createElement('div'); outDiv.classList.add('outer'); const contentDiv = document.createElement('div'); contentDiv.classList.add('content'); outDiv.append(contentDiv); - const colWithCtaDiv = document.createElement('div'); - colWithCtaDiv.classList.add('col', 'with-cta'); - contentDiv.append(colWithCtaDiv); - const textDiv = document.createElement('div'); - textDiv.classList.add('text'); - colWithCtaDiv.append(textDiv); - const h2 = document.createElement('h2'); - h2.classList.add('title'); - h2.textContent = paras[0].textContent; - textDiv.append(h2); - const p = document.createElement('p'); - const span = document.createElement('span'); - textDiv.append(p); - p.append(span); - const text1 = paras[1]; - span.textContent = text1.textContent; - const p2 = document.createElement('p'); - p2.classList.add('actions'); - const anchorTag = block.querySelector('p.button-container a'); - anchorTag.removeAttribute('title'); - p2.append(anchorTag); - textDiv.append(p2); - moduleDiv.append(outDiv); + contentDiv.appendChild(contentContainer); + moduleDiv.appendChild(outDiv); block.textContent = ''; - block.append(moduleDiv); + block.appendChild(moduleDiv); } diff --git a/icons/about-pattern.png b/icons/about-pattern.png new file mode 100644 index 0000000000000000000000000000000000000000..9759b6645ced721a7aa48c99b12661f876ecc9f5 GIT binary patch literal 10413 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