Merge pull request #12 from NEBULAIR/Joost-branch

Adds email signup front end. Back end part is still missing

css/creative.css

@@ -193,6 +193,70 @@ header .header-content .header-content-inner p {
     margin-right: auto;
   }
 }
+
+/*signup stuff*/
+#sign-up{
+  margin-top: 5%;
+
+}
+
+.input {
+  display: flex;
+  align-items: center;
+}
+
+
+.button {
+  height: 44px;
+  border: none;
+}
+
+  
+#email {
+  width: 75%;
+  background: #FDFCFB;
+  font-family: inherit;
+  color: #4CAF50;
+  letter-spacing: 1px;
+  text-indent: 5%;
+  border-radius: 5px 0 0 5px;
+}
+
+
+#submit {
+  width: 40%;
+  height: 44px;
+  background: #4CAF50;
+  font-family: inherit;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 1px;
+  border-radius: 0 5px 5px 0;
+  cursor: pointer;
+  transition: background .8s ease-in-out;
+
+}
+  
+
+#submit:hover {
+  background: #ffffff;
+  color: #4CAF50;
+
+}
+  
+
+input:focus {
+  outline: none;
+  outline: 2px solid #4CAF50;
+  box-shadow: 0 0 2px #4CAF50;
+}
+/* end of signup stuff*/
+
+
+
+
+
+
 .section-heading {
   margin-top: 0;
 }

index.html

@@ -71,7 +71,15 @@
                 <h1>Nebulair</h1>
                 <hr>
                 <p class="subtitle">Open source automated aquaponics done right!</p>
-                <a href="#about" class="btn btn-primary btn-xl page-scroll">Sign up for updates</a>
+                <div id="sign-up" class="col-md-6 col-md-offset-3">
+                    <form>
+                      <label for="email" class="input">
+                        <input  type="text" class="button" id="email" name="email" placeholder="NAME@EXAMPLE.COM" autocomplete="email">
+                        <input type="submit" class="button" id="submit" value="Sign up for updates">
+                      </label>
+                    </form>
+                </div>
+
             </div>
         </div>
     </header>