Merge pull request #4 from status-im/mailchimp

Mailchimp

gulpfile.js

@@ -41,7 +41,8 @@ gulp.task('scripts', function() {
     'src/libs/jquery/dist/jquery.min.js',
     'src/libs/modernizr/modernizr-custom.js',
     'src/libs/waypoints/waypoints.min.js',
-    'src/libs/swiper/js/swiper.min.js'
+    'src/libs/swiper/js/swiper.min.js',
+    'src/libs/mailchimp/mc-validate.js'
     ])
     .pipe(plumber())
     .pipe(concat('libs.min.js'))

src/css/main.css

@@ -214,6 +214,7 @@ input[type=email] {
   display: block;
   width: 34px;
   height: 34px;
+  border: none;
   -webkit-border-radius: 50%;
           border-radius: 50%;
   background-color: rgba(182, 116, 241, 0.2);

src/index.html

@@ -68,8 +68,22 @@
                   </div>
                   <div class="status-email">
                   <div class="email">
-                      <input type="email" class="email-input" placeholder="Enter your email for updates">
+                    <div class="mc_embed_signup">
-                      <div class="email-button"></div>
+                    <form action="//status.us13.list-manage.com/subscribe/post?u=d0c1a0be2adff281b52e27a7f&amp;id=09e2d9ae07" method="post" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+                      <div class="mc_embed_signup_scroll">
+                      <div class="mc-field-group">
+                      <input type="email" value="" name="EMAIL" class="required email-input mce-EMAIL" placeholder="Enter your email for updates">
+                    </div>
+                      <div class="mce-responses clear">
+                        <div class="response mce-error-response" style="display:none"></div>
+                        <div class="response mce-success-response" style="display:none"></div>
+                      </div>
+                      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d0c1a0be2adff281b52e27a7f_09e2d9ae07" tabindex="-1" value=""></div>
+                      <div class="clear"><input type="submit" value="" name="subscribe" class="mc-embedded-subscribe button email-button"></div>
+                    </div>
+                      <!-- <div class="email-button"></div> -->
+                    </form>
+                  </div>
                   </div>
                   </div>
               </div>
@@ -88,6 +102,7 @@
             </div>
           </div>
         </div>
+
 <!--
         <div class="table-row">
           <div class="block block-white">
@@ -543,9 +558,23 @@
           </div>
           </div>
           <div class="gradient-email">
-          <div class="email">
+           <div class="email">
-              <input type="email" class="email-input" placeholder="Leave Your email">
+            <div class="mc_embed_signup">
-              <div class="email-button"></div>
+            <form action="//status.us13.list-manage.com/subscribe/post?u=d0c1a0be2adff281b52e27a7f&amp;id=09e2d9ae07" method="post" name="mc-embedded-subscribe-form" class="mc-embedded-subscribe-form validate" target="_blank" novalidate>
+              <div class="mc_embed_signup_scroll">
+              <div class="mc-field-group-2">
+              <input type="email" value="" name="EMAIL" class="required email-input mce-EMAIL" placeholder="Enter your email for updates">
+            </div>
+              <div class="mce-responses clear">
+                <div class="response mce-error-response" style="display:none"></div>
+                <div class="response mce-success-response" style="display:none"></div>
+              </div>
+              <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d0c1a0be2adff281b52e27a7f_09e2d9ae07" tabindex="-1" value=""></div>
+              <div class="clear"><input type="submit" value="" name="subscribe" class="mc-embedded-subscribe button email-button"></div>
+            </div>
+              <!-- <div class="email-button"></div> -->
+            </form>
+          </div>
           </div>
           </div>
         </div>

src/js/common.js

@@ -85,16 +85,7 @@ $(function() {
       },100);
   }, { offset: '90%' });
 
-    //initialize swiper when document ready
+  // Swiper
-  // var mySwiper = new Swiper ('.swiper-container', {
-  //   // Optional parameters
-  //   loop: true,
-  //   autoplay: 3000,
-  //   effect: 'fade',
-  //   nextButton: '.swiper-button-next',
-  //   prevButton: '.swiper-button-prev',
-  //   spaceBetween: 30
-  // });
 
   var swiper1 = new Swiper('.swiper1', {
     loop: true,
@@ -105,13 +96,13 @@ $(function() {
       crossFade: true
     }
 });
-var swiper2 = new Swiper('.swiper2', {
+  var swiper2 = new Swiper('.swiper2', {
-  loop: true,
+    loop: true,
-  autoplay: 2000,
+    autoplay: 2000,
-  effect: 'slide',
+    effect: 'slide',
-  nextButton: '.swiper-button-next',
+    nextButton: '.swiper-button-next',
-  prevButton: '.swiper-button-prev',
+    prevButton: '.swiper-button-prev',
-});
+  });
 
   });
 

src/libs/mailchimp/classic-10_7.css

@@ -0,0 +1,46 @@
+/* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */
+#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
+#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
+#mc_embed_signup input {border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
+#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
+#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
+#mc_embed_signup input:focus {border-color:#333;}
+#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
+#mc_embed_signup .button:hover {background-color:#777;}
+#mc_embed_signup .small-meta {font-size: 11px;}
+#mc_embed_signup .nowrap {white-space:nowrap;}
+
+#mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;}
+#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
+* html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}
+#mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}
+#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
+#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}
+
+#mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
+#mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
+#mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
+#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
+#mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}
+
+#mc_embed_signup .indicates-required {text-align:right; font-size:11px; margin-right:4%;}
+#mc_embed_signup .asterisk {color:#e85c41; font-size:150%; font-weight:normal; position:relative; top:5px;}     
+#mc_embed_signup .clear {clear:both;}
+
+#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
+#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
+#mc_embed_signup .mc-field-group.input-group label {display:inline;}
+#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}
+
+#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%; margin: 0 5%; clear: both;}
+#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
+#mc_embed_signup #mce-error-response {display:none;}
+#mc_embed_signup #mce-success-response {color:#529214; display:none;}
+#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
+
+#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
+#mc_embed_signup #num-subscribers {font-size:1.1em;}
+#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}
+
+#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; margin:2px 0 1em 0; padding:5px 10px; background-color:rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:14px; font-weight:normal; z-index:1; color:#e85c41;}
+#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #e85c41;}

src/sass/index.scss

@@ -199,6 +199,7 @@ input[type=email] {
   display: block;
   width: 34px;
   height: 34px;
+  border: none;
   border-radius: 50%;
   background-color: rgba(182, 116, 241, .2);
   background-image: url('../img/arrow.svg');