4 files changed, 126 insertions, 0 deletions
diff --git a/shopdb/app/templates/inventory.html b/shopdb/app/templates/inventory.html
new file mode 100644
index 0000000..d995835
--- /dev/null
+++ b/shopdb/app/templates/inventory.html
@@ -0,0 +1,16 @@
+{% extends "layout.html" %}
+{% block content %}
+
+<div class="header">
+  <a class="logo">shopdb</a>
+  <div class="header-right">
+    <a href="jobs">jobs</a>
+    <a class="active" href="inventory">inventory</a>
+  </div>
+</div>
+
+<h1>inventory</h1>
+
+<p>This website was built with Python via the Flask framework.</p>
+
+{% endblock %}
diff --git a/shopdb/app/templates/jobs.html b/shopdb/app/templates/jobs.html
new file mode 100644
index 0000000..59d4ba8
--- /dev/null
+++ b/shopdb/app/templates/jobs.html
@@ -0,0 +1,19 @@
+{% extends "layout.html" %}
+{% block content %}
+
+<div class="header">
+  <a class="logo">shopdb</a>
+  <div class="header-right">
+    <a class="active" href="jobs">jobs</a>
+    <a href="inventory">inventory</a>
+  </div>
+</div>
+
+
+<h1>jobs</h1>
+<p>This website was built with Python via the Flask framework.</p>
+
+{{ df|safe }}
+
+
+{% endblock %}
diff --git a/shopdb/app/templates/layout.html b/shopdb/app/templates/layout.html
new file mode 100644
index 0000000..e63f746
--- /dev/null
+++ b/shopdb/app/templates/layout.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+</head>
+<body>
+
+<div class="container">
+    {% block content %}
+    {% endblock %}
+</div>
+
+</body>
+</html>
diff --git a/shopdb/app/templates/main.css b/shopdb/app/templates/main.css
new file mode 100644
index 0000000..8ad1c3e
--- /dev/null
+++ b/shopdb/app/templates/main.css
@@ -0,0 +1,76 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #444;
+}
+/*
+    * Formatting the header area
+    */
+header {
+    background-color: #DFB887;
+    height: 35px;
+    width: 100%;
+    opacity: .9;
+    margin-bottom: 10px;
+}
+header h1.logo {
+    margin: 0;
+    font-size: 1.7em;
+    color: #fff;
+    text-transform: uppercase;
+    float: left;
+}
+header h1.logo:hover {
+    color: #fff;
+    text-decoration: none;
+}
+/*
+    * Centering the body content
+    */
+.container {
+    width: 1200px;
+    margin: 0 auto;
+}
+div.home {
+    padding: 10px 0 30px 0;
+    background-color: #E6E6FA;
+    -webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	    border-radius: 6px;
+}
+div.about {
+    padding: 10px 0 30px 0;
+    background-color: #E6E6FA;
+    -webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	    border-radius: 6px;
+}
+h2 {
+    font-size: 3em;
+    margin-top: 40px;
+    text-align: center;
+    letter-spacing: -2px;
+}
+h3 {
+    font-size: 1.7em;
+    font-weight: 100;
+    margin-top: 30px;
+    text-align: center;
+    letter-spacing: -1px;
+    color: #999;
+}
+.menu {
+    float: right;
+    margin-top: 8px;
+}
+.menu li {
+    display: inline;
+}
+.menu li + li {
+    margin-left: 35px;
+}
+.menu li a {
+    color: #444;
+    text-decoration: none;
+}