First draft for landing page design

thecookiefactory · Mar 30, 2014 · 5451d2b · 5451d2b
1 parent 02d9237
commit 5451d2b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/duchess/assets/css/base.sass b/duchess/assets/css/base.sass
@@ -1,7 +1,7 @@
 @import duchess/assets/css/_reset.sass
 
-$duchess-primary = #030126
-$duchess-secondary = #FBFEAA
+$duchess-primary = rgb(2, 0, 17)
+$duchess-secondary = invert($duchess-primary)
 
 html, body
   height: 100%
@@ -10,9 +10,58 @@ section.hero
   background-color: $duchess-primary
   height: 100%
 
+  &:before
+    content: ''
+    display: block
+    height: 30%
+
   & h1
     color: $duchess-secondary
+    width: 100%
+    font-family: Lato, sans-serif
+    font-size: 128px
+    font-weight: 300
+    text-transform: uppercase
+    text-align: center
+
+  & .buttons
+    margin-top: 1em
+    text-align: center
+
+    & .start
+      width: 240px
+      height: 60px
+      background-color: desaturate(lighten($duchess-primary, 30%), 80%)
+      border: 0
+      color: $duchess-secondary
+      line-height: 60px
+      font-family: Lato, sans-serif
+      font-size: 28px
+      font-weight: 300
+      box-shadow: 4px
+      border-radius: 4px
+      text-transform: uppercase
+      cursor: pointer
+      transition: background-color 0.5s, color 0.5s
+
+      &:after
+        content: ' »'
+
+      &:hover
+        background-color: desaturate(lighten($duchess-primary, 40%), 90%)
+        color: black
+
+    & .load
+      font-family: Lato, sans-serif
+      font-size: 18px
+      line-height: 36px
+      font-weight: 300
+      color: $duchess-secondary
+      text-decoration: none
+      transition: color 0.5s
 
+      &:hover
+        color: lighten($duchess-secondary, 20%)
 
 section.about
   background-color: $duchess-secondary

diff --git a/duchess/templates/index.html b/duchess/templates/index.html
@@ -4,16 +4,18 @@
     <title>Duchess</title>
     <meta charset='utf-8'>
     <link rel='stylesheet' href='{{ url_for('static', filename='css/base.min.css') }}'>
+    <link href='http://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
   </head>
   <body>
     <section class='hero'>
         <h1>Duchess</h1>
-        <button class='start'>Start</button>
-        <button class='load'>Load</button>
+        <div class='buttons'>
+          <button class='start' type='button'>Start</button><br>
+          <a class='load' href='#'>(or load a saved game)</a>
+        </div>
     </section>
     <section class='about'>
-    <h2>Aboot</h2>
-
+    <h2>About</h2>
     </section>
   </body>
 </html>