added mailing list

trucsclub · Feb 7, 2024 · 361f3dd · 361f3dd
1 parent 7ad0cdc
commit 361f3dd
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 3 deletions.
diff --git a/css/main.css b/css/main.css
@@ -599,6 +599,18 @@ video {
   margin-bottom: 4rem;
 }
 
+.mb-5{
+  margin-bottom: 1.25rem;
+}
+
+.mb-20{
+  margin-bottom: 5rem;
+}
+
+.mb-40{
+  margin-bottom: 10rem;
+}
+
 .block{
   display: block;
 }
@@ -822,7 +834,7 @@ p {
 
 .event-card{
   display: flex;
-  min-width: 24rem;
+  min-width: 100%;
   flex-direction: column;
   gap: 1.25rem;
   border-radius: 0.5rem;

diff --git a/index.html b/index.html
@@ -116,7 +116,54 @@ <h1 class="text-text text-center font-bold lg:text-4xl text-2xl">Thompson Rivers
 
           <!-- Subscribe Button -->
           <a href="#" class="mb-16">
-               <button class="text-text py-2 px-10 rounded-full bg-accent hover:bg-secondary">Subscribe!</button>
+               <button id="subscribe-button" class="text-text py-2 px-10 rounded-full bg-accent hover:bg-secondary">Subscribe!</button>
+
+               <div id="mc_embed_shell" style="display: none;" class="mb-40">
+                    <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
+                    <div id="mc_embed_signup" class="bg-white-glass">
+                         <form action="https://trucsclub.us7.list-manage.com/subscribe/post?u=0fdd1a326517787271a19d50e&amp;id=8c0f896303&amp;f_id=0093d6e4f0"
+                              method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
+                              target="_blank">
+                              <div id="mc_embed_signup_scroll">
+                                   <br>
+                                   <h2>Subscribe</h2>
+                                   <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
+                                   <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span
+                                                  class="asterisk">*</span></label><input type="email" name="EMAIL"
+                                             class="required email" id="mce-EMAIL" required="" value=""></div>
+                                   <div id="mce-responses" class="clear foot">
+                                        <div class="response" id="mce-error-response" style="display: none;"></div>
+                                        <div class="response" id="mce-success-response" style="display: none;"></div>
+                                   </div>
+                                   <div aria-hidden="true" style="position: absolute; left: -5000px;">
+                                        /* real people should not fill this in and expect good things - do not remove this or risk form
+                                        bot signups */
+                                        <input type="text" name="b_0fdd1a326517787271a19d50e_8c0f896303" tabindex="-1" value="">
+                                   </div>
+                                   <div class="optionalParent">
+                                        <div class="clear foot">
+                                             <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button"
+                                                  value="Subscribe">
+                                             <button id="cancel-subscribe" class="button">Cancel</button>
+                                             <p style="margin: 0px auto;"><a href="http://eepurl.com/izSGyA"
+                                                       title="Mailchimp - email marketing made easy and fun"><span
+                                                            style="display: inline-block; background-color: transparent; border-radius: 4px;"><img
+                                                                 class="refferal_badge"
+                                                                 src="https://digitalasset.intuit.com/render/content/dam/intuit/mc-fe/en_us/images/intuit-mc-rewards-text-dark.svg"
+                                                                 alt="Intuit Mailchimp"
+                                                                 style="width: 220px; height: 40px; display: flex; padding: 2px 0px; justify-content: center; align-items: center;"></span></a>
+                                             </p>
+                                        </div>
+                                   </div>
+                              </div>
+                         </form>
+                    </div>
+                    <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
+                    <script
+                         type="text/javascript">(function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; }(jQuery)); var $mcj = jQuery.noConflict(true);</script>
+               </div>
+
+
           </a>
      </section>
 
@@ -184,6 +231,18 @@ <h4 class="text-black text-md">February 7th, 2024<br>1:00 PM PDT</h4>
      <!-- Hamburger Script -->
      <script src="assets/hamburger.js"></script>
 
+     <!-- Subscribe Script -->
+     <script>
+          document.getElementById('subscribe-button').addEventListener('click', () => {
+               document.getElementById('mc_embed_shell').style.display = 'block';
+          });
+
+          document.getElementById('cancel-subscribe').addEventListener('click', () => {
+               document.getElementById('mc_embed_shell').style.display = 'none';
+          });
+
+     </script>
+
 </body>
 
 <!-- Footer -->

diff --git a/input.css b/input.css
@@ -16,7 +16,7 @@ p {
 }
 
 .event-card {
-	@apply rounded-lg p-3 bg-primary gap-5 flex flex-col shadow-lg shadow-accent md:min-w-[40rem] md:max-w-[40rem] min-w-[24rem];
+	@apply rounded-lg p-3 bg-primary gap-5 flex flex-col shadow-lg shadow-accent md:min-w-[40rem] md:max-w-[40rem] min-w-[100%];
 }
 
 .bg-hero-to-section {