Add signup form

Author: benfrancis

css/index-mobile.css

@@ -3,7 +3,8 @@ h1 {
 }
 
 main {
-  transform: translateY(-110px);
+  transform: translateY(-260px);
+  min-width: 300px;
 }
 
 main img {
@@ -13,3 +14,8 @@ main img {
 main p {
   font-size: 14px;
 }
+
+#register {
+  margin: 30px auto;
+  width: 300px;
+}

css/index.css

@@ -10,7 +10,7 @@ body {
 main {
   position: absolute;
   top: 50%;
-  transform: translateY(-200px);
+  transform: translateY(-350px);
   width: 100%;
   margin: 0 auto;
 }
@@ -23,6 +23,48 @@ h1 {
   font-size: 67px;
 }
 
+#register {
+  width: 522px;
+  margin: 50px auto;
+  padding: 10px;
+  text-align: center;
+  background-color: #666666;
+  border-radius: 10px;
+}
+
+#register h2 {
+  font-size: 19px;
+  font-weight: 400;
+}
+
+#register input[type=text], #register input[type=email] {
+  height: 32px;
+  border: none;
+  border-radius: 5px;
+  font-size: 17px;
+  padding: 1px 10px;
+  margin: 4px;
+}
+
+#register input[type=submit] {
+  background-color: #b6d806;
+  color: #4d4d4d;
+  font-size: 16px;
+  border-radius: 5px;
+  padding: 7px 20px;
+  margin: 10px;
+  border: none;
+}
+
+#register input[type=submit]:hover {
+  color: #333;
+}
+
+#privacy-link {
+  font-size: 13px;
+  color: #fff;
+}
+
 footer {
   width: 100%;
   position: fixed;

index.html

@@ -24,7 +24,37 @@
       <h1>Flying the nest.</h1>
       <img src="images/logos.svg" alt = "Mozilla WebThings -> WebThings"/>
       <p><strong>“Mozilla WebThings”</strong> is becoming <strong>“WebThings”</strong></p>
-      <p>Website coming soon...</p>
+      <!-- Signup Form -->
+      <div id="mc_embed_signup">
+        <form id="register" action="https://krellian.us4.list-manage.com/subscribe/post?u=4c7df68d508c5a0e296c0423c&amp;id=00f1f4d619" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
+          <div id="mc_embed_signup_scroll">
+            <h2>Sign up for updates</h2>
+            <div class="mc-field-group">
+              <input type="text" value="" name="FIRST_NAME" class="" id="mce-FIRST_NAME" placeholder="First name" required />
+            </div>
+            <div class="mc-field-group">
+              <input type="text" value="" name="LAST_NAME" class="" id="mce-LAST_NAME" placeholder="Last name" required />
+            </div>
+            <div class="mc-field-group">
+              <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"  placeholder="Email address" required />
+            </div>
+            <div class="mc-field-group" style="display:none">
+              <input type="checkbox" id="group_1" name="group[71052][1]" value="1" >
+              <!-- Check WebThings interest group -->
+              <input type="checkbox" id="group_2" name="group[71052][2]" value="1" checked>
+            </div>
+            <div id="mce-responses" class="clear">
+              <div class="response" id="mce-error-response" style="display:none"></div>
+              <div class="response" id="mce-success-response" style="display:none"></div>
+            </div>
+            <!-- real people should not fill this in and expect good things -->
+            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_4c7df68d508c5a0e296c0423c_00f1f4d619" tabindex="-1" value=""></div>
+            <div class="clear"><input type="submit" value="Register" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+            <a id="privacy-link" href="https://krellian.com/privacy">Privacy Policy</a>
+          </div>
+        </form>
+      </div>
+      <!-- End of signup form -->
     </main>
     <footer>Sponsored by <a href="https://krellian.com">Krellian</a></footer>
   </body>