Styling & content for email subscribe page

src/layouts/page/email-subscribe.html

@@ -1,11 +1,44 @@
 {{ define "main" }}
 
-<div class="container" style="height:100vh;">
+<div class="container email-subscribe-container">
   <div class="row">
-    <div class="col">
-      {{- partial "klaviyo-form.html" . -}}
+    <div class="col my-auto">
+      <div class="email-div p-4" style="
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width:50%;
+            -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);">
+        <p class="text-center teal" style="text-transform: uppercase;">Wait... Before you authenticate</p>
+        <h1 class="display-4 text-center">Stay Up-to-Date</h1>
+        <p class="lead text-center mb-5">Don't worry, we won't blow up your inbox. We just want to keep you posted on the future of the internet–you know... small things like that.</p>
+        {{- partial "klaviyo-form.html" . -}}
+        <p class="small teal text-center">We will never share or sell your personal information. You can read more about our <a href="/privacy-policy/">privacy standards here.</a></p>
+      </div>
     </div>
   </div>
 </div>
 
+<style>
+
+  .email-subscribe-container{
+    height:100vh;
+    position: relative;
+    background-image: url("/Images/tea-steam-dark.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  @media only screen and (max-width: 720px) {
+    .email-div{
+      width: 100% !important;
+    }
+
+  }
+
+</style>
+
 {{ end }}

src/layouts/partials/klaviyo-form.html

@@ -5,7 +5,8 @@
   .kl-private-reset-css-Xuajs1{
     display: block !important;
     padding: 0px !important;
-    margin: 0px !important;
+    margin-top: auto !important;
+    margin-bottom: auto !important;
   }
 
   .go3894874857{

src/static/Images/tea-steam-dark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 563.29 614.46"><defs><style>.cls-1{fill:#23282c;}</style></defs><path class="cls-1" d="M509.65,614.46c9.54-.75,19.08-1.49,30.07-8.12,14.66-8.83,21.23-22.8,21.92-38.23,24.92-290.19-240.4-415.47-252.16-418.4-24.26-15.4-55.79-1.4-65.26,24.32-9.47,25.72-1.32,55.83,24.4,65.35,8.09,5.13,211.67,102.58,194.65,322.97,.07,24.98,19.21,48.46,46.38,52.1Z"/><path class="cls-1" d="M297.84,461.93c7.33-4.42,12.44-12.5,17.56-20.59,9.47-25.72,1.32-55.83-24.4-65.35-8.09-5.13-211.68-102.58-194.65-322.97C99.96,25.84,80.81,2.35,49.98,.92,26.47-4.92,5.25,17.87,1.65,45.06-23.27,335.25,242.05,460.53,253.81,463.45c13.96,6.59,33.05,5.1,44.04-1.52Z"/></svg>