Basic template

publichealth/home/templates/header.html

@@ -0,0 +1,38 @@
+<!-- Header -->
+<div id="header-wrapper">
+  <header id="header" class="container">
+
+    <!-- Logo -->
+    <div id="logo">
+      <h1><a href="index.html">Verti</a></h1>
+      <span>by HTML5 UP</span>
+    </div>
+
+    <!-- Nav -->
+    <nav id="nav">
+      <ul>
+        <li class="current"><a href="#">Willkommen</a></li>
+        <li>
+          <a href="#">Menu 1</a>
+          <ul>
+            <li><a href="#">Lorem ipsum dolor</a></li>
+            <li><a href="#">Magna phasellus</a></li>
+            <li>
+              <a href="#">Phasellus consequat</a>
+              <ul>
+                <li><a href="#">Lorem ipsum dolor</a></li>
+                <li><a href="#">Phasellus consequat</a></li>
+                <li><a href="#">Magna phasellus</a></li>
+                <li><a href="#">Etiam dolore nisl</a></li>
+              </ul>
+            </li>
+            <li><a href="#">Veroeros feugiat</a></li>
+          </ul>
+        </li>
+        <li><a href="#">Menu 2</a></li>
+        <li><a href="#">Menu 3</a></li>
+      </ul>
+    </nav>
+
+  </header>
+</div>

publichealth/home/templates/home/home_page.html

@@ -5,6 +5,23 @@
 
 {% block content %}
 
-  {% include_block self.body %}
+  {% include 'header.html' %}
+
+  <!-- Main content -->
+  <div id="banner-wrapper">
+    <div id="banner" class="box container">
+      <div class="row">
+        <div class="7u 12u(medium)">
+          {% include_block self.body %}
+        </div>
+        <div class="5u 12u(medium)">
+          <ul>
+            <li><a href="#" class="button big icon fa-arrow-circle-right">Ok let's go</a></li>
+            <li><a href="#" class="button alt big icon fa-question-circle">More info</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
 
 {% endblock %}

publichealth/static/css/main.scss

@@ -1,3 +1,23 @@
+/* Page header */
+
+#logo {
+  background: url(../org/public-health-bg.png) no-repeat top left;
+  background-size: cover;
+  border: 1px solid white;
+  font-size: 0px;
+  display: block;
+  width: 450px;
+  height: 140px;
+}
+
+#nav {
+  margin-top: -50px;
+}
+
+#header {
+  margin-bottom: 0px;
+}
+
 /* Responsive image/video classes */
 .rich-text img {
     max-width: 100%;

publichealth/templates/base.html

@@ -12,8 +12,9 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        <link rel="stylesheet" type="text/css" href="{% static 'verti/assets/css/main.css' %}">
         {% compress css %}
-            <link rel="stylesheet" type="text/x-scss" href="{% static 'css/main.scss' %}">
+        <link rel="stylesheet" type="text/x-scss" href="{% static 'css/main.scss' %}">
         {% endcompress %}
 
         {% block extra_css %}
@@ -31,8 +32,12 @@
         {% endcompress %}
 
         {% block extra_js %}
-
+          <script src="{% static 'verti/assets/js/jquery.min.js' %}"></script>
+          <script src="{% static 'verti/assets/js/jquery.dropotron.min.js' %}"></script>
+          <script src="{% static 'verti/assets/js/skel.min.js' %}"></script>
+          <script src="{% static 'verti/assets/js/util.js' %}"></script>
+          <!--[if lte IE 8]><script src="{% static 'verti/assets/js/ie/respond.min.js' %}"></script><![endif]-->
+          <script src="{% static 'verti/assets/js/main.js' %}"></script>
         {% endblock %}
     </body>
 </html>
-