wrote out basic notes skeleton

20 files changed, 771 insertions, 0 deletions

diff --git a/design/config.rb b/design/config.rb
new file mode 100644
index 0000000..16900a7
--- /dev/null
+++ b/design/config.rb
@@ -0,0 +1,12 @@
+project_type = :stand_alone
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "../media"
+sass_dir = "sass"
+images_dir = "../media/img"
+javascripts_dir = "../media"
+#output_style = :compressed
+output_style = :compressed
+#output_style = (environment == :production) ? :compressed : :expanded
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
new file mode 100644
index 0000000..dfe632a
--- /dev/null
+++ b/design/sass/_fonts.scss
@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'carrois_gothicregular';
+    src: url('carroisgothic-regular-webfont.eot');
+    src: url('carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('carroisgothic-regular-webfont.woff') format('woff'),
+         url('carroisgothic-regular-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+
+}
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
new file mode 100644
index 0000000..e525c36
--- /dev/null
+++ b/design/sass/_footer.scss
@@ -0,0 +1,24 @@
+footer {
+    @include constrain_wide;
+    margin-top: 5em;
+    &:before {
+            @include faded_line_after;
+            margin-bottom: 1.2em;
+    }
+    nav {
+        text-align: center;
+    }
+    h4 {
+        @include fontsize(13);
+        font-family: helvetica,arial,sans-serif;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin: 0 0 10px;
+    }
+    p {
+        @include fontsize(14);
+        text-align: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
+    }
+}
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
new file mode 100644
index 0000000..3dc8ee4
--- /dev/null
+++ b/design/sass/_forms.scss
@@ -0,0 +1,85 @@
+form fieldset {
+    margin: 1rem 0;
+    padding: 0;
+    border: none;
+    width: 100%;
+    position: relative;
+}
+form fieldset label {
+    position: absolute;
+    -webkit-transform: translate3d(10px, 100%);
+    -moz-transform: translate3d(10px, 100%);
+    -ms-transform: translate3d(10px, 100%);
+    -o-transform: translate3d(10px, 100%);
+    transform: translate3d(10px, 100%);
+    @include fontsize(14);
+    color: lighten($body_font_color, 25);
+    line-height: 14px;
+    top: .7rem;
+    left: .75rem;
+    z-index: 1;
+}
+input {
+    border: 1px solid #b3b3b3;
+    border-radius: 4px;
+    padding: 2.2rem  0 .75rem .75rem;
+    width: 99%;
+    @include fontsize(24);
+}
+form .error input {
+    border: 1px solid $link_color;
+}
+.helptext {
+    @include fontsize(14);
+    color: lighten($body_font_color, 25);
+}
+.errorlist {
+    color: $link_color;
+    list-style-type: none;
+    padding: 0 0 0 1rem;
+    position: relative;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    tr {
+        margin: 2rem 0;
+    }
+    td, th {
+        display: table-cell;
+        vertical-align: inherit;
+        margin: 0;
+        padding: 16px .25rem 14px;
+        border-bottom: 1px solid #b3b3b3;
+    }
+    th {
+        @include fontsize(13);
+        @include smcaps;
+        width: 200px;
+    }
+    td {
+        width: 200px;
+    }
+    &:after {
+        display: block;
+        @extend %clearfix;
+    }
+    .btn { float: right;}
+}
+.btn {
+    @include fontsize(15);
+    display: inline-block;
+    border-radius: 4px;
+    -webkit-appearance: none;
+    text-decoration: none;
+    cursor: pointer;
+    background: $link_color;
+    color: #fff !important;
+    border: 1px solid $link_color;
+    padding: 5px 9px;
+    white-space: nowrap;
+    &:hover {
+        background: $link_hover_color;
+        border: 1px solid $link_hover_color;
+    }
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
new file mode 100644
index 0000000..9a01c61
--- /dev/null
+++ b/design/sass/_global.scss
@@ -0,0 +1,196 @@
+body {
+    margin: 0 auto;
+    padding: 0;
+    overflow-x: hidden;
+    font:$body_p_font;
+    color: $body_font_color;
+    text-align: left;
+    background-color: transparent
+}
+ul {
+    padding: 0;
+}
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+    touch-action: manipulation;
+}
+a {
+    color: $link_color;
+    -webkit-transition: all 0.1s ease;
+    -moz-transition: all 0.1s ease;
+    -ms-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    &:hover {
+        text-decoration: none;
+        color: $link_color;
+    }
+    &:visited {
+        color: $link_color;
+    }
+}
+p {
+    text-align: left;
+    @include fontsize(18);
+    @include breakpoint(alpha){
+        @include fontsize(20);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(22);
+        line-height: 1.6;
+    }
+}
+time {
+    @include smcaps;
+    @include fontsize(11);
+    display: block;
+    span {
+        @include fontsize(13);
+    }
+}
+abbr {
+    cursor: help;
+}
+pre {
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+    }
+}
+object, embed, video {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+}
+blockquote {
+    @include fontsize(18);
+    display: block;
+    border-top: 4px solid lighten($body_font_light, 20);
+    border-bottom: 4px solid lighten($body_font_light, 20);
+    margin: 3rem 0;
+    position: relative;
+    text-align: left;
+    font-style: italic;
+    cite {
+      display: block;
+      text-align: right;
+    }
+    @include breakpoint(alpha){
+        @include fontsize(20);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(22);
+        line-height: 1.6;
+    }
+}
+blockquote:before {
+    @include fancy_sans;
+    @include fontsize(68);
+    content: '\201C';
+    position: absolute;
+    top: -1rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 3rem;
+    height: 2rem;
+    color: #666;
+    text-align: center;
+}
+hr {
+    border: 0; 
+    height: 1px;
+    @include faded_line_after;
+    margin: 3rem 0;
+}
+img {
+    max-width: 100%;
+}
+figure {
+    margin: 0;
+}
+figcaption {
+    text-align: left;
+}
+figcaption, figcaption a {
+    @include fancy_sans;
+    @include fontsize(14);
+    text-align: left;
+    line-height: 1.9;
+    padding: .3rem .5rem .3rem 0;
+    color: #666;
+    border-bottom: 1px lighten($body_font_light, 20) solid;
+    margin-bottom: 1rem;
+}
+figcaption a:visited {
+    color: #666;
+}
+h1 {
+    font-family: $headline_font_serif;
+    @include fontsize(36);
+    font-weight: normal;
+}
+h2 {
+    font-family: $headline_font_serif;
+    @include fontsize(28);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(30);
+        line-height: 1.6;
+    }
+}
+h3 {
+    @include fancy_sans;
+    @include fontsize(24);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(28);
+        line-height: 1.4;
+    }
+}
+.wrapper {
+    @include constrain_wide;
+}
+//**************  Universals ************************
+.hide {
+    display: none;
+}
+
+.strike {
+    text-decoration: line-through;
+}
+
+.yes {
+    background: green !important;
+    color: white;
+}
+
+.no {
+    background: red !important;
+    color: white;
+}
+
+.alert, .error {
+    color: red !important;
+}
+//**************  other global classes ************************
+.sans {
+    @include generic_sans;
+}
+.bl {
+    @include smcaps;
+    @include fontsize(11);
+}
+.italic {
+    font-style: italic;
+}
+.small {
+    font-size: 90%;
+}
+.divide-after:after {
+    margin-bottom: 3em;
+    @include faded_line_after;
+}
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
new file mode 100644
index 0000000..8b8c3da
--- /dev/null
+++ b/design/sass/_header.scss
@@ -0,0 +1,55 @@
+.head-wrapper {
+    height: 65px;
+    box-shadow: 0 -1px 0 #e7e2ee inset;
+    background: #fff;
+}
+header {
+    @include constrain_wide;
+    .left {
+        float: left;
+        a {
+            display: inline-block;
+            padding-left: 0;
+        }
+    }
+    .right {
+        float: right;
+    }
+}
+nav {
+    @include fancy-sans-bold;
+    letter-spacing: 1px;
+    margin: 0 0 10px;
+    ul {
+        list-style-type: none;
+        padding: 0;
+        li {
+            display: inline;
+        }
+    }
+    a {
+        @include fontsize(14);
+        text-decoration: none;
+        color: #444;
+        font-weight: normal;
+        padding: 6px;
+        &:visited {
+            color: #444;
+        }
+        &:hover {
+            color: $link_color;
+        }
+    }
+    .btn {
+        display: inline-block;
+        background: transparent;
+        color: $link_color !important;
+        border: 1px solid $link_color;
+        border-radius: 4px;
+        &:hover {
+            color: white !important;
+            border-color: $link_color;
+            background-color: $link_color;
+        }
+    }
+}
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
new file mode 100644
index 0000000..1aeeb83
--- /dev/null
+++ b/design/sass/_mixins.scss
@@ -0,0 +1,136 @@
+$brown: #201a11;
+$brown: #222;
+$light: #ccc;
+$orange: #b53a04;
+$link_color: #FC5D2B;
+$link_hover_color: #BD3039;
+$headline_font_serif: Georgia, 'Times New Roman', serif;
+
+$body_p_font: normal 100% / 1.5 "proxima-nova",helvetica,arial,sans-serif;
+$body_font_color: #6a6a6a;
+$body_font_light: #b3aeae;
+
+$archive_p_line_height: 1.6;
+//$light;
+$narrow-beta-width: 640px;
+$narrow-max-width: 700px;
+$max_width: 1280px;
+
+@mixin smcaps {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+@mixin plain_a {
+  border: none;
+  text-decoration: none;
+  color: $body_font_color;
+}
+
+@function calc-rem($size) {
+  $remsize: $size/16;
+  @return #{$remsize}rem;
+}
+
+@mixin fontsize($size) {
+  font-size: $size + px;
+  font-size: calc-rem($size);
+}
+
+@mixin generic-sans {
+    font-family: sans-serif;
+}
+@mixin fancy-sans {
+    font-family: "proxima-nova",helvetica,arial,sans-serif;
+}
+@mixin fancy-sans-bold {
+    font-family: "proxima-nova",helvetica,arial,sans-serif;
+    font-weight: 600;
+}
+@mixin fancy-serif {
+    font-family: Georgia, Palatino, serif;
+}
+%clearfix {
+    *zoom: 1;
+    &:before {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+
+@mixin transparent_class {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity = 90);
+  opacity: 0.9;
+}
+
+@mixin faded_line_after {
+    display: block;
+    content: "";
+    margin-top: 3em;
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+} 
+
+//for overriding the above on dark pages:
+@mixin light_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+@mixin lighter_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+//generic constrain function
+@mixin constrain($size) {
+    max-width: $size;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//set an element to centered, narrowish column width
+//used mostly on columns of text
+@mixin constrain_narrow() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(beta) {
+        max-width: $narrow-beta-width;
+    }
+    @include breakpoint(gamma) {
+        max-width: $narrow-max-width;
+    }
+}
+
+//set an element to centered, wideish column width
+@mixin constrain_wide() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
+    }
+}
+
+
+
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
new file mode 100644
index 0000000..3ea883f
--- /dev/null
+++ b/design/sass/_queries.scss
@@ -0,0 +1,29 @@
+$breakpoint-alpha: 728px; //728
+$breakpoint-beta: 824px; //784
+$breakpoint-gamma: 960px;
+$breakpoint-delta: 1170px;
+$breakpoint-epsilon: $max_width;
+
+@mixin breakpoint($point) {
+    @if $point == "alpha" {
+        @media screen and (min-width:$breakpoint-alpha ){ @content; }
+    }
+    @if $point == "alpha-2" {
+        @media screen and (min-width:$breakpoint-alpha-2 ){ @content; }
+    }
+    @else if $point == "beta" {
+        @media screen and  (min-width: $breakpoint-beta) { @content; }
+    }
+    @else if $point == "beta-2" {
+        @media screen and  (min-width: $breakpoint-beta-2) { @content; }
+    }
+    @else if $point == "gamma" {
+        @media screen and (min-width: $breakpoint-gamma)  { @content; }
+    }
+    @else if $point == "delta" {
+        @media screen and (min-width: $breakpoint-delta)  { @content; }
+    }
+    @else if $point == "epsilon" {
+        @media screen and (min-width: $breakpoint-epsilon)  { @content; }
+    }
+}
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
new file mode 100644
index 0000000..a9e582e
--- /dev/null
+++ b/design/sass/screenv1.scss
@@ -0,0 +1,7 @@
+@import "_fonts.scss";
+@import "_mixins.scss";
+@import "_queries.scss";
+@import "_global.scss";
+@import "_header.scss";
+@import "_footer.scss";
+@import "_forms.scss";
diff --git a/design/templates/accounts/profile.html b/design/templates/accounts/profile.html
new file mode 100644
index 0000000..c47e6c6
--- /dev/null
+++ b/design/templates/accounts/profile.html
@@ -0,0 +1,54 @@
+{% extends 'base.html' %}
+{% block content %}
+<main>
+<h1>Account Settings</h1>
+<table>
+    <tbody>
+        <tr>
+            <th scope="row">Username</th>
+            <td colspan="2">{{object.user.username}}<td>
+        </tr>
+        <tr>
+            <th scope="row">Email</th>
+            <td colspan="2">{{object.user.email}}<td>
+            <td class="text-right"><a href="/settings/change-email/"class="btn">Change</a></td>
+        </tr>
+        <tr>
+            <th scope="row">Fullname</th>
+            <td colspan="2">{{object.user.first_name}} {{object.user.last_name}}<td>
+            <td class="text-right"><a href="/settings/change-profile/#display_name"class="btn">Change</a></td>
+        </tr>
+        <tr>
+            <th scope="row">Plan</th>
+            <td colspan="2">{{object.plan}}<td>
+            <td class="text-right"><a href="/settings/change-plan/" class="btn">Change</a></td>
+        </tr>
+        <tr>
+            <th scope="row">Credit Card</th>
+            <td colspan="2">{{object.credit_card}}<td>
+            <td class="text-right"><a href="/settings/change-profile/" class="btn">Change</a></td>
+        </tr>
+        <tr>
+            <th scope="row">Bio</th>
+            <td colspan="2">{{object.bio}}<td>
+            <td class="text-right"><a href="/settings/change-bio/" class="btn">Change</a></td>
+        </tr>
+        <tr>
+            <th scope="row">Photo</th>
+            <td colspan="2">{{object.photo}}<td>
+            <td class="text-right"><a href="/settings/change-photo/" class="btn">Change</a></td>
+        </tr>
+        <tr>
+            <th scope="row">Website</th>
+            <td colspan="2">{{object.website}}<td>
+            <td class="text-right"><a href="/settings/change-website/" class="btn">Change</a></td>
+        </tr>
+        <tr>
+            <th scope="row">Location</th>
+            <td colspan="2">{{object.location}}<td>
+            <td class="text-right"><a href="/settings/change-location/" class="btn">Change</a></td>
+        </tr>
+    </tbody>
+</table>
+</main>
+{% endblock %}
diff --git a/design/templates/base.html b/design/templates/base.html
new file mode 100644
index 0000000..45291d0
--- /dev/null
+++ b/design/templates/base.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--[if lt IE 8]>   <html class="lte8"> <![endif]-->
+<!--[if IE 8]>     <html class="ie8 lte8"> <![endif]-->
+<!--[if IE 9]>     <html class="ie9"> <![endif]-->
+<!--[if !IE]><!--> <html lang="en"><!--<![endif]-->
+<head>
+<title>Note</title>
+<meta name="viewport" content="width=device-width">
+<meta name="description" content="Note taking for writers">
+<meta property="og:description" content="Note taking for writers">
+<meta property="og:site_name" content="Notes">
+<meta property="og:image" content="">
+<link rel="stylesheet" href="/media/screenv1.css?{{now}}" type="text/css">
+<link rel="icon" type="image/png" href="">
+<link rel="manifest" href="/webmanifest.json">
+<link rel="apple-touch-icon" sizes="256x256" href="">
+</head>
+<body class="{% block bodyclass %}{% endblock %}">
+    <div class="head-wrapper">
+    <header>
+    <nav class="left">
+        <ul>
+            <li><a href="/" title="">Home</a></li>
+        </ul>
+    </nav>
+    <div class="logo"></div>
+    <nav class="right">
+        <ul>
+            <li><a href="{% url 'pages' slug='tour' %}" title="">Tour</a></li>
+            <li><a href="{% url 'pages' slug='howto' %}" title="">How to</a></li>
+            <li><a href="{% url 'logout' %}" title="">Log out</a></li>{% if request.user %}
+            <li><a href="{% url 'settings' %}" title="">Account</a></li>{% else %}
+            <li><a href="{% url 'login' %}" title="">Login</a></li>
+            <li><a href="{% url 'django_registration_register' %}" title="" class="btn">Get Started</a></li>{% endif %}
+        </ul>
+    </nav>
+    </header>
+    </div>
+    <div class="wrapper">
+{% block content %}
+{% endblock %}
+    </div>
+    <footer>
+        <p>&copy; Luxagraf Software. Problems or questions? Contact <a href="{% url 'pages' slug='terms-of-service' %}" title="">support@notes.tld</a>.</p> 
+    <nav>
+        <ul>
+            <li><a href="{% url 'pages' slug='terms-of-service' %}" title="">Terms of Service</a></li>
+            <li><a href="{% url 'pages' slug='privacy' %}" title="">Privacy</a></li>
+            <li><a href="{% url 'pages' slug='about' %}" title="">About</a></li>
+            <li><a href="{% url 'pages' slug='faq' %}" title="">FAQ</a></li>
+            <li><a href="{% url 'pages' slug='resources' %}" title="">Resources</a></li>
+            <li><a href="{% url 'pages' slug='security' %}" title="">Security</a></li>
+        </ul>
+    </nav>
+    </footer>
+</body>
diff --git a/design/templates/django_registration/activation_complete.html b/design/templates/django_registration/activation_complete.html
new file mode 100644
index 0000000..914be51
--- /dev/null
+++ b/design/templates/django_registration/activation_complete.html
@@ -0,0 +1,8 @@
+
+{% extends 'base.html' %}
+{% block content %}
+<main>
+<h1>Your account is now active.</h1>
+<p><a href="{% url 'login' %}">Login</a> and get started! <?p>
+</main>
+{% endblock %}
diff --git a/design/templates/django_registration/activation_email_body.txt b/design/templates/django_registration/activation_email_body.txt
new file mode 100644
index 0000000..8b1e134
--- /dev/null
+++ b/design/templates/django_registration/activation_email_body.txt
@@ -0,0 +1,5 @@
+Thanks for signing up with {{site}}, just one more thing to do, click this link to confirm your email:
+
+<a href="{{scheme}}://{{site}}/activate/{{activation_key}}">{{scheme}}://{{site}}/register/{{activation_key}}</a>
+
+
diff --git a/design/templates/django_registration/activation_email_subject.txt b/design/templates/django_registration/activation_email_subject.txt
new file mode 100644
index 0000000..ea275d2
--- /dev/null
+++ b/design/templates/django_registration/activation_email_subject.txt
@@ -0,0 +1 @@
+Please Activate Your Account
diff --git a/design/templates/django_registration/registration_complete.html b/design/templates/django_registration/registration_complete.html
new file mode 100644
index 0000000..e9d0610
--- /dev/null
+++ b/design/templates/django_registration/registration_complete.html
@@ -0,0 +1,7 @@
+{% extends 'base.html' %}
+{% block content %}
+<main>
+<h1>Thanks for signing up.</h1>
+<p>Please check your email for a link to confirm you new account.<?p>
+</main>
+{% endblock %}
diff --git a/design/templates/django_registration/registration_form.html b/design/templates/django_registration/registration_form.html
new file mode 100644
index 0000000..54e01c5
--- /dev/null
+++ b/design/templates/django_registration/registration_form.html
@@ -0,0 +1,17 @@
+{% extends 'base.html' %}
+{% block content %}
+<form action="" method="post">
+{% csrf_token %}
+{{ form.non_field_errors }}
+{% for field in form %}
+<fieldset {% if field.errors %}class="error"{%endif%}>
+{{field.label_tag}}
+{{field}}
+{% if field.label == "Password" %}<span class="helptext">Password should be 8 or more characters.</span>{% endif %}
+{% if field.errors %}{{field.errors}}{% endif %}
+</fieldset>
+{% endfor %}
+<p><input class="btn" value="submit" type="submit" /></p>
+</form>
+<p class="text-muted">Already have an account? <a href="{% url 'login' %}">Log in</a>.</p>
+{% endblock %}
diff --git a/design/templates/notes/create.html b/design/templates/notes/create.html
new file mode 100644
index 0000000..3bd765d
--- /dev/null
+++ b/design/templates/notes/create.html
@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+{% block content %}
+<main>
+    <h1>Create a new note</h1>
+<form action="" method="post">
+{% csrf_token %}
+{{ form.non_field_errors }}
+{% for field in form %}
+<fieldset {% if field.errors %}class="error"{%endif%}>
+{{field.label_tag}}
+{{field}}
+{% if field.errors %}{{field.errors}}{% endif %}
+</fieldset>
+{% endfor %}
+<p><input class="btn" value="submit" type="submit" /></p>
+</form>
+</main>
+{% endblock %}
diff --git a/design/templates/notes/note_list.html b/design/templates/notes/note_list.html
new file mode 100644
index 0000000..762d05a
--- /dev/null
+++ b/design/templates/notes/note_list.html
@@ -0,0 +1,9 @@
+{% extends 'base.html' %}
+{% block content %}
+<main>
+    <h1> Notes</h1>
+    <ul>{% for obj in object_list %}
+    <li>{{obj}}</li>
+    {% endfor %}</ul>
+</main>
+{% endblock %}
diff --git a/design/templates/pages/page.html b/design/templates/pages/page.html
new file mode 100644
index 0000000..3ac5795
--- /dev/null
+++ b/design/templates/pages/page.html
@@ -0,0 +1,7 @@
+{% extends 'base.html' %}
+{% block content %}
+<main>
+    <h1>{{page.title}}</h1>
+    {{page.body_html|safe}}
+</main>
+{% endblock %}
diff --git a/design/templates/registration/login.html b/design/templates/registration/login.html
new file mode 100644
index 0000000..13b1c6c
--- /dev/null
+++ b/design/templates/registration/login.html
@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+{% block content %}
+{% if form.errors %}
+<p>Your username and password didn't match. Please try again.</p>
+{% endif %}
+
+{% if next %}
+    {% if user.is_authenticated %}
+    <p>Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.</p>
+    {% else %}
+    <p>Please login to see this page.</p>
+    {% endif %}
+{% endif %}
+
+<form method="post" action="{% url 'login' %}">
+{% csrf_token %}
+<table>
+<tr>
+    <td>{{ form.username.label_tag }}</td>
+    <td>{{ form.username }}</td>
+</tr>
+<tr>
+    <td>{{ form.password.label_tag }}</td>
+    <td>{{ form.password }}</td>
+</tr>
+</table>
+
+<input type="submit" value="login">
+<input type="hidden" name="next" value="{{ next }}">
+</form>
+
+{# Assumes you setup the password_reset view in your URLconf #}
+<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
+{% endblock %}