adds a landing page which gives an overview of the tool

- landing page shows two images of google calendar and tizen watch
  and how the calendars corelate
- routes redesigned to fit this landing page
- redesign of coloring in css

server/static/css/main.css

@@ -3,9 +3,8 @@ html,
 body
 {
     font-family: "Trebuchet MS", Helvetica, sans-serif;
-    margin: 0.5rem;
     padding: 0;
-    height: calc(100% - 1rem)
+    height: calc(100% - 0.5rem)
 }
 
 #container {
@@ -31,15 +30,55 @@ body
 .banner {
     display:flex;
     justify-content: center;
+    margin: 5rem;
     align-items:center;
-    background-color: orange;
-    height: 20rem;
     flex-direction: column;
-    margin-bottom: 10rem;
+}
+
+.subtitle {
+    color: #333;
+    text-align: center;
+    margin: 1rem;
+}
+
+.primeblue {
+    color: #1b75bc;
 }
 
 .title {
-    color: blue;
+    font-size: 5rem;
+    font-weight: bold;
+    text-align: center;
+    margin: 1rem;
+}
+
+.grayblock {
+    background-color: #ddd;
+    align-items: center;
+    justify-content: center;
+}
+
+.grayblock .padded {
+    padding: 3rem; 
+}
+
+.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.horizontal .content {
+    font-size: 2rem;
+    text-align: center;
+}
+
+.horizontal .image {
+    margin: 1rem;
+    margin-left: 4rem;
+    margin-right: 4rem;
+    height: 30rem;
+    border-radius: 1rem;
+    width: auto;
 }
 
 .logins {
@@ -82,14 +121,20 @@ body
 
 /* top navigation */
 .navigation {
-    background-color: orange;
+    background-color: #eaeaea;
     overflow: hidden;
+    margin: auto;
+    display: flex;
+}
+
+.navigation_rightside {
+   margin-left: auto; 
 }
 
 .navigation a {
     float: left;
     display: flex;
-    color: #f2f2f2;
+    color: #333;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;