Add art assets

_layouts/default.haml

@@ -9,8 +9,93 @@
     %link{rel: "stylesheet", href: "assets/css/main.css"}
 
   %body
-    .container
-      %header.header
-        %a{href: "/"}
-          %img{src: "assets/img/brand.png", title: "LevelUp: ThoughtWorks"}
-      {{ content }}
+
+    .top-alert
+      %p
+        :plain
+          Level Up 2 : Level Harder <span>starts</span> 33 Aug <span>&#64;</span> ThoughtWorks Sydney
+
+
+    #sky
+      .sky &nbsp;
+      .hill-back &nbsp;
+      .hill-front &nbsp;
+      .container
+        %header.header
+          %a{href: "/"}
+            %img{src: "assets/img/page-structure/logo.png", title: "LevelUp: ThoughtWorks"}
+          %ul.nav
+            %li
+              %a{href: "/programs"}
+                Programs
+            %li
+              %a{href: "/coaches"}
+                Coaches
+            %li
+              %a{href: "/past-events"}
+                Past Events
+        %h1
+          :plain
+            Level Up Round 2 : Level Harder <span>Get a job, keep it... and enjoy it!</span>
+        %h3 ThoughtWorks' LevelUp Course helps students bridge the gap between university and the work place. Gain practical knowledges, upgrade your portfolio, meet peers, and make connections!
+        #what-is-levelup.row
+          .span6
+            %p
+              :plain
+                The course is run by ThoughtWorks' own highly experienced software professional - yes, the same <strong>badasses</strong> we charged the client over $1,000 each day for their time.
+            %p
+              :plain
+                Don't know who they are? Chances are you might have read their books, or see them speaking at big IT conferences around the world, or actually use their software in your day-to-day. Come and find out!
+          .span6
+            %p
+              :plain
+                The course is only available - limited <strong>25 seats</strong> - for students or non-professionals as a free application. <strong>You pay with your commitment.</strong> At the end of the course you will walk away with a piece of (awesome) working software for your portfolio.
+            %p
+              :plain
+                The course run on <strong>every Wednesday night</strong> for <strong>9 weeks</strong> at the <strong>ThoughtWorks Sydney</strong> Headquarter in Circular Quay, starting <strong>33rd August 2013</strong>. Application close 32nd July 2013
+            %p
+              :plain
+                Did we mention <strong>free dinner</strong> yet?
+
+    #ground
+      .grass &nbsp;
+      .ground &nbsp;
+      .container
+        %p This is the Ground Theme container
+        %p This is the Ground Theme container
+        %p This is the Ground Theme container
+        %p This is the Ground Theme container
+        %p This is the Ground Theme container
+
+    #water
+      .wave &nbsp;
+      .water
+        .container
+          %p This is the Water Theme container
+          %p This is the Water Theme container
+          %p This is the Water Theme container
+          %p This is the Water Theme container
+          %p This is the Water Theme container
+          %p This is the Water Theme container
+
+
+    %footer.footer
+      .blueblock &nbsp;
+      .dark
+        .container
+          %p
+            Connect with us
+            %a{href: "/"}
+              Twitter
+            %a{href: "/"}
+              Facebook
+            %ul
+              %li
+                %a{href: "/programs"}
+                  Programs
+              %li
+                %a{href: "/coaches"}
+                  Coaches
+              %li
+                %a{href: "/past-events"}
+                  Past Events

assets/css/main.scss

@@ -1,96 +1,80 @@
-@mixin small-text {
-    font-size: 14px;
-    line-height: 18px;
-}
-
-@mixin normal-text {
-    font-size: 16px;
-    line-height: 22px;
-}
+//@import "temp";
+@import "mixin";
 
 body {
-    @include normal-text;
-
-    font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
-    color: rgb(102, 102, 102);
-    padding: 0px;
-}
-
-a {
-    color: #2b9ea6;
-}
-
-.header {
-    margin: 20px 0;
-}
-
-.upcoming {
-    margin-top: 40px;
-    color: #e30066;
-}
 
-.session-small {
-    margin-bottom: 20px;
-
-    h2 {
-        @include normal-text;
-        margin-bottom: 0;
+  .top-alert {
+    background: #f6ee4b;
+    color: black;
+    text-align: center;
+    padding: 10px 0;
+    p {
+      font-weight: bold;
+      margin: 0;
+      span {
+        font-weight: normal;
+      }
     }
-
-    h3 {
-        @include small-text;
-        margin-top: 0;
-        color: rgb(182, 182, 182);
+  } //.top-alert
+
+  header, .header {
+  } //header
+
+  #sky {
+    position: relative;
+    padding-bottom: 30px;
+    .sky {
+      @include bg-absolute;
+      background: #b8f9ff url('/assets/img/page-structure/sky/sky.png') repeat-x top left;
+      top: 0;
     }
-
-    .date {
-        @include small-text;
-        margin-left: 10px;
+    .hill-back {
+      @include bg-absolute;
+      height: 476px;
+      background: transparent url('/assets/img/page-structure/sky/hill-back.png') repeat-x top left;
     }
-}
-
-.session {
-    h2 {
-        color: black;
-        margin-bottom: 0;
+    .hill-front {
+      @include bg-absolute;
+      height: 636px;
+      background: transparent url('/assets/img/page-structure/sky/hill-front.png') repeat-x top left;
     }
-
-    h3 {
-        font-size: 18px;
-        margin-top: -10px;
+  } //#sky
+
+  #ground {
+    padding-bottom: 30px;
+    position: relative;
+    .grass {
+      background: transparent url('/assets/img/page-structure/ground/grass.png') repeat-x top left;
+      height: 50px;
     }
-
-    .video {
-        margin-bottom: 15px;
-
-        h3 {
-            @include small-text;
-            color: rgb(182, 182, 182);
-        }
+    .ground {
+      @include bg-absolute;
+      top: 0;
+      background: #f1e0b6 url('/assets/img/page-structure/ground/ground.png') repeat top left;
     }
-}
-
-.links {
-    list-style-type: none;
-    margin-left: 0;
+  } //#ground
 
-    h4 {
-        @include small-text;
+  #water {
+    .wave {
+      background: transparent url('/assets/img/page-structure/water/wave.png') repeat-x top left;
+      height: 55px;
+      margin-top: -20px;
     }
-
-    li {
-        float: left;
-        margin: 5px;
+    .water {
+      background: #92e1fe;
     }
-}
+  } //#water
 
-.btn.btn-primary {
-    background-color: #2b9ea6;
-    background-image: none;
+  footer, .footer {
     color: white;
-    border: none;
-
-    &:hover {
-        background-color: #61ced6;
+    .blueblock {
+      background: transparent url('/assets/img/page-structure/footer/block.png') repeat-x top left;
+      height: 100px;
+      margin-top: -10px;
     }
-}
+    .dark {
+      background: #242c3a;
+    }
+  } //footer
+
+}

assets/css/mixin.scss

@@ -0,0 +1,7 @@
+@mixin bg-absolute {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: -1;
+}

assets/css/temp.scss

@@ -0,0 +1,96 @@
+@mixin small-text {
+  font-size: 14px;
+  line-height: 18px;
+}
+
+@mixin normal-text {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+body {
+  @include normal-text;
+
+  font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
+  color: rgb(102, 102, 102);
+  padding: 0px;
+}
+
+a {
+  color: #2b9ea6;
+}
+
+.header {
+  margin: 20px 0;
+}
+
+.upcoming {
+  margin-top: 40px;
+  color: #e30066;
+}
+
+.session-small {
+  margin-bottom: 20px;
+
+  h2 {
+    @include normal-text;
+    margin-bottom: 0;
+  }
+
+  h3 {
+    @include small-text;
+    margin-top: 0;
+    color: rgb(182, 182, 182);
+  }
+
+  .date {
+    @include small-text;
+    margin-left: 10px;
+  }
+}
+
+.session {
+  h2 {
+    color: black;
+    margin-bottom: 0;
+  }
+
+  h3 {
+    font-size: 18px;
+    margin-top: -10px;
+  }
+
+  .video {
+    margin-bottom: 15px;
+
+    h3 {
+      @include small-text;
+      color: rgb(182, 182, 182);
+    }
+  }
+}
+
+.links {
+  list-style-type: none;
+  margin-left: 0;
+
+  h4 {
+    @include small-text;
+  }
+
+  li {
+    float: left;
+    margin: 5px;
+  }
+}
+
+.btn.btn-primary {
+  background-color: #2b9ea6;
+  background-image: none;
+  color: white;
+  border: none;
+
+  &:hover {
+    background-color: #61ced6;
+  }
+}