generative art for /white-paper/ hero section

src/layouts/page/white-paper.html

@@ -1,14 +1,86 @@
 {{ define "main" }}
 
+<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-1"></div>
+<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="wp-gen-art-2"></div>
+<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-3"></div>
+<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-4"></div>
+
+<style>
+
+  #wp-gen-art-1{
+    position:absolute;
+    width:34vw;
+    height: 18vw;
+    right: 5.8vw;
+    top:16.741vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/orange-pattern.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #wp-gen-art-2{
+    position:absolute;
+    width:34vw;
+    height: 12vw;
+    left: 5.8vw;
+    top:11.161vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/dream-tree.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #wp-gen-art-3{
+    position:absolute;
+    width:12vw;
+    height: 12vw;
+    border-radius: 200px;
+    left: 36vw;
+    top:16vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #wp-gen-art-4{
+    position:absolute;
+    width:45vw;
+    height: 7vw;
+    left: 36vw;
+    top:40vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/white-light-pattern.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  h1{
+    text-shadow: 0px 0px 4px #1a1a1a;
+  }
+
+
+
+</style>
+
 
 
 <!-- Hero Section -->
 <div class="section two-boxes hero-section">
   <div class="container">
     <div class="row">
-      <div class="col">
+      <div class="col" style="position: relative; z-index: 2;">
         <h1>White Paper</h1>
-        <p class="lead">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
+        <p class="lead animated-5 animatedFadeInUp fadeInUp" style="background-color: #1a1a1a;">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
         <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>
@@ -35,7 +107,7 @@
 </style>
 
 
-<section class="two-boxes">
+<section class="one-box">
   <div class="container">
     <div class="row">
       <div class="col">

src/static/css/typography.css

@@ -92,7 +92,7 @@ li{
 
   .lead{
     font-size: 1.5vw !important;
-    line-height: 1.7vw !important;
+    line-height: 2.3vw !important;
     margin-bottom: 2.232vw;
   }