Merge pull request #234 from Abhijay007/chore/Abhijay007/issue#229

Chore: Formatted community Mailing list component

Author: warunicorn19

docs/_includes/subscribe.html

@@ -1,5 +1,5 @@
 <div>
-  <a id="subscribe" class="subscribe-a"></a>
+  <a id="subscribe" class="subscribe-a" ></a>
   <!-- Begin MailChimp Signup Form -->
   <link
     href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
@@ -15,7 +15,7 @@
       id="mc-embedded-subscribe-form"
       name="mc-embedded-subscribe-form"
       class="validate"
-      novalidate
+      onsubmit="document.getElementById('mc-embedded-subscribe-form').submit();"
     >
       <div id="mc_embed_signup_scroll">
         <div class="subscribe-inputbox"
@@ -28,7 +28,12 @@
             name="FNAME"
             class="email"
             id="mce-FNAME"
-            style="width: 49%"
+            style="width: 48%;
+            height: 3rem;
+            border: 1px solid #000000;
+            box-sizing: border-box;
+            border-radius: 5px;" 
+            required
           />
           <input
             type="text"
@@ -37,7 +42,12 @@
             name="LNAME"
             class="email"
             id="mce-LNAME"
-            style="width: 49%"
+            style="width: 48%;
+            height: 3rem;
+            border: 1px solid #000000;
+            box-sizing: border-box;
+            border-radius: 5px;"
+            required
           />
         </div>
         <div id="mce-responses" class="clear subscribe-inputbox">
@@ -63,8 +73,13 @@
             class="email"
             id="mce-EMAIL"
             placeholder="Email Address"
+            style="width: 100%;
+            margin: 20px 20px 0px 0px;
+            height: 3rem;
+            border: 1px solid #000000;
+            box-sizing: border-box;
+            border-radius: 5px;"
             required
-            style="white-space: nowrap; display: inline-block; width: 100%"
           />
           <!-- <span class="asterisk" style="white-space: nowrap;">*</span> -->
         </div>
@@ -81,21 +96,15 @@
             value=""
           />
         </div>
-        <div
-          onclick="document.getElementById('mc-embedded-subscribe-form').submit();"
-          id="mc_embed_signup"
-          class="clear"
-        >
           <h4 style="text-align: center; color: aliceblue">
-            <input
+            <button
+              style="margin: 0px !important;"
               class="subscribe-button"
               type="submit"
-              value="Subscribe"
-              name="subscribe"
-              id="mc-embedded-subscribe"
-            />
+              id="mc-embedded-subscribe-form"
+              id="mc_embed_signup"
+            >Subscribe</button>
           </h4>
-        </div>
       </div>
     </form>
   </div>

docs/assets/css/subscribe.css

@@ -9,23 +9,31 @@
 }
 
 .subscribe-button {
-  padding-bottom: 10px;
-  padding-top: 10px;
-  width: 300px;
+  width: 100%;
   margin-left: auto !important;
   margin-right: auto !important;
+  text-decoration: none;
+  padding: 15px 30px;
+  background: #3c494f;
+  border-radius: 3px;
+  border: 1px solid rgba(255,255,255,0.5);
+  transition: .2s ease-in-out;
+  display: flex;
+  justify-content: center;
+  height: 3.5rem;
+  color: white;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  cursor:     ;
+  letter-spacing: 0.5px;
 }
 
 .subscribe-inputbox {
   white-space: nowrap;
 }
 #mc_embed_signup {
-  clear: left;
   font: 14px Helvetica, Arial, sans-serif;
-  width: 80%;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
@@ -47,8 +55,7 @@
     margin-bottom: 5px;
   }
 
-  #mc_embed_signup .clear {
-    display: block;
+  #mc_embed_signup {
     width: 100%;
   }
 

docs/collections/_pages/subscribe.html

@@ -4,9 +4,18 @@
 ---
 <div>
     <div>
-        <div id="contact" style="width:100%;">
-            <h3 style="text-align:center;">Mailing List</h3>
+        <div id="contact" style="display: flex;
+        flex-direction:column;
+        align-items: center;
+        justify-content: center;
+        padding: 20% 0px 0px 0px;
+        font-style: normal;
+        font-size: 1.5rem;
+        line-height: 2.25rem;
+        color: #1e2117;
+        ">
+            <h3 style="text-align:center; margin-bottom: 30px;">Mailing List</h3>
             {% include subscribe.html %}
         </div>
     </div>
-</div>
+</div>