Footer fertig

css/main.css

@@ -1,5 +1,6 @@
 /* Add a black background color to the top navigation */
 .topnav {
+    padding: 2px 125px;
     background: linear-gradient(to bottom, lightgrey, white);
     overflow: hidden;
     border: 1px solid lightgrey;
@@ -31,6 +32,11 @@
     border-left: 1px solid lightgrey;
 }
 
+.icon:hover {
+    background: linear-gradient(to top, grey, white);
+
+}
+
 .lastBorder {
     border-right: 1px solid lightgrey;
 }
@@ -39,33 +45,12 @@
     margin: 0 125px;
 }
 
-/* Style the links inside the navigation bar */
-.topnav a {
-
-
-   /*text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-    font-size: 17px;*/
-}
-
-/*!* Change the color of links on hover *!
-.topnav a:hover {
-    background-color: #ddd;
-    color: black;
-}
-
-!* Add a color to the active/current link *!
-.topnav a.active {
-    background-color: #4CAF50;
-    color: white;
-}*/
 
 h1 {
-    font-weight: bold;
+    margin: 20px 0;
     font-family: 'Roboto', sans-serif;
-    font-size: 26px;
+    font-size: 30px;
-    margin: 10px;
+
 }
 
 .text {
@@ -74,7 +59,7 @@ h1 {
     line-height: 145%;
     font-style: normal;
 
-    border: 3px solid grey;
+    border: 3px solid lightgrey;
     border-top-color: lightgreen;
     border-radius: 3px;
 
@@ -87,16 +72,21 @@ h1 {
     color: lightgreen;
 }
 
-table#t01 {
+.table {
-    width: 100%;
+    font-family: 'Roboto', sans-serif;
-    background-color: white;
+    margin-bottom: 15px;
-    text-align: left;
-    margin: 2em;
     vertical-align: middle;
 }
 
+/*table#t01 {
+    width: 100%;
+    background-color: deeppink;
+    text-align: left;
+    vertical-align: middle;
+}*/
+
 table#t01 tr:nth-child(even) {
-    background-color: white;
+    background-color: deeppink;
     height: 2em;
     vertical-align: middle;
 }
@@ -134,3 +124,21 @@ th {
 .Div {
     display: none;
 }
+
+.footer{
+    margin: 0 125px;
+    border-top: 2px solid lightgreen;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    justify-content: space-between;
+}
+.foo-left {
+    margin-top: 15px;
+    margin-bottom: 30px;
+}
+
+.foo-right {
+    margin-top: 15px;
+    margin-bottom: 30px;
+    text-align: right;
+}

index.html

@@ -24,22 +24,22 @@
                 <img src="resources/world_data_logo_v1.png">
             </li>
             <li class="icon">
-                <a><i class="fas fa-ellipsis-v"></i><i class="fas fa-bars"></i> A1 - Table</a>
+                <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
             </li>
             <li class="icon">
-                <a><i class="fas fa-ellipsis-v"></i><i class="fas fa-bars"></i> A2 - Parse</a>
+                <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Parse</a>
             </li>
             <li class="icon">
-                <a><i class="fas fa-ellipsis-v"></i><i class="fas fa-bars"></i> A2 - Save</a>
+                <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Save</a>
             </li>
             <li class="icon">
-                <a><i class="fas fa-ellipsis-v"></i><i class="fas fa-bars"></i> A2 - Print</a>
+                <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Print</a>
             </li>
             <li class="icon">
-                <a><i class="fas fa-ellipsis-v"></i><i class="fas fa-bars"></i> A3 - REST</a>
+                <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A3 - REST</a>
             </li>
             <li class="icon lastBorder">
-                <a><i class="fas fa-ellipsis-v"></i><i class="fas fa-bars"></i> A4 - Vis</a>
+                <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
             </li>
         </ul>
     </nav>
@@ -67,19 +67,25 @@
 
         <button href="javascript:/" onClick="div_change('options')">Show Options</button>
         <div id="options" class=Div></div>
-        <table id="t01"></table>
 
+        <div class="table">
+            <table id="t01"></table>
             <script>
                 // create table
                 handleFile("resources/world_data_v1.csv")
             </script>
+        </div>
+
 
     </div>
-    <footer>
+    <footer class="footer">
-        <hr style="border: 1px solid lightgreen">
+        <div class="foo-left">
         <p>Copyright © 2018 world_data</p>
         <p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
-        <p>This solution has been created by: Team 26</p>
+        </div>
+        <div class="foo-right">
+        <p>This solution has been created by: <br> Team 26</p>
+        </div>
     </footer>
 </body>