From e636e2d438e02a61610453978bb9ba6211522e16 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Thu, 26 Oct 2023 19:04:22 +0530 Subject: [PATCH] customer quotesupdated with latest --- blocks/customerquote/customerquote.css | 0 blocks/customerquote/customerquote.js | 48 ++++++++++++++++ blocks/footer/footer.css | 7 ++- head.html | 4 +- styles/quotes_module.css | 78 ++++++++++++++++++++++++++ 5 files changed, 134 insertions(+), 3 deletions(-) create mode 100644 blocks/customerquote/customerquote.css create mode 100644 blocks/customerquote/customerquote.js create mode 100644 styles/quotes_module.css diff --git a/blocks/customerquote/customerquote.css b/blocks/customerquote/customerquote.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/customerquote/customerquote.js b/blocks/customerquote/customerquote.js new file mode 100644 index 00000000..9ddf1e80 --- /dev/null +++ b/blocks/customerquote/customerquote.js @@ -0,0 +1,48 @@ +export default function decorate(block) { + const clonedBlock = block.cloneNode(true); + // const sidebarDiv = document.createElement('div'); + // sidebarDiv.setAttribute('id', 'sidebar'); + const pictureElement = clonedBlock.querySelector('picture'); + const moduleDiv = document.createElement('div'); + moduleDiv.classList.add('hs_cos_wrapper', 'hs_cos_wrapper_widget', 'hs_cos_wrapper_type_module', 'module-1'); + moduleDiv.setAttribute('data-hs-cos-type', 'module'); + moduleDiv.setAttribute('data-hs-cos-general-type', 'widget'); + moduleDiv.setAttribute('id', clonedBlock.querySelector('h2').textContent.split(" ")[1]); + const quoteboxDiv = document.createElement('div'); + quoteboxDiv.classList.add('quote-box'); + const blockquoteDiv = document.createElement('blockquote'); + blockquoteDiv.classList.add('quote'); + blockquoteDiv.textContent = clonedBlock.querySelector('blockquote > p').textContent; + quoteboxDiv.append(blockquoteDiv); + const para = document.createElement('p'); + para.classList.add('details'); + const spanInside = document.createElement('span'); + spanInside.classList.add('name'); + spanInside.textContent = clonedBlock.querySelector('blockquote + p').textContent; + para.append(spanInside); + const spanTitle = document.createElement('span'); + spanTitle.classList.add('title'); + spanTitle.textContent = clonedBlock.querySelector('blockquote + p + p').textContent; + para.append(spanTitle); + quoteboxDiv.append(para); + const spanIconWrapper = document.createElement('span'); + spanIconWrapper.classList.add('accentColor1', 'fa'); + const spanIcon = document.createElement('i'); + spanIcon.classList.add('fa', 'fa-quote-right'); + spanIconWrapper.append(spanIcon); + quoteboxDiv.append(spanIconWrapper); + const imageWrapper = document.createElement('div'); + imageWrapper.classList.add('testimonial-headshot', 'text-center'); + const image = document.createElement('img'); + image.setAttribute('width', 279); + image.setAttribute('height', 325); + image.setAttribute('alt', 'Starter Culture Graphic'); + image.setAttribute('src', `${pictureElement.querySelector('img').src}`) + imageWrapper.append(image); + moduleDiv.append(quoteboxDiv); + moduleDiv.append(imageWrapper); + // sidebarDiv.append(moduleDiv) + block.textContent = ''; + block.append(moduleDiv); + // block.append(sidebarDiv); +} diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index f87465e2..51c5b25f 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -27,7 +27,10 @@ @media (max-width: 767px){ .footer-wrapper div#footer-black div { - display: block; + display: flex; + flex-direction: column; + text-align: left; + align-items: flex-start; } } @@ -39,7 +42,7 @@ .footer-wrapper div#footer-orange .outer{ grid-template-columns: 1fr; } - + .footer-wrapper div#footer-orange .outer .social-icons{ display: flex; justify-content: flex-end; diff --git a/head.html b/head.html index fe735228..b112beeb 100644 --- a/head.html +++ b/head.html @@ -6,4 +6,6 @@ - \ No newline at end of file + + + diff --git a/styles/quotes_module.css b/styles/quotes_module.css new file mode 100644 index 00000000..e15c98e8 --- /dev/null +++ b/styles/quotes_module.css @@ -0,0 +1,78 @@ +.quote-box { + background: #f5f5f5; + padding: 30px; + padding-bottom: 15px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + position: relative; + margin-bottom: 30px; +} + +.quote-box::after { + content: ""; + display: block; + width: 0; + height: 0; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid #f5f5f5; + position: absolute; + bottom: -20px; + margin-left: -20px; + left: 50%; +} + +.quote { + border: 0; + padding: 0; + font-size: 16px; + color: #666; + margin: 0px; +} + +.details { + font-size: 13px; +} + +.name { + display: block; + font-weight: normal; + font-family: "Montserrat", sans-serif; +} + +.quote-box .title { + display: block; + color: #b3b3b3; + margin-bottom: 0; + font-weight: normal; + font-size: 13px; +} + +.quote-box .fa { + font-size: 18px; + position: absolute; + right: 30px; + bottom: 30px; +} + +.img-rounded { + border-radius: 6px; +} + +.testimonial-headshot { + text-align: center; +} + +.testimonial-headshot img { + border-radius: 50%; + max-width: 150px !important; + max-height: 150px !important; + margin-top: -10px; + border: 5px solid #f5f5f5; +}