diff --git a/src/scripts/main.js b/src/scripts/main.js
index 4c034f9..f58bba2 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,3 +1,5 @@
 import foo from './modules/foo'
 
 console.log(foo())
+
+setTimeout(() => document.querySelector('html').classList.remove('loading'), 500)
diff --git a/src/styles/_config.scss b/src/styles/_config.scss
index dfac308..8fa065f 100644
--- a/src/styles/_config.scss
+++ b/src/styles/_config.scss
@@ -1,4 +1,10 @@
 
+// Footer
+$footer-height: 80px;
+
+// Font
+$font-size: 18px;
+
 // SVEF vefverdlaun colors
 $color-orange: #E7792B;
 $color-green: #56A3A6;
diff --git a/src/styles/components/footer/_index.scss b/src/styles/components/footer/_index.scss
new file mode 100644
index 0000000..aceb65d
--- /dev/null
+++ b/src/styles/components/footer/_index.scss
@@ -0,0 +1,30 @@
+
+footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+
+  margin: auto;
+  padding: $spacing;
+  // width: $page-max-width;
+  height: $footer-height;
+
+  text-align: center;
+
+  background: $color-gray;
+
+  transition: transform 500ms ease 750ms;
+  transform: translate3d(0,0,0);
+
+  .loading & {
+    transform: translate3d(0,100%,0);
+  }
+
+  .svg-logo-svef {
+    margin: auto;
+    width: auto;
+    height: $footer-height - ($spacing*2);
+  }
+}
diff --git a/src/styles/components/header/_index.scss b/src/styles/components/header/_index.scss
new file mode 100644
index 0000000..eb6fd0e
--- /dev/null
+++ b/src/styles/components/header/_index.scss
@@ -0,0 +1,91 @@
+
+header {
+  position: relative;
+  z-index: 1;
+
+  display: block;
+  margin: 0 auto $spacing;
+  padding: 0;
+  height: 100px;
+
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0; bottom: 0;
+
+    display: block;
+    width: calc(100% - #{$spacing*2});
+    height: 4px;
+
+    background: $color-orange;
+
+    transition: transform 250ms ease 750ms;
+    transform: translate3d(0,0,0);
+
+    .loading & {
+      transform: translate3d(100%,0,0);
+    }
+  }
+
+  nav {
+    position: absolute;
+    left: $spacing*2;
+    right: 0;
+    bottom: 4px;
+
+    opacity: 1;
+    transition: opacity 500ms ease 500ms;
+
+    a {
+      position: relative;
+
+      margin: 0 $spacing;
+      padding: 0;
+
+      display: inline-block;
+      line-height: 40px;
+
+      font-size: 20px;
+      text-decoration: none;
+
+      opacity: 1;
+      transform: translate3d(0,0,0);
+      transition: opacity 750ms, transform 500ms;
+      transition-delay: 1000ms;
+
+      &:after {
+        content: '';
+
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        display: block;
+        width: auto;
+        height: 4px;
+
+        background: $color-orange;
+
+        transform: translate3d(0,100%,0);
+        transition: transform 150ms;
+      }
+
+      &.active,
+      &:hover {
+        &:after {
+          transform: translate3d(0,0,0);
+        }
+      }
+    }
+
+    .loading & {
+      opacity: 0;
+
+      a {
+        opacity: 0;
+        transform: translate3d(100%,0,0);
+      }
+    }
+  }
+}
diff --git a/src/styles/components/html/_index.scss b/src/styles/components/html/_index.scss
index ab002ca..16af047 100644
--- a/src/styles/components/html/_index.scss
+++ b/src/styles/components/html/_index.scss
@@ -3,7 +3,8 @@ html {
   margin: 0;
   padding: 0;
 
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial;
+  width: 100%;
+  height: 100%;
 
   background: $color-gray;
   color: $color-gray-light;
@@ -15,6 +16,9 @@ html {
 body {
   margin: 0;
   padding: 0;
+
+  width: 100%;
+  height: 100%;
 }
 
 // Default box-sizing to border-box, except for images and hr
diff --git a/src/styles/components/loading/_index.scss b/src/styles/components/loading/_index.scss
new file mode 100644
index 0000000..5e41d1e
--- /dev/null
+++ b/src/styles/components/loading/_index.scss
@@ -0,0 +1,23 @@
+
+loading {
+  display: block;
+
+  .svg-logo-svef {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 0;
+
+    margin: auto;
+    width: 80%;
+    max-width: 800px;
+
+    opacity: 0;
+    transform: translate3d(0,40vh,0) scale(0.2);
+    transition: opacity 500ms, transform 750ms;
+
+    .loading & {
+      opacity: 1;
+      transform: translate3d(0,0,0) scale(1);
+    }
+  }
+}
diff --git a/src/styles/components/main/_index.scss b/src/styles/components/main/_index.scss
index fda4338..d392b04 100644
--- a/src/styles/components/main/_index.scss
+++ b/src/styles/components/main/_index.scss
@@ -1,5 +1,50 @@
 
 main {
-  margin: 0;
-  padding: 20px;
+  overflow: hidden;
+
+  position: relative;
+  z-index: 1;
+
+  margin: 0 auto;
+  padding: 0 0 ($footer-height + $spacing);
+
+  max-width: $page-max-width;
+  min-height: 100vh;
+
+  color: $color-gray;
+
+  > grid {
+    max-width: $page-max-width - ($spacing*4);
+    position: relative;
+    z-index: 1;
+
+    text-align: left;
+
+    opacity: 1;
+    transform: translate3d(0,0,0);
+    transition: opacity 500ms, transform 750ms;
+    transition-delay: 1s;
+
+    .loading & {
+      opacity: 0;
+      transform: translate3d(0,20px,0);
+    }
+  }
+
+  &:after {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 0;
+
+    content: '';
+
+    background: $color-gray-light;
+
+    transition: transform 500ms ease 250ms;
+    transform: rotateY(0deg);
+
+    .loading & {
+      transform: rotateY(90deg);
+    }
+  }
 }
diff --git a/src/styles/components/typography/_index.scss b/src/styles/components/typography/_index.scss
index 06f87ac..3d77ec5 100644
--- a/src/styles/components/typography/_index.scss
+++ b/src/styles/components/typography/_index.scss
@@ -1,5 +1,99 @@
+@import url("http://overpass-30e2.kxcdn.com/overpass.css");
+
+html, body {
+  font-family: "Overpass", "Helvetica Neue", Helvetica, Arial;
+  font-size: 16px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0 auto $spacing;
+  padding: 0;
 
-h1 {
-  margin: 0 auto 20px;
   font-weight: 400;
+  line-height: 1.275;
+  letter-spacing: -1px;
+}
+
+h1 {
+  font-size: 30px;
+  @include respond-to(medium) {
+    margin-bottom: $spacing*2;
+    font-size: 45px;
+    letter-spacing: -3px;
+  }
+  @include respond-to(large) {
+    font-size: 56px;
+  }
 }
+
+h2 {
+  font-size: 28px;
+  @include respond-to(medium) {
+    font-size: 36px;
+  }
+  @include respond-to(large) {
+    margin-bottom: $spacing*2;
+    font-size: 45px;
+  }
+}
+
+h3 {
+  font-size: 24px;
+  @include respond-to(medium) {
+    font-size: 30px;
+  }
+  @include respond-to(large) {
+    font-size: 36px;
+  }
+}
+
+h4 {
+  font-size: 20px;
+  @include respond-to(medium) {
+    font-size: 22px;
+  }
+  @include respond-to(large) {
+    font-size: 24px;
+  }
+}
+
+h5 {
+  font-size: 20px;
+  letter-spacing: 0;
+}
+
+h6 {
+  font-size: 18px;
+  letter-spacing: 0;
+}
+
+hgroup {
+  @include clearfix;
+  margin-bottom: $spacing;
+
+  h1, h2, h3, h4, h5, h6 {
+    + h1, + h2, + h3, + h4, + h5, + h6 {
+      margin-bottom: -$spacing / 2;
+    }
+  }
+
+  :last-child { margin-bottom: 0; }
+}
+
+p {
+  margin: 0 auto $spacing;
+  font-size: $font-size;
+  font-weight: 300;
+  line-height: 1.875;
+}
+
+a {
+  color: inherit;
+}
+
+.text-small { font-size: $font-size * 0.75; }
+.text-large { font-size: $font-size * 1.125; }
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
diff --git a/src/styles/components/vectors/_logo-svef.scss b/src/styles/components/vectors/_logo-svef.scss
index ef275fd..f3ceedb 100644
--- a/src/styles/components/vectors/_logo-svef.scss
+++ b/src/styles/components/vectors/_logo-svef.scss
@@ -1,11 +1,7 @@
 
 .svg-logo-svef {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-
-  margin: auto;
-  width: 80%;
-  max-width: 800px;
+  width: 486px;
+  height: auto;
 
   .svef {
     fill: $color-orange;
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 719e522..6b23099 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,9 +1,11 @@
-@import "https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,300|Merriweather:400,700,300";
 
 @import "config";
 @import "utils/index";
 
+@import "components/footer/index";
+@import "components/header/index";
 @import "components/html/index";
+@import "components/loading/index";
 @import "components/main/index";
 @import "components/typography/index";
 @import "components/vectors/index";
diff --git a/src/styles/utils/_grid.scss b/src/styles/utils/_grid.scss
index 2a572b5..65278de 100644
--- a/src/styles/utils/_grid.scss
+++ b/src/styles/utils/_grid.scss
@@ -55,6 +55,8 @@ grid {
     padding-left: $grid-gutter/2;
     padding-right: $grid-gutter/2;
 
+    text-align: left;
+
     @each $i in $breakArray {
       @include respond-to(nth($i,1)) {
         @include grid-columns(nth($i,1));
diff --git a/src/styles/utils/_index.scss b/src/styles/utils/_index.scss
index 245396f..fd43908 100644
--- a/src/styles/utils/_index.scss
+++ b/src/styles/utils/_index.scss
@@ -1,4 +1,6 @@
 
+@import "normalize";
+
 @import "mixins/index";
 
 @import "grid";
diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss
new file mode 100644
index 0000000..aaa1712
--- /dev/null
+++ b/src/styles/utils/_normalize.scss
@@ -0,0 +1,579 @@
+/* ==========================================================================
+   Normalize.scss settings
+   ========================================================================== */
+/**
+ * Includes legacy browser support IE6/7
+ *
+ * Set to false if you want to drop support for IE6 and IE7
+ */
+
+$legacy_browser_support: false !default;
+
+/* Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *  user zoom.
+ * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *  `em` units.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  @if $legacy_browser_support {
+    *font-size: 100%; /* 3 */
+  }
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+  @if $legacy_browser_support {
+    *display: inline;
+    *zoom: 1;
+  }
+}
+
+/**
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a {
+  &:active, &:hover {
+    outline: 0;
+  };
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+@if $legacy_browser_support {
+  blockquote {
+    margin: 1em 40px;
+  }
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+@if $legacy_browser_support {
+  h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+  }
+
+  h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+  }
+
+  h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+  }
+
+  h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+  }
+
+  h6 {
+    font-size: 0.67em;
+    margin: 2.33em 0;
+  }
+}
+
+/**
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+@if $legacy_browser_support {
+
+  /**
+   * Addresses margins set differently in IE 6/7.
+   */
+
+  p,
+  pre {
+    *margin: 1em 0;
+  }
+
+  /*
+   * Addresses CSS quotes not supported in IE 6/7.
+   */
+
+  q {
+    *quotes: none;
+  }
+
+  /*
+   * Addresses `quotes` property not supported in Safari 4.
+   */
+
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+@if $legacy_browser_support {
+
+  /* ==========================================================================
+     Lists
+     ========================================================================== */
+
+  /*
+   * Addresses margins set differently in IE 6/7.
+   */
+
+  dl,
+  menu,
+  ol,
+  ul {
+    *margin: 1em 0;
+  }
+
+  dd {
+    *margin: 0 0 0 40px;
+  }
+
+  /*
+   * Addresses paddings set differently in IE 6/7.
+   */
+
+  menu,
+  ol,
+  ul {
+    *padding: 0 0 0 40px;
+  }
+
+  /*
+   * Corrects list images handled incorrectly in IE 7.
+   */
+
+  nav ul,
+  nav ol {
+    *list-style: none;
+    *list-style-image: none;
+  }
+
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * 1. Remove border when inside `a` element in IE 8/9/10.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+
+img {
+  border: 0;
+  @if $legacy_browser_support {
+    *-ms-interpolation-mode: bicubic; /* 2 */
+  }
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  @if $legacy_browser_support {
+    _font-family: 'courier new', monospace;
+  }
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *  Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ * 4. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+  @if $legacy_browser_support {
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+  }
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *  and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *  `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ *  Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+  @if $legacy_browser_support {
+    *overflow: visible;  /* 4 */
+  }
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ *  Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+  @if $legacy_browser_support {
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+  }
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *  (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 3. Corrects text not wrapping in Firefox 3.
+ * 4. Corrects alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+  @if $legacy_browser_support {
+    white-space: normal; /* 3 */
+    *margin-left: -7px; /* 4 */
+  }
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/src/styles/utils/mixins/_index.scss b/src/styles/utils/mixins/_index.scss
index cc57a29..1f92430 100644
--- a/src/styles/utils/mixins/_index.scss
+++ b/src/styles/utils/mixins/_index.scss
@@ -1,3 +1,4 @@
 
 @import "clearfix";
 @import "responsive";
+@import "typography";
diff --git a/src/styles/utils/mixins/_typography.scss b/src/styles/utils/mixins/_typography.scss
new file mode 100644
index 0000000..42d307d
--- /dev/null
+++ b/src/styles/utils/mixins/_typography.scss
@@ -0,0 +1,21 @@
+
+@mixin font-face( $family-name, $font-path, $font-weight:normal, $font-style:normal) {
+  @font-face {
+      font-family: $family-name;
+      src: url('#{$font-path}.eot');
+      src: url('#{$font-path}.eot?#iefix') format('embedded-opentype'),
+           url('#{$font-path}.woff') format('woff'),
+           url('#{$font-path}.ttf') format('truetype'),
+           url('#{$font-path}.svg##{$family-name}') format('svg');
+      font-weight: $font-weight;
+      font-style: $font-style;
+      text-rendering: optimizeLegibility;
+  }
+}
+
+@mixin text-overflow() {
+  // Requires inline-block or block for proper styling
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/templates/index.pug b/src/templates/index.pug
index 0a6f04e..74f99ad 100644
--- a/src/templates/index.pug
+++ b/src/templates/index.pug
@@ -1,4 +1,35 @@
 extends shared/_layout
 
-block main
-  include ../images/svef-logo.svg
+block content
+  grid
+    column.medium-8
+      p.text-large Samtök vefiðnaðarins eru grasrótarsamtök þeirra er starfa að vefmálum á Íslandi. Samtökin hafa það að markmiði að miðla þekkingu og efla fagleg vinnubrögð í greininni.
+
+      hr
+
+      h1 Heading 1
+      h2 Heading 2
+      h3 Heading 3
+      h4 Heading 4
+      h5 Heading 5
+      h6 Heading 6
+
+      p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur, justo et tempus pellentesque, sem tellus viverra arcu, ut feugiat arcu eros eget velit. Sed quis ipsum eu enim mattis mattis. Integer pretium tellus in iaculis efficitur. Fusce sit amet ante quis odio ornare viverra a ut ante. Etiam molestie accumsan bibendum. Sed efficitur pellentesque urna eu tristique. Cras ante sem, rhoncus eu lacinia a, hendrerit vitae tortor. Ut ut enim ut purus mollis faucibus in vitae nisl. Quisque tristique leo sit amet hendrerit ornare. Cras in rutrum nisi. Nullam sed lorem congue, vehicula turpis vitae, imperdiet elit. Vivamus nec sem vitae mauris consequat aliquam eu vel sapien. Aliquam in dignissim quam.
+
+      p Etiam non leo eget ex sagittis condimentum. Nam quam ex, dapibus tempus neque quis, aliquet rhoncus odio. Donec suscipit pretium mauris, sed porttitor purus vehicula ac. Proin non nisl suscipit ex finibus vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla aliquam nulla at ex sollicitudin sodales. Phasellus est nibh, pellentesque et congue at, faucibus sit amet sapien.
+
+      p Mauris rhoncus eleifend arcu vel venenatis. Praesent malesuada ipsum non nulla volutpat, vitae pretium felis sodales. Suspendisse fringilla eros non tempor sollicitudin. Sed lobortis nibh et orci eleifend, ut convallis felis posuere. Fusce tempus urna magna, sed molestie ligula fringilla non. Cras congue ornare felis, non fringilla magna vulputate non. Nulla elementum, nibh id venenatis fermentum, orci purus sagittis sem, sodales efficitur ipsum nibh nec nibh.
+
+      p Nullam viverra quam commodo augue viverra, volutpat viverra lectus interdum. Donec mollis sapien ac neque iaculis sagittis. Suspendisse varius, felis vel faucibus bibendum, velit sapien imperdiet risus, id tincidunt ipsum ipsum sit amet urna. Morbi venenatis est mauris, at ullamcorper lacus volutpat et. Phasellus orci libero, ornare non felis sed, posuere ullamcorper odio. Pellentesque quam augue, consequat vitae egestas at, fermentum in nisl. Nulla et libero lobortis, convallis tortor id, porttitor nulla. Vestibulum non mi sit amet est rhoncus pretium quis ornare nibh. Suspendisse dignissim ex sit amet rutrum aliquam. Cras posuere facilisis eros, sit amet scelerisque quam ullamcorper sed. Aliquam imperdiet, est at aliquam vulputate, elit est pulvinar lorem, ut consequat libero magna non neque. Vivamus non blandit dui.
+
+      p Sed eu commodo mauris. Etiam ac neque blandit, mollis elit quis, hendrerit ligula. Donec nisi est, tristique et malesuada et, consequat dapibus nunc. Sed varius iaculis metus, vitae auctor tortor maximus eget. Phasellus sed lobortis tortor. Nunc viverra neque et iaculis dictum. Donec nec risus vitae tortor auctor aliquet. Ut ac lorem sed arcu ullamcorper eleifend.
+
+      p Nullam pharetra ac nisl in eleifend. Suspendisse ex nulla, ultrices non luctus non, porta vel ipsum. Quisque maximus sodales velit sit amet pulvinar. Nullam imperdiet nunc vitae laoreet rutrum. Suspendisse non blandit erat. Donec elementum sagittis egestas. Sed vestibulum mauris neque, id lobortis lectus imperdiet ullamcorper.
+
+      p Duis commodo nunc sapien. Vestibulum ipsum arcu, pretium non vehicula sit amet, ornare ultricies enim. Sed non lectus elementum, fringilla nisi at, aliquam massa. Vestibulum viverra, purus ac imperdiet dictum, dui sem tincidunt dui, sit amet scelerisque sapien diam suscipit nunc. In malesuada vitae nisi facilisis ultricies. Nam non augue pellentesque, porttitor massa at, feugiat ligula. Curabitur suscipit felis lacus, eget facilisis enim laoreet sed. Fusce sagittis nisl ut interdum fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed posuere lacus id purus sollicitudin porta. Proin non arcu pellentesque, luctus orci eget, accumsan risus. Cras volutpat arcu neque, id interdum augue fermentum a. Sed consequat nec lacus id consectetur. Quisque vel nisl in metus aliquam mollis nec at lacus.
+
+      p Pellentesque vel sapien sed sem condimentum finibus. Mauris convallis diam et orci suscipit volutpat. Quisque semper neque ligula, eget lacinia dolor eleifend ac. Nulla dapibus euismod massa sit amet ullamcorper. Nam sed ante id elit finibus finibus sit amet vitae sapien. Cras euismod lectus sapien, sed faucibus tortor mattis lacinia. Suspendisse a lobortis odio, at volutpat tellus. Nullam pharetra arcu vitae ipsum interdum dictum. Sed blandit rhoncus purus id eleifend. Ut vitae semper lectus. Quisque eu pharetra augue. Vivamus mollis luctus ex id scelerisque. Proin et eros vel elit porttitor vulputate. Vestibulum pretium tincidunt dolor, sit amet rutrum tortor.
+
+      p Duis gravida quis nisi vitae scelerisque. Praesent nec ex id tellus auctor mattis. Nam vel consequat diam, sit amet dictum metus. Aliquam a quam quis tellus facilisis tempor quis at nisi. Sed gravida eget tortor ac pellentesque. Nunc blandit sed sem sit amet suscipit. Proin faucibus mattis magna at viverra. Nam fermentum lorem ipsum, nec fringilla velit venenatis ac. Suspendisse arcu odio, varius nec eros nec, consectetur pretium nibh. Fusce mauris dui, congue a facilisis in, dictum vel erat. Sed ut ante tortor. Aliquam rhoncus ligula sit amet nulla lacinia elementum. Vestibulum consequat interdum nulla sit amet tempor.
+
+      p Ut nec eros interdum, ultrices sapien vel, porttitor lorem. Vivamus molestie augue ut quam dapibus efficitur. Integer purus orci, pulvinar sed lacus eget, lobortis tristique est. Integer at dignissim odio. Aliquam mollis risus nec felis rutrum, vel sollicitudin urna molestie. Curabitur cursus rhoncus arcu nec maximus. Sed nec condimentum ligula. Sed vel fringilla nisi. Mauris odio risus, mattis sed sodales et, vehicula vitae mauris. Quisque quis feugiat erat, vel aliquam nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum aliquam tellus, ut tristique odio rhoncus eu.
diff --git a/src/templates/shared/_footer.pug b/src/templates/shared/_footer.pug
index e69de29..b64f97e 100644
--- a/src/templates/shared/_footer.pug
+++ b/src/templates/shared/_footer.pug
@@ -0,0 +1,2 @@
+footer
+  include ../../images/svef-logo.svg
diff --git a/src/templates/shared/_head.pug b/src/templates/shared/_head.pug
index 41cfd14..54fa345 100644
--- a/src/templates/shared/_head.pug
+++ b/src/templates/shared/_head.pug
@@ -3,12 +3,12 @@
 
 head
   meta(charset='utf-8')
-  meta(name='viewport', content='width=device-width, initial-scale=1')
+  meta(name='viewport', content='width=768px, initial-scale=1')
 
   title=title
 
   meta(name="description" content=description)
-  meta(name="theme-color" content="#404040")
+  meta(name="theme-color" content="#4A4A4A")
 
   //- link(rel='icon' type='image/png' href='/favicon.png')
   link(rel='stylesheet' href='/styles/styles.css')
diff --git a/src/templates/shared/_header.pug b/src/templates/shared/_header.pug
new file mode 100644
index 0000000..c543c29
--- /dev/null
+++ b/src/templates/shared/_header.pug
@@ -0,0 +1,2 @@
+header
+  include _nav
diff --git a/src/templates/shared/_layout.pug b/src/templates/shared/_layout.pug
index 4c8aaaf..b2f5dca 100644
--- a/src/templates/shared/_layout.pug
+++ b/src/templates/shared/_layout.pug
@@ -1,13 +1,17 @@
 doctype html
 
-html
+html.loading
   include _head
 
   body
-    block nav
+    loading
+      include ../../images/svef-logo.svg
 
     main
-      block main
+      block header
+        include _header
+
+      block content
 
     block footer
       include _footer
diff --git a/src/templates/shared/_nav.pug b/src/templates/shared/_nav.pug
new file mode 100644
index 0000000..cd12f3d
--- /dev/null
+++ b/src/templates/shared/_nav.pug
@@ -0,0 +1,4 @@
+nav
+  a(href='/#register') Skráning
+  a(href='/#events') Viðburðir
+  a(href='/#about') Um samtökin