diff --git a/src/assets/images/jumbo.jpg b/src/assets/images/jumbo.jpg
index 8bc8f44..9c0c0dc 100644
Binary files a/src/assets/images/jumbo.jpg and b/src/assets/images/jumbo.jpg differ
diff --git a/src/jade/index.jade b/src/jade/index.jade
index b5e06e1..0a06f0b 100644
--- a/src/jade/index.jade
+++ b/src/jade/index.jade
@@ -1,16 +1,21 @@
doctype html
html
head
- title koodiklinikka
+ title Koodiklinikka
link(rel='stylesheet', href='css/style.css')
body
- .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.
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ä') ⏎
+ .container
+ .jumbo
+ #logo
+ .form-container
+ p.
+ Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?
+ Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle? Etsitkö tiimikavereita projektiisi?
+
+ Koodiklinikka on Slack-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille suomalaisille.
+ form#invite.invite-form
+ input.input(type='text', name='email', placeholder='Email')
+ button.btn.btn__submit(type='submit', title='Lähetä') ⏎
+ .footer
+ a(href='https://koodiklinikka.slack.com') koodiklinikka.slack.com
script(src='js/bundle.js')
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 8c17e0d..eeff06d 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -2,10 +2,16 @@
body, html
margin 0
- font 14px 'Open Sans', sans-serif
+ font 16px 'Open Sans', sans-serif
height 100%
width 100%
- font-weight 300
+ font-weight 400
+ color #333
+
+.container
+ width 100%
+ height 100%
+ box-sizing border-box
.jumbo
width 100%
@@ -56,11 +62,11 @@ body, html
.invite-form
margin auto
position relative
-
+ max-width 500px
.btn
width 40px
height 32px
- background #1a99aa
+ background #3090de
padding 0
position absolute
right 8px
@@ -68,14 +74,44 @@ body, html
margin-top -15px
border-bottom 2px solid #117280
color rgba(255, 255, 255, 0.5)
-
- p
- text-align center
- margin-bottom 2em
+ &:active
+ border-bottom 0
.form-container
- max-width 500px
+ width 100%
+ padding 0 2em
+ box-sizing border-box
+ max-width 800px
position absolute
top 50%
left 50%
transform translateY(-50%) translateX(-50%)
+ p
+ text-align center
+ margin-bottom 2em
+a
+ color #2080CF
+ text-decoration none
+ &:hover
+ text-decoration underline
+
+#logo
+ width 80px
+ height 80px
+ background url('../images/logo-js.png')
+ background-size 100% 100%
+ border 5px solid #fff
+ border-radius 50%
+ margin auto
+ position absolute
+ top 1.5em
+ left 1.5em
+ box-shadow 1px 1px 3px rgba(0, 0, 0, 0.1)
+
+.footer
+ font-size 0.8em
+ height 40px
+ line-height 40px
+ padding 0 1em
+ position absolute
+ bottom 0