- new design

- with normalize.css and skeleton.css
2019-09-11 18:47:13 +02:00 · 2019-09-11 18:47:13 +02:00 · 720aa57810
commit 720aa57810
parent 084a1a2b8c
49 changed files with 2567 additions and 357 deletions
--- a/Repository.code-workspace
+++ b/Repository.code-workspace
@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"phpfmt.php_bin": "\"C:\\ProgramData\\scoop\\apps\\php-nts\\current\\php.exe\"",
+		"phpfmt.psr2": true
+	}
+}
--- a/app/Console/Commands/SolrIndexBuilder.php
+++ b/app/Console/Commands/SolrIndexBuilder.php
@ -4,8 +4,6 @@ namespace App\Console\Commands;

 use Illuminate\Console\Command;
 use App\Models\Dataset;
-// use Illuminate\Support\Facades\Log;
-// use App\Library\Search\SolariumAdapter;

 class SolrIndexBuilder extends Command
 {
--- a/database/migrations/2019_08_28_083531_create_projects_table.php
+++ b/database/migrations/2019_08_28_083531_create_projects_table.php
@ -15,7 +15,7 @@ class CreateProjectsTable extends Migration
    {
        Schema::create('projects', function (Blueprint $table) {
            $table->increments('id');
-            $table->string('label', 20);
+            $table->string('label', 50);
            $table->string('name', 255);
            $table->string('description', 255)->nullable();
            $table->timestamps();
--- a/database/migrations/2019_09_02_105025_create_document_references_table.php
+++ b/database/migrations/2019_09_02_105025_create_document_references_table.php
@ -30,6 +30,7 @@ class CreateDocumentReferencesTable extends Migration
                ["IsCitedBy", "Cites", "IsSupplementTo", "IsSupplementedBy", "IsContinuedBy", "Continues", "HasMetadata", "IsMetadataFor","IsNewVersionOf", "IsPreviousVersionOf", "IsPartOf", "HasPart", "IsReferencedBy", "References", "IsDocumentedBy", "Documents", "IsCompiledBy", "Compiles", "IsVariantFormOf", "IsOriginalFormOf", "IsIdenticalTo", "IsReviewedBy", "Reviews", "IsDerivedFrom", "IsSourceOf"]
            );
            $table->string('value', 255);
+            $table->string('label', 50);
            $table->timestamps();
        });
    }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,32 +8,34 @@
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
-    "axios": "^0.18.1",
-    "bootstrap-sass": "^3.4.0",
-    "cross-env": "^5.1",
+    "axios": "^0.19.0",
+    "bootstrap-sass": "^3.4.1",
+    "cross-env": "^5.2.1",
    "jquery": "^3.4.1",
-    "laravel-mix": "^4.1.2",
+    "laravel-mix": "^4.1.4",
    "leaflet": "^1.5.1",
    "leaflet-draw": "^1.0.4",
    "lodash": "^4.17.15",
    "node-sass": "^4.12.0",
    "npm-font-open-sans": "^1.1.0",
    "purecss-sass": "^1.0.1",
-    "resolve-url-loader": "^2.3.2",
-    "sass-loader": "^7.3.1",
+    "resolve-url-loader": "^3.1.0",
+    "sass": "^1.15.2",
+    "sass-loader": "^7.1.0",
    "vee-validate": "^2.2.15",
-    "vue": "^2.5.21",
+    "vue": "^2.6.10",
    "vue-events": "^3.1.0",
-    "vue-template-compiler": "^2.5.21",
-    "vue-toast-notification": "0.0.2",
+    "vue-template-compiler": "^2.6.10",
+    "vue-toast-notification": "0.0.3",
    "vuedraggable": "^2.23.0",
    "vuejs-datetimepicker": "^1.1.12",
    "vuetable-2": "^1.7.5"
  },
  "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^12.3.0",
-    "@fortawesome/fontawesome-free": "^5.9.0",
+    "@ckeditor/ckeditor5-build-classic": "^12.4.0",
+    "@fortawesome/fontawesome-free": "^5.10.2",
    "datatables.net": "^1.10.19",
-    "datatables.net-buttons": "^1.5.4"
+    "datatables.net-buttons": "^1.5.6",
+    "single-page-nav": "^1.0.0"
  }
 }
--- a/public/backend/ckeditor.js
+++ b/public/backend/ckeditor.js
--- a/public/backend/publish/approveDataset.js
+++ b/public/backend/publish/approveDataset.js
--- a/public/backend/publish/datasetPublish.js
+++ b/public/backend/publish/datasetPublish.js
--- a/public/backend/publish/releaseDataset.js
+++ b/public/backend/publish/releaseDataset.js
--- a/public/css/app1.css
+++ b/public/css/app1.css
--- a/public/css/font-awesome.css
+++ b/public/css/font-awesome.css
--- a/public/css/normalize.css
+++ b/public/css/normalize.css
@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * 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,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent 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-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a: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;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * 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;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * 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.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, 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.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 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.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * 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;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 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.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 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;
+}
--- a/public/css/skeleton.css
+++ b/public/css/skeleton.css
@ -0,0 +1,418 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
--- a/public/css/style.css
+++ b/public/css/style.css
@ -0,0 +1,740 @@
+/* Fonts */
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
+
+/* SlimJoe */
+
+textarea {
+  min-height: 200px;
+  resize: none;
+}
+
+/* Personal Flavour */
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
+}
+
+/* Typography */
+body {
+  font-size: 16px;
+  letter-spacing: .05em;
+  color: #222222;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+}
+h1, h3{
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+h4 {
+  font-size: 22px;
+}
+h3 {
+  font-size: 26px;
+}
+a {
+  color: #3273dc;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+/* Custom ultilities */
+  /* Centered */
+  .centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    -o-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+  }
+  .vertical-centered {
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    transform: translateY(-50%);
+    width: 100%;
+
+  }
+  /* Separator */
+
+  .separator {
+    position: relative;
+    margin-bottom: 1.7em;
+    padding-bottom: 1.7em;
+    text-align: center;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: inherit;
+  }
+  .separator:before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    width: 86px;
+    height: 2px;
+    background-color: #222;
+
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+  .separator.orange:before {
+    background-color: #d87843;
+  }
+
+
+/* Button inverted */
+.button.inverted {
+  font-size: inherit;
+  padding: 25px 70px;
+  color: white;
+  height: auto;
+  border: 3px solid white;
+  text-transform: none;
+  font-size: 26px;
+  font-family: "ambleregular";
+}
+.button.inverted:hover {
+  background: white;
+  color: #222;
+}
+.button.circle {
+  padding: 0;
+  width: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  border-radius: 50%;
+  text-align: center;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+/* =Section general styling
+-------- */
+section {
+  text-align: center;
+  padding: 80px 0;
+}
+
+/*
+
+  Section with featured background image. Every section which will have this
+  class will get the effect with a background cover.
+
+*/
+.help:before {
+  background: url("../images/help_bg_image.jpg");
+}
+.creativity:before {
+  background: url("../images/creativity_bg_image.jpg");
+  background-position: 50% 0;
+}
+.quote:before {
+  background: url("../images/quote_bg_image.jpg");
+}
+.video-iframe{
+  position: absolute;
+  left: 0; top: 0; bottom: 0; right: 0;
+  height: 100%;
+  width: 100%;
+  display: none;
+}
+.video:before {
+  background: url("../images/video_bg_image.jpg");
+}
+
+.featured-bg-image {
+  position: relative;
+  /* background-color: #222222; */
+  background-color: gray;
+  color: white;
+  min-height: 500px;
+}
+.featured-bg-image:before {
+  content: '';
+  position: absolute;
+  top: 0; right: 0; left: 0; bottom: 0;
+  background-size: cover;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  opacity: .35;
+}
+
+.footer {
+  /* background-color: #222222; */
+  background-color: #2D3138;
+  font-size: 0.8em;
+  color: rgb(255, 255, 255);
+  color: rgba(255, 255, 255, 0.7);
+  padding-top: 5em;
+  padding-bottom: 3em;
+  text-align:left;
+}
+.footer a {
+    color: #ffffff;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.footer a:hover {
+    /*color: #cccccc;*/
+    color: #4698D5;
+}
+
+.footer ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.footer li {
+    line-height: 1.6em;
+}
+
+.footer h3 {
+    color: #ffffff;
+}
+
+.footer p {
+    padding-right: 1em;
+}
+
+.footer hr {
+    margin-top: 5em;
+    margin-bottom: 3em;
+    background-color: #ccc;
+    border: none;
+    height: 1px;
+}
+
+
+
+
+/* =Navigation
+-------- */
+.header {
+  background-color: #fff;
+  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
+  position: fixed;
+  width: 100%;
+  z-index: 3;
+  border-bottom: 1px solid #dcdcdc;
+}
+.header .menu {
+  clear: both;
+  max-height: 0;
+  transition: max-height .2s ease-out;
+}
+.header .menu-icon {
+  color: white;
+  font-size: 30px;
+  line-height: 1em;
+
+  position: absolute;
+  left: 100%;
+  padding: 20px;
+
+  -webkit-transition: all .15s ease-in-out;
+  -moz-transition: all .15s ease-in-out;
+  -ms-transition: all .15s ease-in-out;
+  -o-transition: all .15s ease-in-out;
+  transition: all .15s ease-in-out;
+  user-select: none;
+}
+
+.header .menu-icon.active {
+  background-color: rgba(0,0,0, .3);
+}
+.header .menu-icon:hover {
+  color: #222;
+  background-color: transparent;
+}
+
+.navigation.active {
+  -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  -ms-transform: translateX(0);
+  -o-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.navigation {
+  position: fixed;
+ 
+  top: 0; left: 0; bottom: none;
+ 
+  z-index: 3;
+  width: 100%;
+ 
+  -webkit-transform: translateX(-100%);
+  -moz-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  -o-transform: translateX(-100%);
+  transform: translateX(-100%);
+
+  -webkit-transition: all .5s ease-in-out;
+  -moz-transition: all .5s ease-in-out;
+  -ms-transition: all .5s ease-in-out;
+  -o-transition: all .5s ease-in-out;
+  transition: all .5s ease-in-out;
+  background-color: #fff;
+  border-bottom: 1px solid #dcdcdc;
+}
+
+.navigation ul {
+  list-style: none;
+  /* position: absolute;
+  top: 0;
+  left: 0; 
+  right: 0; */
+  margin: 0;
+  background-color: #fff;
+}
+.header ul li {
+  display: block;
+  float: left;
+  text-align: center;
+  margin: 0; 
+}
+.navigation ul li a {
+  display: inline-block;
+	padding: 14px 16px;
+  height: 100%;  
+  text-transform: uppercase;
+  color: #757575;
+	font-size: 1.7rem;
+	text-decoration: none;	
+	transition: 0.2s;
+}
+
+.navigation ul li a.current,
+.navigation ul li a:hover {
+  background-color: #eee; 
+	color: #757575;
+}
+
+/* Float right the list item that should be right aligned */
+.navigation ul li.right { float: right; }
+
+/* =Hero
+-------- */
+.hero {
+  padding: 0;
+  min-height: 500px;
+  text-align: center;
+  position: relative;
+  /* background-color: #d56d4d;  */
+  background-color: #3abac4; /* layer fill content */
+  color: white;
+}
+.hero-image {
+  background: url("../images/csm_kabel.png") no-repeat;
+  background-size: cover;
+  background-position: 50% 50%;
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  opacity: .9;
+}
+.hero-image:after {
+  content: '';
+  opacity: .77; 
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); 
+  background-image: -moz-linear-gradient(right, #A8EB12 0%, #3abac4 100%); 
+  background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); 
+  background-image: -webkit-linear-gradient(right, #A8EB12 0%, #3abac4 100%); 
+  background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%);
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+}
+.hero h2 {
+  font-size: 24px;
+}
+
+.hero p {
+  padding: 0 15%;
+}
+.hero .separator:before {
+  background-color: white;
+}
+
+/*Contact*/
+.contact-us {
+  background-color: #f2f2f2;
+  text-align: left;
+}
+.contact-us-details {
+  padding: 70px;
+}
+.contact-us-details h5 {
+  font-size: 2rem;
+}
+.contact-us-details .social-links a {
+  color: #222;
+  display: block;
+}
+
+.contact-us-details .social-links li {
+  list-style: none;
+  float: left;
+  font-size: 24px;
+  margin-right: 10px;
+}
+.contact-us-details .social-links li:last-child {
+  margin-right: 0;
+}
+.contact-us-form {
+  padding: 70px;
+  background-color: #e4e4e4;
+}
+.contact-us .row {
+  margin: 0;
+}
+
+/* Work */
+.work {
+	background-color: #F5F5F5;
+}
+
+/* Work Filters */
+
+.work-filters {
+  list-style: none;
+}
+.work-filters li {
+  display: inline-block;
+  margin: 0 .5em;
+  font-size: 18px;
+  text-transform: uppercase;
+  font-family: "slim_joeregular";
+}
+.work-filters li a {
+  color: inherit;
+  text-decoration: none;
+}
+.work-filters li.active {
+  font-family: "big_johnregular"
+}
+
+/* Work items */
+
+.work-items {
+  list-style: none;
+  width: 100%;
+  display: inline-block;
+}
+.work-items li {
+  position: relative;
+  overflow: hidden;
+  height: 360px;
+
+  /* important because we need to overwrite the default skeleton */
+  margin: 0!important;
+  width: 33%;
+  border: 10px solid white;
+
+  position: relative;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.work-items li:nth-child(4n) {
+  margin-left: 0;
+}
+.work-items li img{
+  width: auto;
+  height: 100%;
+  display: block;
+ 
+}
+
+/* Work detail */
+.work-detail {
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+
+  opacity: 0;
+  background: rgba(0,0,0,.75);
+  color: white;
+
+  -webkit-transition: all .3s ease-in-out;
+  -moz-transition: all .3s ease-in-out;
+  -ms-transition: all .3s ease-in-out;
+  -o-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+.work-detail h3 {
+  font-size: 16px;
+  letter-spacing: .05em;
+}
+.work-detail p {
+  font-size: 15px;
+  /* text-transform: capitalize; */
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.work-front {
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+
+  /* opacity: 0; */
+  background: #F5F5F5;
+  color: black;
+  box-shadow: inset 0 0 0 10px grey;
+}
+.work-front p {  font-size: 15px;
+  color: black;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.work-items li:hover .work-detail{
+  opacity: 1;
+  box-shadow: inset 0 0 0 10px #222;
+}
+.work-items li:hover .work-front{
+  opacity: 0;
+  
+}
+
+/* Clients */
+.clients {
+  background-color: #F5F5F5;
+  list-style: none;
+}
+.clients li {
+  display: inline-block;
+  width: 18%;
+  margin-right: 2%;
+}
+.clients li:last-child {
+  margin-right: 0;
+}
+.clients li img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  -webkit-filter: greyscale(100%);
+  -moz-filter: greyscale(100%);
+  filter: greyscale(100%);
+}
+
+/* About */
+.people-list {
+  list-style: none;
+  margin: 70px 0;
+  width: 100%;
+}
+.people-list li {
+  position: relative;
+  height: 300px;
+  overflow: hidden;
+}
+.people-list li img {
+  width: auto;
+  height: 100%;
+  display: block;
+}
+.people-list .people-hover {
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+  background: rgba(0,0,0,.45);
+
+  opacity: 0;
+
+  -webkit-transition: all .3s ease-in-out;
+  -moz-transition: all .3s ease-in-out;
+  -ms-transition: all .3s ease-in-out;
+  -o-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+.people-list .people-hover a {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: white;
+}
+
+/* About people details */
+
+.people-list .people-detail {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding: 0 20px;
+  z-index: 1;
+  color: white;
+}
+.people-list .people-detail h3 {
+  font-size: 22px;
+  margin-bottom: 0;
+}
+.people-list .people-detail p {
+  font-size: 16px;
+}
+
+/* Feature people hiring */
+
+.people-list li.blank-feature{
+  box-shadow: inset 0 0 0 3px #222;
+}
+.people-list li.blank-feature img {
+  visibility: hidden;
+}
+.people-list li.blank-feature h3 {
+  font-size: 26px;
+}
+.people-list li:hover .people-hover{
+  opacity: 1;
+  box-shadow: inset 0 0 0 5px #222;
+}
+.why {
+	background-color: #F5F5F5; 
+}
+
+
+/* Services */
+.services {
+  list-style: none;
+  margin: 70px 0;
+}
+.services .service-image {
+  height: 150px;
+  margin-bottom: 20px;
+}
+.services .service-image img{
+  display: table-cell;
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+
+}
+/* .services h5 {
+
+} */
+.services p {
+  font-size: 16px;
+  letter-spacing: 0;
+}
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons secion and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (max-width: 400px) {
+  .button.inverted {
+    padding: 15px;
+  }
+  .work-items li.isotope-item.columns {
+    width: 100%;
+  }
+  .contact-us-form {
+    padding: 5px;
+    background-color: #e4e4e4;
+}
+}
+@media (min-width: 400px)  and (max-width: 750px) {
+  .work-items li.isotope-item.columns {
+    width: 100%;
+  }
+  .people-list li.people-list-item.columns {
+    width: 46%;
+    margin: 2%;
+    box-sizing: content-box;
+  }
+  .contact-us-details {
+    padding: 70px 25px;
+    text-align: center;
+  }
+  .contact-us-details .social-links li {
+    text-align: center;
+    width: 33%;
+    margin: 0;
+  }
+  .contact-us-details h5 {
+    font-size: 1.7rem;
+  }
+
+}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) and (max-width: 750px) {
+
+  .work-items li.isotope-item.columns {
+    width: 50%;
+  }
+}
+
+/* larger than tablet */
+@media (min-width: 750px) {
+  .header .navigation {
+    /* clear: none;
+    float: right;
+    max-height: none; */
+      /* always visible */
+    -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  -ms-transform: translateX(0);
+  -o-transform: translateX(0);
+  transform: translateX(0);
+  }
+ 
+
+
+}
+
+/* smaller than tablet */
+@media (max-width: 750px) {
+  .header ul li {
+    display: list-item;
+    float: none;
+    text-align: left;
+	
+  }
+  .header li a {
+    /* padding: 20px 30px; */
+    display: block;
+		text-align: left;
+  }
+ 
+  .navigation a.menu-icon {
+    display: inline;
+  }
+  .header .navigation {
+    width: 320px;
+    height: 100%;
+   
+ 
+  }
+  .navigation ul li:hover ul {
+		border: none;
+	}
+	.navigation ul li.right {
+		float: none;
+	}
+}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {
+}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg
@ -1,12 +1,12 @@
 <?xml version="1.0" standalone="no"?>
 <!--
-Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
+Font Awesome Free 5.10.2 by @fontawesome - https://fontawesome.com
 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20190112 at Tue Jun  4 15:16:44 2019
+Created by FontForge 20190801 at Thu Aug 22 14:41:09 2019
 By Robert Madole
 Copyright (c) Font Awesome
 </metadata>
@ -22,8 +22,8 @@ Copyright (c) Font Awesome
    descent="-64"
    bbox="-0.200195 -66.9505 641.5 448.3"
    underline-thickness="25"
-    underline-position="-51"
-    unicode-range="U+0020-F842"
+    underline-position="-50"
+    unicode-range="U+0020-F89E"
  />
    <missing-glyph />
    <glyph glyph-name="twitter-square" unicode="&#xf081;" 
@ -2462,22 +2462,20 @@ l-10.9004 20.5996h37.5l54.9004 -109.9zM243.7 134.2c29.7998 0 50.2002 21.5 50.200
 c-11.7998 0 -26.2998 -0.0996094 -39.3994 -0.599609c-29.1006 -0.900391 -47.2002 -6.2002 -47.2002 -25.2998c0 -12.4004 9.90039 -25.8008 35 -25.8008c33.7002 0 51.5996 18.4004 51.5996 48.4004zM32.7002 179.9c3.5 -58.3008 79.2002 -57.4004 91.2002 -21.6006
 h33.0996c-6.40039 -34.3994 -43 -46.0996 -74.4004 -46.0996c-57.1992 0 -82.5 31.5 -82.5 74c0 46.7998 26.2002 77.5996 83 77.5996c45.3008 0 78.4004 -23.7002 78.4004 -75.3994v-8.5h-128.8zM127.7 201.3c-2.2998 54.7002 -87.5 56.6006 -94.4004 0h94.4004z" />
    <glyph glyph-name="keybase" unicode="&#xf4f5;" 
-d="M195.21 17.2998c0 -9.8252 -7.97461 -17.7998 -17.7998 -17.7998c-9.82617 0 -17.7998 7.97461 -17.7998 17.7998c0 9.82617 7.97363 17.7998 17.7998 17.7998c9.80371 -0.0214844 17.7783 -7.99609 17.7998 -17.7998zM288 35.2002
-c9.80371 -0.0224609 17.7783 -7.99609 17.7998 -17.7998c0 -9.82617 -7.97461 -17.8008 -17.7998 -17.8008s-17.7998 7.97461 -17.7998 17.8008c0 9.8252 7.97461 17.7998 17.7998 17.7998zM430.3 71.2002c0 -38.9004 -7.59961 -73.9004 -22.2002 -103h-27.2998
-c23.5 38.7002 30.5 94.7998 22.4004 134.3c-16.1006 -29.5 -52.1006 -38.5996 -85.9004 -28.7998c-127.8 37.5 -192.5 -19.7002 -234.6 -50.2998l18.8994 59.2998l-39.8994 -42.2998c3.95605 -21.9639 17.9336 -54.3545 31.2002 -72.3008h-28.79
-c-8.1543 13.2822 -18.0996 36.2646 -22.2002 51.3008l-23.7998 -25.2002c0 74.8994 -5.5 147.6 61.5 215.2c16.4688 16.7402 47.4248 37.6621 69.0996 46.6992c-6.7998 13.5 -9.5 29.2002 -7.7998 46l-19.9102 1.2002c-16.918 1.05371 -30.6484 15.666 -30.6484 32.6172
-c0 0.492188 0.0214844 1.29102 0.0488281 1.7832v0.0996094l1.59961 26.2002c1.10449 16.7988 15.665 30.5078 32.5 30.5996c1.2998 0 -0.299805 0.100586 28.2002 -1.69922c7.65918 -0.414062 17.873 -5.52148 22.7998 -11.4004c7.11035 10.4004 14.5 20.5 24.6104 34.5
-l20.5996 -12.0996c-13.5996 -29 -9.09961 -36.2002 -9 -36.3008c3.90039 0 13.9004 0.5 32.4004 -5.69922c28.8379 -9.54883 52.2422 -41.9512 52.2422 -72.3291c0 -8.61914 -2.75195 -22.0469 -6.14258 -29.9717c19 -6.09961 51.2998 -19.8994 82.4004 -51.7998
-c36.5996 -37.5996 57.6992 -87.3994 57.6992 -136.6h-0.00976562zM146 325.9c2.80762 8.47461 8.67578 21.6455 13.0996 29.3994c0.100586 2 2.2002 13.1006 -7.7998 13.7998c-28.5 1.80078 -26.2998 1.60059 -26.7002 1.60059h-0.0429688
-c-4.47754 0 -8.31152 -3.62891 -8.55664 -8.10059l-1.59961 -26.1992c-0.00683594 -0.121094 -0.0117188 -0.318359 -0.0117188 -0.439453c0 -4.48633 3.63379 -8.36719 8.11133 -8.66113zM171.8 264.1c4.50488 -7.35938 14.4951 -16.3193 22.2998 -20
-c0 21.2002 28.5 41.9004 52.8008 17.5l8.39941 -10.2998c20.7998 18.7998 19.4004 45.2998 12.1006 60.9004c-13.8008 29.0996 -46.9004 32 -54.3008 31.7002c-0.319336 -0.015625 -0.837891 -0.0283203 -1.15723 -0.0283203c-9.09863 0 -19.1973 6.86719 -22.542 15.3281
-c-13.6904 -21.2002 -37.1904 -62.5 -17.5908 -95.1006h-0.00976562zM254.7 195.7l-19.7002 -16.1006c-0.900391 -0.738281 -1.63086 -2.2832 -1.63086 -3.44727c0 -0.890625 0.461914 -2.16797 1.03125 -2.85254l8.89941 -10.8994
-c0.742188 -0.896484 2.28809 -1.62305 3.45117 -1.62305c0.887695 0 2.16406 0.458008 2.84863 1.02246l19.6006 16l5.5 -6.7998c4.89941 -6 13.7998 1.40039 9 7.2998c-63.6006 78.2998 -41.5 51.1006 -55.2998 68.1006c-4.7002 6 -13.9004 -1.40039 -9 -7.30078
-c1.89941 -2.2998 18.3994 -22.5996 19.7998 -24.2998l-9.60059 -7.89941c-4.59961 -3.80078 2.60059 -13.3008 7.40039 -9.40039l9.7002 8zM373.11 170c-16.9004 23.7002 -42.6006 46.7002 -73.4004 60.4004c-6.18359 2.73633 -16.4434 6.58887 -22.9004 8.59961
-c-1.64355 -1.83789 -4.51074 -4.61523 -6.39941 -6.2002l31.8994 -39.2002c3.70605 -4.54102 6.71289 -12.9834 6.71289 -18.8447c0 -7.78906 -4.88867 -18.1172 -10.9121 -23.0547c-1.30078 -1.10059 -13.1006 -10.7002 -29 -4.90039
-c-2.90039 -2.2998 -10.1006 -9.89941 -22.2002 -9.89941h-0.0419922c-7.46777 0 -17.3496 4.70312 -22.0586 10.5l-8.89941 10.8994c-3.5293 4.33984 -6.39355 12.4014 -6.39355 17.9951c0 2.49121 0.624023 6.43555 1.39355 8.80469
-c-3.83398 4.43945 -6.94531 12.8018 -6.94531 18.667c0 3.26172 1.05078 8.33984 2.34473 11.333c-7.19922 1.30078 -26.6992 6.2002 -42.6992 21.4004c-55.8008 -20.7002 -88 -64.4004 -101.301 -91.2002c-14.8994 -30.2002 -18.7998 -60.8994 -19.8994 -90.2002
-c8.2002 8.7002 -3.90039 -4.09961 114 120.9l-29.9004 -93.5996c57.7998 31.0996 124 36 197.4 14.3994c23.5996 -6.89941 45.0996 -1.59961 56 13.9004c11.0996 15.5996 8.5 37.7002 -6.7998 59.2998zM128.61 340.9l1 15.5996l15.5996 -1l-1 -15.5996z" />
+d="M286.17 29c9.93652 0 18 -8.06445 18 -18s-8.06348 -18 -18 -18c-9.93555 0 -18 8.06445 -18 18s8.06445 18 18 18zM398.09 176.6c22.9102 -33.46 35.9102 -72.3398 35.9102 -110.92c0 -31.6797 -5 -60.6797 -14.5996 -86.2295
+c-3.04004 -8.0498 -10.9502 -12.7197 -18.3701 -11.1504c-6.83984 1.24023 -11.1201 9.28027 -8.60059 15.7402c11.1904 28.71 14.8799 58.3398 14.8799 81.6396c-0.0517578 7.91797 -1.30566 20.6543 -2.7998 28.4307
+c-0.649414 -1.06055 -1.12988 -2.2207 -1.84961 -3.2207c-17.29 -24.5293 -50.54 -33.8896 -84.7402 -23.8398c-78.8701 23.1699 -178.02 3.81055 -236.25 -38.5898l24.6602 74.1104l-46.8203 -59.8301c2.04297 -15.3486 9.10352 -39.1504 15.7598 -53.1299
+c6.25 -13.1904 0.460938 -18.2402 -3.75 -20.1104c-4.76953 -2.12012 -13.8594 -2.7998 -19.6396 7.33008c-5.43652 9.81641 -11.96 26.6436 -14.5596 37.5596l-23.3203 -29.7998v33.6406c0 55.7695 0 125.109 62.6504 188.409c11.4258 11.5684 32.1631 27.4902 46.29 35.54
+l-8.93066 0.540039c-27.8799 1.64062 -49.2402 24.8506 -47.6299 51.8506l2.36035 36.6797c0 -6.24023 0.139648 45.8799 50.75 45.8799c2.05957 0 -0.470703 0.120117 41.0596 -2.33008c2.31641 -0.15625 6.03027 -0.71582 8.29004 -1.25
+c7.41992 11.3398 15.6504 22.8301 24.3398 34.8906l5.48047 7.55957l22.8994 -13.5195c-11.29 -24 -10 -33 -9.39941 -35c9.08008 0.229492 20 -1.6709 32.4102 -5.77051c29.6523 -9.84375 53.7188 -43.1914 53.7188 -74.4355
+c0 -8.5127 -2.61621 -21.8154 -5.83887 -29.6943c6.18652 -2.13965 12.3135 -4.56348 18.3799 -7.27051c47.8896 -21.2598 77.7598 -59.0898 87.2598 -73.71zM142.37 319.42c1.55664 5.42773 4.69336 14.0156 7 19.1699l-29.1104 1.73047
+c0.610352 -0.0507812 -12.2598 0.849609 -13.2598 -11.3203l-2.41016 -36.6602c-0.00585938 -0.143555 -0.0107422 -0.376953 -0.0107422 -0.520508c0 -6.50293 5.27344 -12 11.7705 -12.2695l22.3809 -1.33984c-0.380859 3.10645 -0.689453 8.16797 -0.689453 11.2969
+c0 2.28809 0.165039 5.99414 0.369141 8.27344l-13.1299 0.779297l1.38965 21.79zM290.79 147.24c2.06152 1.58789 3.73438 4.9873 3.73438 7.58887c0 1.80273 -0.893555 4.42383 -1.99414 5.85059l-81.0898 96.3203c-1.71484 1.99023 -5.23828 3.60547 -7.86523 3.60547
+c-1.99023 0 -4.87305 -1.00098 -6.43555 -2.23535c-2.05957 -1.58398 -3.73242 -4.97949 -3.73242 -7.57812c0 -1.7998 0.892578 -4.41699 1.99316 -5.8418c0.0898438 -0.140625 18.5996 -22.1406 18.5996 -22.1406l-16.9102 -13.29
+c-1.59473 -1.22266 -2.88867 -3.8457 -2.88867 -5.85547c0 -1.37988 0.680664 -3.38867 1.51855 -4.48438c0.0800781 -0.109375 2.52246 -3.07324 3.7998 -4.5293c1.27832 -1.45703 3.8877 -2.63867 5.8252 -2.63867c1.4707 0 3.60547 0.734375 4.76562 1.63867
+l17.0898 13.4492l14.1396 -16.7393l-34.5703 -27.1807c-1.58398 -1.22266 -2.86914 -3.83984 -2.86914 -5.84082c0 -1.38574 0.685547 -3.40039 1.5293 -4.49902l15.7803 -18.6396c1.33594 -1.55176 4.08203 -2.81055 6.12988 -2.81055
+c1.54492 0 3.78516 0.775391 5 1.73047l34.4199 27l9.68066 -11.4902c1.7334 -1.98242 5.27832 -3.5918 7.91211 -3.5918c1.98438 0 4.86816 0.986328 6.4375 2.20215zM187.44 29c9.93555 0 18 -8.06445 18 -18s-8.06445 -18 -18 -18c-9.93652 0 -18 8.06445 -18 18
+s8.06348 18 18 18z" />
    <glyph glyph-name="mastodon" unicode="&#xf4f6;" 
 d="M433 268.89c0 0 0.799805 -71.6992 -9 -121.5c-6.23047 -31.5996 -55.1104 -66.1992 -111.23 -72.8994c-20.0996 -2.40039 -93.1191 -14.2002 -178.75 6.7002v-0.339844c0 -3.75977 0.40332 -9.83496 0.900391 -13.5605c6.62988 -49.5996 49.2197 -52.5996 89.6299 -54
 c40.8105 -1.2998 77.1201 10.0996 77.1201 10.0996l1.7002 -36.8994s-28.5098 -15.2998 -79.3203 -18.1006c-28.0098 -1.59961 -62.8193 0.700195 -103.33 11.4004c-112.229 29.7002 -105.63 173.4 -105.63 289.1c0 97.2002 63.7197 125.7 63.7197 125.7
@ -3438,5 +3436,14 @@ c0 7.7207 7 14.6104 20.4102 14.6104c14.0898 0 20.79 -8.4502 20.79 -18.3496h30.70
 c17.2598 -6.15039 21.9102 -10.4004 21.9102 -19.4795c0 -15.2002 -19.1309 -14.2305 -19.4707 -14.2305c-20.3994 0 -25.6494 9.09961 -25.6494 21.9004h-30.7998l-0.180664 -0.560547c-0.679688 -31.3203 28.3799 -45.2197 56.6299 -45.2197
 c29.9805 0 51.1201 13.5498 51.1201 38.29zM276.68 215.79c0 25.2998 -18.4297 45.46 -53.4199 45.46h-51.7793v-138.18h32.1699v47.3594h19.6094c30.25 0 53.4199 15.9502 53.4199 45.3604zM297.94 123l49.0596 138.22h-31.0898l-47.9102 -138.22h29.9404zM404.46 261.22
 h-31.0898l-47.9102 -138.22h29.9404z" />
+    <glyph glyph-name="cotton-bureau" unicode="&#xf89e;" horiz-adv-x="512" 
+d="M474.31 117.59h25.1807c-25.7998 -109.78 -111.4 -173.59 -239.67 -173.59c-154.63 -0.339844 -247.82 92.8604 -247.82 248.18c0 154.63 93 247.82 247.82 247.82c128.399 0 214.06 -63.5098 240.18 -173.61h-25.2598
+c-24.8506 95.6104 -99.9199 148.811 -214.69 148.811c-141.85 0 -223.2 -81.3799 -223.2 -223.2c0 -137.93 76.6699 -218 211.101 -223v49.2002c0 48.1602 -26.5498 74.3896 -74.5498 74.3896c-62.1309 0 -99.4004 37.2803 -99.4004 99.4102
+c0 61.3701 36.5195 98.2803 97.3799 99.0596c30.7402 64.6504 144.24 69.3203 177.24 0c60.8496 -0.779297 97.3799 -37.6895 97.3799 -99.0596c0 -62.0098 -37.2002 -99.21 -99.2002 -99.21c-47.9795 0 -74.3896 -26.3896 -74.3896 -74.3896v-49.1602
+c107.67 3.75977 178.24 56.5 201.899 148.35zM357 265.67c3.7998 -21.0801 11.2695 -104.2 -71.79 -120.75c12.2598 -17.7402 32.9805 -27.3301 61.5898 -27.3301c47.9697 0 74.4004 26.4102 74.4004 74.4102c0 44.6699 -22.8301 70.2197 -64.2002 73.6699zM275.32 168.31
+c72.7803 9.89062 58.5 86.9102 56.2295 97c-72.5596 -10 -58.6895 -86.6592 -56.2295 -97zM260 316l-0.179688 -0.259766c-28.3008 0 -49.1602 -9.66016 -61.5703 -27.3506c28.3701 -5.44922 49.3701 -20.5898 61.5996 -43.4492
+c12.2305 22.8594 33.2305 37.9697 61.5908 43.4492c-12.4404 17.9404 -32.8301 27.6104 -61.4404 27.6104zM188.48 265.28h0.239258c-2.75 -10.0498 -16.1602 -87.1602 56.25 -97c2.41992 10.1895 16.6807 86.4297 -56.4893 97zM173.2 117.59l0.330078 0.0302734
+c28.2998 0 49 9.66992 61.1396 27.2998c-73.0303 14.2197 -78.4004 83.5498 -71.6504 120.75c-41.3594 -3.66992 -64.2197 -29.3096 -64.2197 -73.6699c0 -48.0098 26.4004 -74.4102 74.4004 -74.4102zM226.41 105.2h0.269531
+c14.4902 -7.60059 25.5605 -19.3301 33.5605 -33.8301c6.36523 12.2188 21.4092 27.374 33.5801 33.8301c-14.4902 8.00977 -26.0508 19.0596 -33.8203 33.5498c-6.4248 -12.1094 -21.4736 -27.1396 -33.5898 -33.5498z" />
  </font>
 </defs></svg>
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg
@ -1,12 +1,12 @@
 <?xml version="1.0" standalone="no"?>
 <!--
-Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
+Font Awesome Free 5.10.2 by @fontawesome - https://fontawesome.com
 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20190112 at Tue Jun  4 15:16:44 2019
+Created by FontForge 20190801 at Thu Aug 22 14:41:09 2019
 By Robert Madole
 Copyright (c) Font Awesome
 </metadata>
@ -22,7 +22,7 @@ Copyright (c) Font Awesome
    descent="-64"
    bbox="-0.0663408 -64.0662 640.01 448.1"
    underline-thickness="25"
-    underline-position="-51"
+    underline-position="-50"
    unicode-range="U+0020-F5C8"
  />
    <missing-glyph />
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg
@ -1,12 +1,12 @@
 <?xml version="1.0" standalone="no"?>
 <!--
-Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
+Font Awesome Free 5.10.2 by @fontawesome - https://fontawesome.com
 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20190112 at Tue Jun  4 15:16:44 2019
+Created by FontForge 20190801 at Thu Aug 22 14:41:09 2019
 By Robert Madole
 Copyright (c) Font Awesome
 </metadata>
@ -22,7 +22,7 @@ Copyright (c) Font Awesome
    descent="-64"
    bbox="-0.983398 -64.9834 640.104 448.427"
    underline-thickness="25"
-    underline-position="-51"
+    underline-position="-50"
    unicode-range="U+0020-F897"
  />
    <missing-glyph />
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff
--- a/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2
+++ b/public/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2
--- a/public/images/clients/logo_zamg.png
+++ b/public/images/clients/logo_zamg.png
--- a/public/images/csm_kabel.png
+++ b/public/images/csm_kabel.png
--- a/public/images/favicon/favicon.ico
+++ b/public/images/favicon/favicon.ico
--- a/public/images/help_bg_image.jpg
+++ b/public/images/help_bg_image.jpg
--- a/public/images/hero_bg_image.jpg
+++ b/public/images/hero_bg_image.jpg
--- a/public/images/services/ipad_air.png
+++ b/public/images/services/ipad_air.png
--- a/public/images/services/iphone5c.png
+++ b/public/images/services/iphone5c.png
--- a/public/images/services/macbook_pro.png
+++ b/public/images/services/macbook_pro.png
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- http://tutsplus.github.io/casablanca-tutsplus/Part%202%20-%20CSS/index.html# -->
+    <!-- https://github.com/catalinmiron/casablanca-tutsplus -->
+
+    <!-- Basic Page Needs
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta charset="utf-8">
+    <title>RDR - For Scientists</title>
+    <meta name="description" content="An awesome one page website">
+    <meta name="author" content="Arno Kaimbacher">
+
+    <!-- Mobile Specific Metas
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <!-- FONT
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <!-- <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'> -->
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet" type='text/css'>
+
+    <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/skeleton.css">
+    <link rel="stylesheet" href="css/font-awesome.css">
+    <link rel="stylesheet" href="css/style.css">
+
+    <!-- Favicon
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <link rel="icon" type="image/png" href="images/favicon/favicon.ico" />
+    <!-- <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
+    <link rel="manifest" href="images/favicon/site.webmanifest"> -->
+
+    <!-- Javascript
+  –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
+  <script type="text/javascript" src="js/scripts.js"></script>
+
+</head>
+
+<body>
+
+    <!-- Menu -->
+    <header class="header">
+        <nav class="navigation">
+            <a href="#" class="menu-icon">
+                <i class="fa fa-bars"></i>
+            </a>
+            <ul class="menu">
+                <li><a href="#hero">Home</a></li>
+                <li><a href="#introduction">Introduction</a></li>           
+                <li><a href="#work">Work</a></li>
+                <li><a href="#help">Help</a></li>
+                <li><a href="#clients">Clients</a></li>
+                <li><a href="#about">About</a></li>           
+                <!-- <li><a href="#why-us">Why us?</a></li>            
+                <li><a href="#contact">Contact</a></li> -->
+                <li  class="right"><a href="#">Login</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Hero -->
+    <section id="hero" class="hero u-full-width">
+        <div class="hero-image"></div>
+        <div class="container centered">
+            <div class="twelve columns">
+                <h1 class="separator">Research Data Repository</h1>
+                <h2>                    
+                        A data repository for the research community with secure preservation and data publication.
+                </h2>
+            </div>
+        </div>
+    </section>
+
+    <!-- Introduction -->
+    <section data-sr id="introduction" class="introduction u-full-width">
+        <div class="container">
+            <div class="row">
+                <div class="twelve columns">
+                    <h3 class="separator">Introduction RDR</h3>
+                    <h4>
+                        RDR offers institutions and researchers a comprehensive archiving 
+                        and publishing service with reliable storage options for backing up 
+                        and managing research data. With RDR you can promote research data 
+                        management at your institution and make an important contribution to improve 
+                        availability, long-term preservation and independent publication of your research data.
+                    </h4>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Creativity -->
+     <!-- <section data-sr id="creativity" class="creativity u-full-width featured-bg-image">
+        <h4 class="centered">
+            <button class="button inverted">Pure creativity</button>
+        </h4>
+    </section> -->
+
+    <!-- Work -->
+    <section data-sr id="work" class="work u-full-width">
+        <div class="container">
+            <div class="row">
+                <div class="twelve columns">
+                    <h3 class="separator">RDR SERVICES</h3>
+                </div>
+            </div>
+           
+            <div class="row">
+                <ul class="work-items isotope js-isotope u-cf">
+                    <li class="four columns isotope-item design ui">
+                        <!-- <img src="images/portfolio/work_1.svg"> -->
+                        <div class="work-front">
+                            <div class="vertical-centered"> 
+                                <h3>Data Archival</h3>
+                            </div>
+                        </div>
+                        <div class="work-detail">
+                            <div class="vertical-centered">                              
+                                <p class="separator orange">Data Archival</p>
+                                <p>
+                                        RDR provides format-independent archiving services for data protection.
+                                </p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="four columns isotope-item branding web-design">
+                        <!-- <img src="images/portfolio/work_2.svg"> -->
+                        <div class="work-front">
+                            <div class="vertical-centered"> 
+                                <h3>Data Publication</h3>
+                            </div>
+                        </div>
+                        <div class="work-detail">
+                            <div class="vertical-centered">                                
+                                <p class="separator orange">Data Publication</p>
+                                <p>
+                                        With RDR you can publish research data,
+                                        so that your data is citable and reusable.
+                                </p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="four columns isotope-item mobile ui branding">
+                        <!-- <img src="images/portfolio/work_3.svg"> -->
+                        <div class="work-front">
+                            <div class="vertical-centered"> 
+                                <h3>Peer Review</h3>
+                            </div>
+                        </div>
+                        <div class="work-detail">
+                            <div class="vertical-centered">                               
+                                <p class="separator orange">Peer Review</p>
+                                <p>
+                                        All RDR datasets undergo a full, efficient peer review process.
+                                </p>
+                            </div>
+                        </div>
+                    </li>                  
+                </ul>
+            </div>
+        </div>
+    </section>
+
+    <!-- Help -->
+    <section data-sr id="help" class="help u-full-width featured-bg-image">
+        <h4 class="centered">
+            <button class="button inverted">We're here to help!</button>
+        </h4>
+    </section>
+
+    <!-- Clients -->
+    <section data-sr id="clients" class="clients u-full-width">
+        <div class="container">
+            <div class="row">
+                <h3 class="separator">Cooperation Partners</h3>
+            </div>
+            <ul class="clients u-full-width u-cf">
+                <li>
+                    <img src="images/clients/logo_zamg.png" alt="Zamg Client">
+                </li>                
+            </ul>
+        </div>
+        </div>
+    </section>
+
+    <!-- About -->
+    <section data-sr id="about" class="about u-full-width">
+        <div class="container">
+            <div class="row">
+                <div class="twelve columns">
+                    <h3 class="separator">About us</h3>
+                    <h4>
+                        RDR focuses on disciplines who do not have a tradition 
+						of data sharing thus ensuring better availability, 
+						sustainable preservation and (independent) publication 
+						capacity of their research data.
+                    </h4>
+                </div>
+            </div>
+              <!--<div class="row"> 
+                <ul class="people-list">
+                    <li class="three columns people-list-item">
+                        <img src="images/people_1.jpg">
+                        <div class="people-hover">
+                            <a href="#"><i class="fa fa-external-link"></i></a>
+                            <div class="people-detail">
+                                <h3>Arno</h3>
+                                <p>Software Engineer</p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="three columns people-list-item">
+                        <img src="images/people_2.jpg">
+                        <div class="people-hover">
+                            <a href="#"><i class="fa fa-external-link"></i></a>
+                            <div class="people-detail">
+                                <h3>Viktoria</h3>
+                                <p>Project Leader</p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="three columns people-list-item">
+                        <img src="images/people_3.jpg">
+                        <div class="people-hover">
+                            <a href="#"><i class="fa fa-external-link"></i></a>
+                            <div class="people-detail">
+                                <h3>Werner</h3>
+                                <p>GIS Expert</p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="three columns people-list-item blank-feature">
+                        <div class="vertical-centered">
+                            <h3 class="separator">WE ARE HIRING</h3>
+                            <button class="button">Apply</button>
+                        </div>
+                    </li>
+                </ul>
+            </div> -->
+        </div>
+    </section>
+   
+    <!-- Why us -->
+    <section data-sr id="why-us" class="why u-full-width">
+        <div class="container">
+            <div class="row">
+                <div class="twelve columns">
+                    <h3 class="separator">Why choose us</h3>
+                    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                        laboris.</h4>
+                </div>
+            </div>
+
+            <div class="row">
+                <ul class="services">
+                    <li class="four columns">
+                        <div class="service-image">
+                            <img src="images/services/iphone5c.png">
+                        </div>
+                        <h5>App Design</h5>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                            ilabore et dolore.</p>
+                    </li>
+                    <li class="four columns">
+                        <div class="service-image">
+                            <img src="images/services/ipad_air.png">
+                        </div>
+                        <h5>Responsive Layout</h5>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                            ilabore et dolore.</p>
+                    </li>
+                    <li class="four columns">
+                        <div class="service-image">
+                            <img src="images/services/macbook_pro.png">
+                        </div>
+                        <h5>Pixel Perfect design</h5>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                            ilabore et dolore.</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </section>
+   
+    <!-- Contact -->
+    <section data-sr id="contact" class="contact u-full-width">
+        <div class="container">
+            <div class="row">
+                <div class="twelve columns">
+                    <h3 class="separator">Get in touch</h3>
+                    <h4>
+						Want to keep updated or need further information?
+					</h4>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Us -->
+    <section data-sr class="container contact-us u-full-width u-max-full-width">
+        <div class="row">
+            <div class="four columns contact-us-details">
+                <h3>Our Location</h3>
+                <h5>
+                    Neulinggasse 38 <br />
+                    1030 Wien <br />
+                    +43-1-7125674 <br />
+                </h5>
+                <ul class="social-links">
+                    <li>
+                        <a href="https://twitter.com/GeologischeBA" target="_blank">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://www.facebook.com/geologie.ac.at" target="_blank">
+                            <i class="fab fa-facebook"></i>
+                        </a>
+                    </li>
+                   
+                </ul>
+            </div>
+            <div class="eight columns contact-us-form">
+                <form>
+                    <div class="row">
+                        <div class="six columns">
+                            <input class="u-full-width" type="text" placeholder="Name" id="nameInput">
+                        </div>
+                        <div class="six columns">
+                            <input class="u-full-width" type="email" placeholder="Email" id="emailInput">
+                        </div>
+                    </div>
+                    <textarea class="u-full-width" placeholder="Message" id="messageInput"></textarea>
+                    <input class="button u-pull-right" type="submit" value="Send">
+                </form>
+
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <section data-sr class="footer u-full-width u-max-full-width">
+		<div class="container">
+			<div class="row">           
+				<div class="four columns footer-about">
+					<!-- <h5>&copy 2015 Tuts+ Web Design.</h5> -->
+					<div class="block">
+						<h3 class="block-title">About RDR</h3>
+						<ul>                           
+							<li class="last"><a href="{!! URL::route('frontend.pages.show', ['page_slug'=>'about']) !!}">About Us</a></li>
+							<li><a href="{{ URL::route('frontend.home.news') }}">News</a></li>
+						</ul>
+					</div>
+				</div>				
+				  <div class="four columns footer-links">
+					<div class="block">
+						<h3 class="block-title">TOOLS &amp; SUPPORT</h3>
+						<ul id="secondary-nav" class="nav">                            
+							<li class="first"><a href="{{ URL::route('frontend.home.contact') }}">Contact</a></li>                          
+							<li class="last"><a href="{!! URL::route('frontend.pages.show', ['page_slug'=>'imprint']) !!}">Impressum</a></li>
+							<li class="last"><a href="{{ URL::route('frontend.sitelinks.index') }}">Sitelinks</a></li>
+							<li class="last"><a href="{!! URL::route('frontend.pages.show', ['page_slug'=>'terms-and-conditions']) !!}">Terms and Conditions</a></li>
+
+							<li><a target="_blank" href="https://github.com/geolba"><i class="fab fa-github"></i> rdr bei GitHub</a></li>
+						</ul>
+					</div>
+				</div>
+				<div class="four columns block">
+						<div class="block">
+							<h3 class="block-title">CONNECT WITH US</h3>
+							<ul>
+								<li><a target="_blank" href="https://www.geologie.ac.at/"><i class="fas fa-home"></i> GBA</a></li>
+								<li><span><i class="fas fa-phone"></i> +43-1-7125674</span></li>
+								<li><a href="mailto:repository@geologie.ac.at?Subject= RDR &amp;body=How can I help you?"><i class="far fa-envelope"></i> repository@geologie.ac.at</a> </li>
+								<li></li>
+							</ul>
+						</div>
+					</div>
+			  
+			</div>
+		</div>
+    </section>
+
+    <!-- End Document
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+</body>
+
+</html>
--- a/public/js/app.js
+++ b/public/js/app.js
--- a/public/js/lib.js
+++ b/public/js/lib.js
--- a/public/js/scripts.js
+++ b/public/js/scripts.js
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@ -3,8 +3,10 @@
    "/backend/publish/approveDataset.js": "/backend/publish/approveDataset.js",
    "/backend/publish/datasetPublish.js": "/backend/publish/datasetPublish.js",
    "/css/app1.css": "/css/app1.css",
+    "/css/font-awesome.css": "/css/font-awesome.css",
    "/backend/publish/releaseDataset.js": "/backend/publish/releaseDataset.js",
    "/js/app.js": "/js/app.js",
    "/js/lib.js": "/js/lib.js",
+    "/js/scripts.js": "/js/scripts.js",
    "/js/dataTable.js": "/js/dataTable.js"
 }
--- a/resources/assets/js/jquery-global.js
+++ b/resources/assets/js/jquery-global.js
@ -0,0 +1,6 @@
+//https://stackoverflow.com/questions/35358625/jquery-is-not-defined-when-use-es6-import
+
+// jquery-global.js
+import jquery from 'jquery';
+window.jQuery = jquery;
+window.$ = jquery;
--- a/resources/assets/js/scripts.js
+++ b/resources/assets/js/scripts.js
@ -0,0 +1,88 @@
+import './jquery-global.js';
+import 'single-page-nav/jquery.singlePageNav.js';
+//bind plugin definition to jQuery
+
+$(document).ready(function(){
+
+    // =Hero
+    // Alway make hero-container height equal to window height
+  
+    var $heroContainer = $('.hero');
+  
+    $heroContainer.height(window.innerHeight);
+  
+    // When user resize browser window, hero container needs to have the same
+    // height as browser window height.  
+    $(window).resize(function() {
+      $heroContainer.height(window.innerHeight);
+    });
+  
+    // =Work
+    // Isotope filters  
+    // var $workFilterLinks = $('.work-filters li');
+    // var $container = $('.work-items');
+  
+    // $workFilterLinks.find('a').click(function(){  
+    //   $workFilterLinks.removeClass('active');  
+    //   $container.isotope({
+    //     // options
+    //     filter: $(this).attr('data-filter'),
+    //     itemSelector: '.isotope-item',
+    //     animationEngine : "best-available",
+    //     masonry: {
+    //       columnWidth: '.isotope-item'
+    //     }
+    //   });  
+    //   $(this).parent().addClass('active');  
+    //   return false;
+    // });
+  
+    // Menu initialization
+  
+    var $menuIcon = $('.menu-icon'),
+        $navigation = $('.navigation'),
+        $menu = $('.menu'),
+        $navigationLink = $('.menu a');
+  
+    $(window).scroll(function() {
+      if(window.scrollY > window.outerHeight) {
+        $menuIcon.addClass('active');
+      } else {
+        $menuIcon.removeClass('active');
+      }
+    });
+  
+    $menuIcon.click(function(e) {
+      e.preventDefault();
+  
+      $navigation.toggleClass('active');
+    });
+  
+    $menu.singlePageNav({
+        filter: ':not(.external)',
+        speed: 1000,
+        currentClass: 'current',
+        easing: 'swing',
+        updateHash: false,
+        beforeStart: function() {
+        },
+        onComplete: function() {
+          $navigation.removeClass('active');
+        }
+    });
+  
+    // Scrollreveal initialize
+  
+    // var config = {  
+    //   easing: 'hustle',
+    //   reset:  false,
+    //   delay:  'onload',
+    //   opacity: .2,
+    //   vFactor: 0.2,
+    //   mobile: false
+    // }
+  
+    // window.sr = new scrollReveal( config );
+  
+  });
+  
--- a/resources/assets/sass/font-awesome.scss
+++ b/resources/assets/sass/font-awesome.scss
@ -0,0 +1,4 @@
+@import '~@fortawesome/fontawesome-free/scss/brands';
+@import '~@fortawesome/fontawesome-free/scss/regular';
+@import '~@fortawesome/fontawesome-free/scss/solid';
+@import '~@fortawesome/fontawesome-free/scss/fontawesome';
--- a/resources/views/frontend/home/index.blade.php
+++ b/resources/views/frontend/home/index.blade.php
@ -1,6 +1,6 @@
@extends('layouts.app')

-@section('slider')
+@section('hero')
 <div class="pure-g slider">
    <div class="container">
        <div class="pure-g">
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -39,7 +39,7 @@
    <div id="mobile-menu" class="pure-hidden-phone pure-hidden-tablet pure-hidden-desktop">
        <ul></ul>
    </div>
-    @yield('slider')
+    @yield('hero')

    <div class="content-container">
        <div class="container">
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -20,8 +20,10 @@ mix.js('resources/assets/js/datasetPublish.js', 'public/backend/publish')
    .js('resources/assets/js/releaseDataset.js', 'public/backend/publish')
    .js('resources/assets/js/approveDataset.js', 'public/backend/publish')
    .js('resources/assets/js/ckeditor.js', 'public/backend/')   
-    .sass('resources/assets/sass/app1.scss', 'public/css', { implementation: require('node-sass') })
-    // .sass('node_modules/purecss/build/pure.css', 'public/css',  { implementation: require('node-sass') })
+    .sass('resources/assets/sass/app1.scss', 'public/css', { implementation: require('node-sass')})
+    //.sass('node_modules/purecss/build/pure.css', 'public/css', { implementation: require('node-sass') })
+    .sass('resources/assets/sass/font-awesome.scss', 'public/css', { implementation: require('node-sass') })
+    .js('resources/assets/js/scripts.js', 'public/js')   
    .scripts([
        'node_modules/datatables.net/js/jquery.dataTables.js',
        'node_modules/datatables.net-buttons/js/dataTables.buttons.js',