Invitation layout

app/partials/invitation.jade

@@ -0,0 +1,42 @@
+extends login-layout
+
+block head
+    title Taiga  Project management web application with scrum in mind!
+
+block content
+    div.wrapper
+        div.invitation-main
+            div.invitation-container
+                //h1.logo
+                    //img(src="/images/logo.png", alt="TAIGA")
+                figure.avatar
+                    a(href="", title="UserName")
+                        img.avatar(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+                        figcaption Username
+                p.invitation-text has sent you an invitation to join  the taiga project
+                    span.project-name taiga
+                div.invitation-form
+
+                    form.login-form
+                        fieldset
+                            input(type="text", name="username", placeholder="User name")
+                        fieldset.login-password
+                            input(type="password", name="password", ng-model="form.password")
+                            a.forgot-pass(href="", title="Did you forgot your pass?") Forgot it?
+                        fieldset
+                            a.button.button-login.button-gray(href="", title="Log in") Enter
+
+                    form.register-form
+                        fieldset
+                            input(type="text" placeholder="Pick a username")
+                        fieldset
+                            input(type="text" placeholder="Your email")
+                        fieldset
+                            input(type="password"  placeholder="Set a password")
+                        fieldset
+                            a.button.button-register.button-gray(href="", title="Sign up") Sign up
+                        p.register-text
+                            span By clicking "Sign up", you agree to our <br />
+                            a(href="", title="See terms of service")  terms of service
+                            span  and
+                            a(href="", title="See privacy policy")  privacy policy.

app/styles/layout/invitation.scss

@@ -0,0 +1,101 @@
+.invitation-main {
+    @include table-flex(center, center, flex, row, wrap, center);
+    background: url('/images/invitation_bg.jpg') no-repeat center center;
+    background-size: cover;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 999;
+    .invitation-container {
+        @include table-flex-child(0, 650px, 0, 650px);
+    }
+    .logo {
+        margin: 1rem auto;
+        width: 150px;
+    }
+    .avatar {
+        margin: 0 auto 1rem;
+        width: 150px;
+        a {
+            @extend %small;
+            color: $white;
+            text-align: center;
+        }
+        img {
+            display: block;
+            text-align: center;
+            width: 50px;
+        }
+    }
+    .invitation-text {
+        @extend %xlarge;
+        color: $white;
+        font-family: 'ostrichSans';
+        line-height: 3rem;
+        text-align: center;
+        .project-name {
+            @extend %xxlarge;
+            display: block;
+        }
+    }
+    .invitation-form {
+        @include table-flex();
+        input {
+            background: $white;
+            color: $gray;
+            margin-bottom: 1rem;
+            position: relative;
+            @include placeholder {
+                color: $gray-light;
+            }
+        }
+        input:focus {
+            &+.forgot-pass {
+                @include transition(opacity .5s linear);
+                opacity: 0;
+            }
+        }
+        .forgot-pass {
+            @include transition(all .3s linear);
+            @extend %small;
+            color: $gray-light;
+            opacity: 1;
+            position: absolute;
+            right: 1rem;
+            top: .5rem;
+            &:hover {
+                @include transition(color .3s linear);
+                color: $grayer;
+            }
+        }
+        .button {
+            color: $white;
+            display: block;
+            margin-bottom: .5rem;
+            text-align: center;
+            &:hover {
+                background: $fresh-taiga;
+            }
+        }
+    }
+    .login-form,
+    .register-form {
+        @include table-flex-child(1, 200px, 0, 200px);
+        padding: 1rem;
+    }
+    .register-text {
+        @extend %small;
+        color: $white;
+        a {
+            color: $green-taiga;
+            &:hover {
+                color: $fresh-taiga;
+            }
+        }
+    }
+    .login-form {
+        border-right: 1px solid $white;
+    }
+}

app/styles/main.scss

@@ -65,6 +65,7 @@ $prefix-for-spec:      true;
 //Layout
 @import 'layout/base';
 @import 'layout/login';
+@import 'layout/invitation';
 @import 'layout/backlog';
 @import 'layout/taskboard';
 @import 'layout/us-detail';