Merge pull request #17 from markszulc/featureblock

Featureblock

blocks/cards/cards.css

@@ -60,6 +60,13 @@
   .fullwidth > ul > li:nth-child(even) {
     flex-direction: row-reverse;
   }
+
+ .reverse > ul > li {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    max-width: 1280px;
+    margin: auto;
+  }
 }
 
 .fullwidth ul li picture img {
@@ -103,16 +110,31 @@
   }
 }
 
+.fullwidth.reverse > ul > li:nth-child(odd) .cards-card-body{
+  padding: 0px;
+  width: 420px;
+}
+
+
+
 .fullwidth > ul > li:nth-child(odd) .cards-card-body{
   padding: 0 40px;
+
 }
 
+
+
 @media (min-width: 960px) {
+
   .fullwidth > ul > li:nth-child(odd) .cards-card-body{
     padding-left: 150px;
   }
+
+
+
 }
 
+
 .fullwidth .cards-card-body h3 {
   font-size: 36px;
 }

blocks/feature/feature.css

@@ -0,0 +1,148 @@
+.section > .feature-wrapper {
+  margin: 80px auto 0px;
+  max-width: 1920px;
+
+}
+
+.feature {
+  margin: 40px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 1920px;
+  padding: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.feature-content-container {
+  color: #fff;
+  height: 500px;
+}
+
+@media (min-width: 1280px) {
+  .feature {
+    flex-basis: 50%;
+    flex-direction: row;
+  }
+
+  .feature-content-container {
+  flex-basis: 50%;
+  }
+}
+
+.feature-content-media {
+  position: absolute;
+  z-index: 1;
+
+}
+
+.feature-content-media p {
+  margin: 0;
+}
+
+.feature-content-media img {
+  width: 100%;
+   object-fit: cover;
+
+}
+
+.feature-content-media picture::after {
+  content:'';
+  position:absolute;
+  left:0; top:0;
+  width:100%; height:500px;
+  display:inline-block; 
+  background: linear-gradient(to right, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.0))
+
+}
+
+.feature-content-wrapper {
+  position: relative;
+  z-index: 4;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  margin: 100px;
+  text-align: center;
+  justify-content: space-around;
+
+}
+
+.feature-content-wrapper h3 {
+  margin-bottom: 0;
+}
+
+.feature-content-wrapper p {
+  margin-top: 10px;
+}
+
+.feature-callout-wrapper {
+  z-index: 6;
+  background-color: #171C29;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: #fff;
+  flex-basis: 50%;
+  margin: 50px 0px 50px 0px;
+  height: 400px;
+  padding: 50px 100px;
+  box-sizing: border-box;
+} 
+.feature-callout-wrapper h3 {
+  margin: 0;
+}
+
+.feature-callout-wrapper p {
+  margin: 0;
+}
+
+.feature-callout-wrapper h3 + p {
+  margin: 0;
+  font-size: 36px;
+
+}
+
+.feature-callout-wrapper p strong {
+  font-size: 115px;
+  margin: 0;
+  line-height: 115px;
+}
+
+.feature-callout-wrapper p sup {
+
+}
+
+@media (min-width: 1280px) {
+  .feature-content-wrapper {
+    position: absolute;
+    flex-direction: column;
+    text-align: left;
+    justify-content: space-around;
+    width: 300px;
+    padding-top: 50px;
+    margin:  20px 300px 0 calc(50vw - 640px);
+  }
+
+  .feature-content-media img {
+    width: calc(50vw + 180px);
+    max-width: 1153px;
+    object-fit: cover;
+    box-sizing: border-box;
+    max-height: 500px;
+  }
+
+}
+
+@media (min-width: 1920px) {
+  .feature-content-wrapper {
+    position: absolute;
+    margin:  120px 300px 0 320px;
+  }
+
+
+}
+
+
+
+

blocks/feature/feature.js

@@ -0,0 +1,47 @@
+import { fetchPlaceholders } from '../../scripts/lib-franklin.js';
+
+export function createElement(tagName, options = {}) {
+  const { classes = [], props = {} } = options;
+  const elem = document.createElement(tagName);
+  const isString = typeof classes === 'string';
+  if (classes || (isString && classes !== '') || (!isString && classes.length > 0)) {
+    const classesArr = isString ? [classes] : classes;
+    elem.classList.add(...classesArr);
+  }
+  if (!isString && classes.length === 0) elem.removeAttribute('class');
+
+  if (props) {
+    Object.keys(props).forEach((propName) => {
+      const value = propName === props[propName] ? '' : props[propName];
+      elem.setAttribute(propName, value);
+    });
+  }
+
+  return elem;
+}
+export default async function decorate(block) {
+  const contentWrapper = block.querySelector(':scope > div > div:first-child');
+  contentWrapper.className = 'feature-content-wrapper'; 
+
+  const picture = block.querySelector('picture');
+  const pictureWrapper = picture.closest('p');
+  const contentContainer = createElement('div', { classes: 'feature-content-container' });
+
+  const mediaWrapper = createElement('div', { classes: 'feature-content-media' });
+  mediaWrapper.appendChild(pictureWrapper);
+  const parentContainer = contentWrapper.parentElement.parentElement;
+  parentContainer.prepend(mediaWrapper);
+
+  const callOutWrapper = block.querySelector(':scope > div > div:last-child');
+  callOutWrapper.className = 'feature-callout-wrapper';
+  const placeholders = await fetchPlaceholders('');
+  const { interestrate } = placeholders;
+  const interest = createElement('p', { classes: 'feature-interest-rate' });
+  interest.innerHTML = `<strong>${interestrate}%</strong><sup>APR</sup>`;
+  callOutWrapper.appendChild(interest);
+
+  contentContainer.appendChild(contentWrapper);
+  parentContainer.appendChild(contentContainer);
+  parentContainer.appendChild(callOutWrapper);
+  contentContainer.prepend(mediaWrapper);
+}

blocks/header/header.css

@@ -2,7 +2,7 @@
 header .nav-wrapper {
   background-color: #fff;
   width: 100%;
-  z-index: 2;
+  z-index: 10;
   position: fixed;
   border-bottom: 1px solid var(--highlight-background-color);
 }