Feature/customerquotes

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);
+}

blocks/footer/footer.css

@@ -39,7 +39,6 @@
   .footer-wrapper div#footer-orange .outer{
     grid-template-columns: 1fr;
   }
-
   .footer-wrapper div#footer-orange .outer .social-icons{
     display: flex;
     justify-content: flex-end;

head.html

@@ -6,4 +6,6 @@
 <link rel="stylesheet" href="/styles/Typo.css"/>
 <link rel="stylesheet" href="/styles/template.css"/>
 <link rel="stylesheet" href="/styles/responsive.css"/>
-<link rel="stylesheet" href="/styles/gcse.css"/>
+<link rel="stylesheet" href="/styles/gcse.css"/>
+<link rel="stylesheet" href="/styles/styles_2020.css"/>
+<link rel="stylesheet" href="/styles/quotes_module.css"/>

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;
+}