Merge pull request #3 from AdobeDevXSC/new-hero

New hero

Author: lamontacrook

blocks/cards/cards.css

@@ -1,4 +1,8 @@
 /* default cards css */
+.cards {
+  position: relative;
+  z-index: 1;
+}
 .cards > ul {
   display: grid;
   grid-template-columns: 1fr;

blocks/hero/hero.css

@@ -6,12 +6,14 @@ main .hero-container > div {
 
 main .hero-container {
   padding: 0;
+  position: relative;
+  z-index: -1;
 }
 
 .hero {
   position: relative;
   padding: 32px;
-  min-height: 275px;
+  min-height: 375px;
 }
 
 .hero h1,
@@ -24,6 +26,7 @@ main .hero-container {
 
 .hero h1 {
   margin-bottom: 0;
+  margin-top: 200px;
 }
 
 .hero h4 {
@@ -32,7 +35,8 @@ main .hero-container {
 }
 
 .hero picture {
-  position: absolute;
+  /* position: absolute; */
+  position: fixed;
   z-index: -1;
   inset: 0;
   object-fit: cover;

scripts/scripts.js

@@ -1,3 +1,4 @@
+import decorate from '../blocks/hero/hero.js';
 import {
   sampleRUM,
   buildBlock,

styles/styles.css

@@ -208,8 +208,11 @@ main img {
 /* sections */
 main .section {
   padding: 16px;
+  background-color: white;
 }
 
+
+
 main .main-wrapper .section:not(:first-of-type) {
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0 0 0 / 10%);