generative art for nebraska-man page

src/layouts/page/nebraska-man.html

@@ -1,10 +1,13 @@
 {{ define "main" }}
 
+{{- partial "nb-man-gen-art.html" -}}
+
 <div class="section two-boxes hero-section">
   <div class="container">
     <div class="row">
-      <div class="col">
+      <div class="col" style="z-index:2;">
         <h1>Nebraska Man</h1>
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>
   </div>
@@ -16,8 +19,10 @@
   <div class="container">
     <div class="row">
       <div class="col">
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
         <h3>the battle for the internet has just begun</h3>
-        <p class="lead">We’ve called open source devs the “unnamed heroes of the internet.” Now is the time to give them a name and tell their stories. Introducing The Maintainers: a comic series about the OSS Developer Universe. Our first issue follows the origins of Nebraska Man as he joins the fight for a fairer internet. </p>
+        <p class="lead">We’ve called open source devs the “unnamed heroes of the internet.” Now is the time to give them a name and tell their stories. Introducing The Maintainers: a comic series about the OSS Developer Universe. Our first issue follows the origins of Nebraska Man as he joins the fight for a fairer internet.</p>
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>
   </div>

src/layouts/partials/nb-man-gen-art.html

@@ -0,0 +1,49 @@
+<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="nb-man-gen-art-1"></div>
+<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="nb-man-gen-art-2"></div>
+<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="nb-man-gen-art-3"></div>
+
+<style>
+
+  #nb-man-gen-art-1{
+    position:absolute;
+    width:34vw;
+    height: 32vw;
+    right: 5.8vw;
+    top:12.8vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/nb-man-cover-1.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #nb-man-gen-art-2{
+    position:absolute;
+    width:12vw;
+    height: 12vw;
+    border-radius: 200px;
+    right: 32vw !important;
+    top:36vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/nb-man-cover-2.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #nb-man-gen-art-3{
+    position:absolute;
+    width:30vw;
+    height: 12vw;
+    right: 32vw !important;
+    top:29vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/nb-man-page-1.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+</style>

src/static/css/nebraska-man.css

@@ -1,29 +1,3 @@
-#nb-gen-art-1{
-  position: absolute;
-  background-image: url("/Images/tea-cover-nb-team.jpg");
-  background-position: top;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 40.9vw;
-  height: 20.7vw;
-  right: 13.2vw !important;
-  top: 16vw !important;
-  z-index: 1;
-}
-
-#nb-gen-art-2{
-  position: absolute;
-  background-image: url("/Images/gen-art/glass-triangles.jpg");
-  background-position: top;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 40.9vw;
-  height: 16.7vw;
-  left: 8.4vw; !important;
-  top: 12.5vw;
-  z-index: 1;
-}
-
 .nb-man-hero{
   background-image: url("/Images/x-large-grid.svg");
   background-attachment: fixed;