first layout ideas

package.json

@@ -16,6 +16,8 @@
     "template"
   ],
   "dependencies": {
+    "axios": "^0.4.2",
+    "virtual-dom": "^1.1.0"
   },
   "devDependencies": {
     "coffee-script": "~1.8.0",

src/jade/index.jade

@@ -1,8 +1,16 @@
 doctype html
 html
   head
-    title Koodiklinikka.fi
+    title koodiklinikka
     link(rel='stylesheet', href='css/style.css')
   body
-    h1 Hello world!
+    .jumbo
+      .form-container
+        p.
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+          Sed posuere interdum sem. Sed augue orci, lacinia eu tincidunt.
+          Mauris varius diam vitae arcu. <br /> Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt.
+        form#invite.invite-form
+          input.input(type='text', name='email', placeholder='Email')
+          button.btn.btn__submit(type='submit', title='Lähetä') ⏎
     script(src='js/bundle.js')

src/js/main.js

@@ -1 +1,18 @@
-console.log('foobar');
+'use strict';
+
+var request = require('axios');
+var form = document.getElementById('invite');
+
+form.addEventListener('submit', function(event) {
+  event.preventDefault();
+  form.classList.remove('has-success', 'has-error');
+  var email = event.target.elements.email.value;
+
+  request.post('/api/invites', {
+    email: email
+  }).then(function() {
+    form.classList.add('has-success');
+  }).catch(function() {
+    form.classList.add('has-error');
+  });
+});

src/stylus/style.styl

@@ -1,2 +1,81 @@
+@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,300,700')
+
 body, html
   margin 0
+  font 14px 'Open Sans', sans-serif
+  height 100%
+  width 100%
+  font-weight 300
+
+.jumbo
+  width 100%
+  height 100%
+  background url('../images/jumbo.jpg')
+  background-size cover
+
+.input
+  width 100%
+  height 45px
+  padding 1em
+  box-sizing border-box
+  font-size inherit
+  border 2px solid rgba(0, 0, 0, 0.3)
+  border-radius 5px
+  background transparent
+  color rgba(0, 0, 0, 0.5)
+  outline 0
+
+.input::-webkit-input-placeholder
+  color rgba(0, 0, 0, 0.3)
+
+.input:-moz-placeholder
+  color rgba(0, 0, 0, 0.3)
+  opacity  1
+
+.input::-moz-placeholder
+  color rgba(0, 0, 0, 0.3)
+  opacity 1
+
+.input:-ms-input-placeholder
+  color rgba(0, 0, 0, 0.3)
+
+
+.input.has-error,
+.invite-form.has-error .input
+  border-color rgba(226, 33, 112, 0.6)
+  color rgba(226, 33, 112, 0.6)
+
+.btn
+  border-radius 3px
+  border 0
+  padding 1em
+  font-size 14px
+  outline 0
+  cursor pointer
+
+.invite-form
+  margin auto
+  position relative
+
+  .btn
+    width 40px
+    height 32px
+    background #1a99aa
+    padding 0
+    position absolute
+    right 8px
+    top 50%
+    margin-top -15px
+    border-bottom 2px solid #117280
+    color rgba(255, 255, 255, 0.5)
+
+  p
+    text-align center
+    margin-bottom 2em
+
+.form-container
+  max-width 500px
+  position absolute
+  top 50%
+  left 50%
+  transform translateY(-50%) translateX(-50%)