graph some stuff from the spiral website

budget/static/main.css

@@ -1,5 +1,5 @@
 @import url(http://twitter.github.com/bootstrap/assets/css/bootstrap-1.0.0.min.css);
-@import url(http://fonts.googleapis.com/css?family=Lobster);
+@import url(http://fonts.googleapis.com/css?family=Lobster|Comfortaa);
 
 .topbar h3{ margin-left: 75px; }
 .topbar ul{ padding-left: 75px; }
@@ -14,3 +14,33 @@ div.topbar ul.secondary-nav { padding-right: 75px; }
 
 .right h3 { float: right; }
 #bills { color: black; }
+
+#header{ background-color: #ABE128; height: 180px; padding: 50px 0 0 0;}
+#header .slide {
+    font-family: 'Comfortaa', arial, serif;
+    height: 140px;
+    padding: 40px 0 0 0;
+    margin-top: -40px;
+    background-image: url("gradient.png");
+    background-position: center top;
+    background-repeat: no-repeat;
+}
+
+#header .slide {
+    width: 750px;
+    margin: 0 auto;
+}
+
+.about_link:hover {
+    color: #ABE128;
+}
+
+#header .slide .about_link {
+    margin-left: 180px;
+    padding: 7px 15px;
+    background-color: #222;
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    color: white;
+    text-decoration: none;
+}

budget/templates/home.html

@@ -1,26 +1,37 @@
 {% extends "layout.html" %}
 
-{% block sidebar %}
-{% include "recent_projects.html" %}
-{% endblock %}
 
-{% block content %}
+{% block sidebar_wrapper %}{% endblock %}
 
-<h2>Welcome on your budget manager</h2>
-<p>You're sharing a house? are going on holidays with friends? are simply sharing money with others? We can help!</p>
-<div class="row">
-    <div class="span8 columns">
-        <form action="{{ url_for('authenticate') }}" method="post">
-            <h3>Log to an existing project...</h3>
-            {{ forms.authenticate(auth_form) }}
-        </form>
-    </div>
-    <div class="span8 columns">
-        <form action="{{ url_for('create_project') }}" method="post">
-            <h3>...or create a new one</h3>
-            {{ forms.create_project(project_form) }}</div>
-        </form>
+{% block header %}
+<div id="header">
+    <div class="slide">
+        <h1><span>Manage your shared <br>expenses easily</span></h1>
+        <a href="about.html" class="about_link">Try out the demo</a>
+    </div>
+</div>
+{% endblock %}
+
+{% block container %}
+<div class="container-fluid">
+    <div class="content">
+
+    <h2>Welcome on your budget manager</h2>
+    <p>You're sharing a house? are going on holidays with friends? are simply sharing money with others? We can help!</p>
+    <div class="row">
+        <div class="span8 columns">
+            <form action="{{ url_for('authenticate') }}" method="post">
+                <h3>Log to an existing project...</h3>
+                {{ forms.authenticate(auth_form) }}
+            </form>
+        </div>
+        <div class="span8 columns">
+            <form action="{{ url_for('create_project') }}" method="post">
+                <h3>...or create a new one</h3>
+                {{ forms.create_project(project_form) }}</div>
+            </form>
+        </div>
+    </div>
     </div>
 </div>
-
 {% endblock %}

budget/templates/layout.html

@@ -67,6 +67,8 @@
     </ul>
     {% endif %}
 </div>
+{% block header %}{% endblock %}
+{% block container %}
 <div class="container-fluid" style="margin-top: 40px">
     <div class="sidebar">{% block sidebar %}{% endblock %}</div>
     <div class="content">
@@ -77,6 +79,7 @@
     {% endblock %}
     </div>
 </div>
+{% endblock %}
 
 </body>
 </html>