Add responsive design

eet/css/ie.css

@@ -1,294 +0,0 @@
-* {
-    padding:0px;
-    margin:0px;
-}
-
-html, body{
-    background: url(./../images/square_bg.png) repeat top left;
-    font-family:"Myriad Pro", "Lucida Grande", "Trebuchet MS", sans-serif;
-    width:100%;
-    height:100%;
-    padding:0;
-    margin:0;
-    
-    position:absolute;
-    top:0px;
-    left:0px;
-    z-index:-1;
-}
-
-#centerhelp{
-    width:1%;
-    height:60%;
-    margin-bottom:-150px; /* half of container's height */
-    float:left;
-}
-
-#header{
-    text-align:right;
-    position:absolute;
-    right:0px;
-    padding:0px;
-    padding-right:10px;
-    margin:0px;
-	
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1cffffff', endColorstr='#1cffffff');
-}
-
-#title{
-    color:#0B75AF;
-    font-size: 3.5em;
-    font-weight:normal;
-    margin-top:-16px;
-    text-shadow:2px 1px 2px #999;
-    vertical-align:top;
-}
-
-#subtitle{
-    color:#777;
-    text-transform:uppercase;
-    font-size: 1em;
-    font-weight:normal;
-    margin:0px;
-    margin-top:20px;
-    border-width:0px;
-}
-
-#logo{
-    margin:0px;
-    border-width:0px;
-    width:400px;
-    background:none;
-}
-
-#dashboard{
-    width:100%;
-    margin:0 auto;
-    clear:left;
-    height:100px;
-    text-align: center;
-}
-
-/* Dashboard Navigation */
-
-#nav{
-    padding:0;
-    list-style: none;
-    font-size:14px;
-    display: inline-block;
-}
-
-#nav a{
-    text-decoration:none;
-    outline:none;
-}
-
-#nav li{
-    float:left;
-    width:300px;
-    height:85px;
-    position:relative;
-    cursor:pointer;
-	border: 1px solid white;
-}
-
-#nav li > a{
-    position:absolute;
-    top:0px;
-    left:0px;
-    width:100%;
-    height:85px;
-    z-index:12;
-    background: #DDDDDD;
-}
-
-#nav li a img{
-    border:none;
-    position:absolute;
-    width:0px;
-    height:0px;
-    bottom:0px;
-    left:85px;
-    z-index:100;
-}
-
-#nav li span.nav_wrap{
-    position:absolute;
-    top:25px;
-    left:0px;
-    height:60px;
-    z-index:15;
-    margin-left:5%;
-    width:90%;
-}
-#nav li span.nav_active{
-    position:absolute;
-    background:#111;
-    top:85px;
-    width:300px;
-    height:0px;
-    left:0px;
-    z-index:14;
-
-    background:#000000;
-}
-
-#nav li span span.nav_link,
-#nav li span span.nav_descr,
-#nav li div.nav_box a{
-    text-transform:uppercase;
-    width:100%;
-    text-align:center;
-}
-
-#nav li span span.nav_link{
-    color:#000;
-    font-size:24px;
-    float:left;
-    clear:both;
-    text-align:center;
-    text-shadow:1px 1px 1px #FFF;
-}
-#nav li span span.nav_descr{
-    color:#0B75AF;
-    float:left;
-    clear:both;
-    font-size:10px;
-    letter-spacing:1px;
-    width:100%;
-}
-
-/* DEV CUT */
-
-#nav li div.nav_box{
-    display:block;
-    position:absolute;
-    width:280px;
-    overflow:hidden;
-    height:200px;
-    top:85px;
-    left:0px;
-    display:none;
-    background:#000000;
-
-    padding-left:20px;
-}
-#nav li div.nav_box a{
-    float:left;
-    clear:both;
-    line-height:30px;
-    color:#0B75AF;
-    text-align:left;
-}
-#nav li div.nav_box a:first-child{
-    margin-top:15px;
-}
-#nav li div.nav_box a:hover{
-    color:#fff;
-}
-
-#nav li:hover .nav_link {
-    color:#FFFFFF;
-    text-shadow:1px 1px 1px #000000;
-}
-
-#dashboard ul
-{
-    height:50px;
-    padding:12px 0 0 0;
-    list-style-type: none;
-    text-align: left;
-}
-
-#dashboard ul li:first-child {
-    border-left:none;
-}
-
-#dashboard ul li {
-    display: inline;
-    padding:0;
-}
-
-#dashboard ul li a {
-    font-size:13px;
-    line-height:1.5em;
-    font-weight:bold;
-    color:#7d838b;
-    text-decoration:none;
-}
-
-#dashboard ul li a:hover { 
-    text-decoration:none;
-    color:#bbc0c7;
-}
-
-/* Footer */
-
-#reference{
-    position:fixed;
-    left:10px;
-    bottom:10px;
-    font-size:12px;
-    color:#444;
-}
-#reference a{
-    color:#222;
-    text-transform:uppercase;
-    text-decoration:none;
-    text-shadow:1px 1px 1px #fff;
-}
-#reference a:hover{
-    color:#000;
-    text-decoration:underline;
-}
-
-
-/* Impressum */
-
-#impressum{
-    color:#000000;
-    display:block;
-    background: #DDDDDD;
-    width:650px;
-    padding:20px 50px;
-    margin:30px auto;
-}
-
-#impressum a{
-    color:#000000;
-    text-decoration: underline;
-}
-
-#impressum a:hover{
-    color:#FFFFFF;
-}
-
-.impressum_sources_list{
-    padding-left:2em;
-    text-align:left;
-}
-
-#impressum_back{
-    width:50px;
-    margin-top:15px;
-    margin-left:10px;
-	border:0;
-}
-
-.columnHeader{
-    text-align:left;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left:10px;
-}
-
-.columns{
-    text-align:justify;
-    margin:auto;
-    padding-left:10px;
-}
-
-.nameBox{
-    float:left;
-    padding-right:10px;
-}

eet/css/style.css

@@ -1,247 +1,120 @@
 * {
-    padding:0px;
-    margin:0px;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  box-sizing: border-box;
 }
 
-html, body{
-    background: url(./../images/square_bg.png) repeat top left;
-    font-family:"Myriad Pro", "Lucida Grande", "Trebuchet MS", sans-serif;
-    width:100%;
-    height:100%;
-    padding:0;
-    margin:0;
-    
-    position:absolute;
-    top:0px;
-    left:0px;
-    z-index:-1;
+body {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100vh;
+  padding: 2rem;
+  font-family:"Myriad Pro", "Lucida Grande", "Trebuchet MS", sans-serif;
+  color: #202020;
+  background:
+    url(../images/square_bg.png) repeat top left,
+    url(../images/logo_transparent.png) no-repeat calc(100vw - 200px) 30px;
+  background-size: auto, 150px 150px;
 }
 
-#centerhelp{
-    width:1%;
-    height:40%;
-    margin-bottom:-150px; /* half of container's height */
-    float:left;
+h1, h2 {
+  padding-bottom: .5rem;
 }
 
-#header{
-    text-align:right;
-    position:absolute;
-    top:1em;
-    right:0px;
-    padding:0px;
-    padding-right:10px;
-    margin:0px;
-    
-    background:rgba(255,255,255,0.1);
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1cffffff', endColorstr='#1cffffff'); 
+main ul {
+  display: grid;
+  margin: 2rem 0;
+  height: calc(100% - 4rem);
+  grid-template-rows: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 4px;
+  list-style: none;
 }
 
-#title{
-    color:#0B75AF;
-    font-size: 3.5em;
-    font-weight:normal;
-    margin-top:-16px;
-    text-shadow:2px 1px 2px #999;
-    vertical-align:top;
+main ul li a {
+  --baseHue: 213;
+  --altHue: 199;
+
+  --hue: var(--baseHue);
+  --sat: 100%;
+  --lum: 67%;
+  --alpha: .4;
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  background-color: hsla(var(--hue), var(--sat), var(--lum), var(--alpha));
+  transition: background-color .2s ease-in-out;
 }
 
-#subtitle{
-    color:#777;
-    text-transform:uppercase;
-    font-size: 1em;
-    font-weight:normal;
-    margin:0px;
-    margin-top:20px;
-    border-width:0px;
+main ul li:nth-of-type(2n) a {
+  --hue: var(--altHue);
 }
 
-#logo{
-    margin:0px;
-    border-width:0px;
-    width:400px;
-    background:none;
+main ul li a:hover {
+  --alpha: .2;
 }
 
-#dashboard{
-    width:100%;
-    margin:0 auto;
-    clear:left;
-    height:100px;
-    text-align: center;
+main a:link,
+main a:visited,
+main a:active,
+main a:hover {
+  text-decoration: none;
 }
 
-/* Dashboard Navigation */
-
-#nav{
-    padding:0;
-    list-style: none;
-    font-size:14px;
-    display: inline-block;
+a:link,
+a:visited,
+a:active,
+a:hover {
+  color: rgb(15, 15, 15);
+  transition: color .2s;
 }
 
-#nav a{
-    text-decoration:none;
-    outline:none;
+.without-english-version {
+  display: none;
 }
 
-#nav li{
-    float:left;
-    width:300px;
-    height:85px;
-    position:relative;
-    cursor:pointer;
+@media screen and (max-width: 850px) {
+  body {
+    background: url(../images/square_bg.png) repeat top left;
+  }
+
+  main ul {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  main ul li:nth-of-type(2n) a {
+    --hue: var(--baseHue)
+  }
+
+  main ul li:nth-of-type(4n + 1) a,
+  main ul li:nth-of-type(4n + 4) a {
+    --hue: var(--altHue)
+  }
 }
 
-#nav li > a{
-    position:absolute;
-    top:0px;
-    left:0px;
-    width:100%;
-    height:85px;
-    z-index:12;
-    background: rgb(0,0,0) transparent;
-    background: rgba(0,0,0,0.2);
-    -moz-box-shadow:1px 2px 2px #fff inset;
-    -webkit-box-shadow:0px 0px 2px #fff inset;
-    box-shadow:1px 2px 2px #fff inset;
-}
+@media screen and (max-width: 530px) {
+  body {
+    padding: 1rem;
+  }
 
-#nav li .step {
-    padding-left: 0.5em;
-    padding-top: 1.5em;
-    font-size: 1.5em;
-    font-weight: bold;
-    color: #666666;
-}
+  main ul {
+    grid-template-columns: 1fr;
+  }
 
-#nav li span.nav_wrap{
-    position:absolute;
-    top:25px;
-    left:0px;
-    height:60px;
-    z-index:15;
-    margin-left:5%;
-    width:90%;
-}
-#nav li span.nav_active{
-    position:absolute;
-    background:#111;
-    top:85px;
-    width:300px;
-    height:0px;
-    left:0px;
-    z-index:14;
+  main ul li:nth-of-type(4n + 1) a,
+  main ul li:nth-of-type(4n + 4) a {
+    --hue: var(--baseHue)
+  }
 
-    background:#000000;
-}
+  main ul li:nth-of-type(2n) a {
+    --hue: var(--altHue)
+  }
 
-#nav li span span.nav_link,
-#nav li span span.nav_descr,
-#nav li div.nav_box a{
-    text-transform:uppercase;
-    width:100%;
-    text-align:center;
-}
-
-#nav li span span.nav_link{
-    color:#000;
-    font-size:24px;
-    float:left;
-    clear:both;
-    text-align:center;
-    text-shadow:1px 1px 1px #FFF;
-}
-#nav li span span.nav_descr{
-    color:#0B75AF;
-    float:left;
-    clear:both;
-    font-size:10px;
-    letter-spacing:1px;
-    width:100%;
-}
-
-/* DEV CUT */
-
-#nav li div.nav_box{
-    display:block;
-    position:absolute;
-    width:280px;
-    overflow:hidden;
-    height:200px;
-    top:85px;
-    left:0px;
-    display:none;
-    background:#000000;
-
-    padding-left:20px;
-}
-#nav li div.nav_box a{
-    float:left;
-    clear:both;
-    line-height:30px;
-    color:#0B75AF;
-    text-align:left;
-}
-#nav li div.nav_box a:first-child{
-    margin-top:15px;
-}
-#nav li div.nav_box a:hover{
-    color:#fff;
-}
-
-#nav li:hover .nav_link {
-    color:#FFFFFF;
-    text-shadow:1px 1px 1px #000000;
-}
-
-#dashboard ul
-{
-    max-width: 1200px;
-    height:50px;
-    padding:12px 0 0 0;
-    list-style-type: none;
-    text-align: left;
-}
-
-#dashboard ul li:first-child {
-    border-left:none;
-}
-
-#dashboard ul li {
-    display: inline;
-    padding:20px 0 0 0;
-}
-
-#dashboard ul li a {
-    font-size:13px;
-    line-height:1.5em;
-    font-weight:bold;
-    color:#7d838b;
-    text-decoration:none;
-}
-
-#dashboard ul li a:hover { 
-    text-decoration:none;
-    color:#bbc0c7;
-}
-
-/* Footer */
-
-#reference{
-    position:fixed;
-    left:10px;
-    bottom:10px;
-    font-size:12px;
-    color:#444;
-}
-#reference a{
-    color:#222;
-    text-transform:uppercase;
-    text-decoration:none;
-    text-shadow:1px 1px 1px #fff;
-}
-#reference a:hover{
-    color:#000;
-    text-decoration:underline;
-}
+  main ul li a {
+    padding: 1rem;
+  }
+}

eet/english.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+
+        <title>EETs | Kurzlinks</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<meta name="description" content="Kurzlinks zum Studium rund um die Fakult&auml;t WIAI an der Universit&auml;t Bamberg" />
+        <meta name="keywords" content="Bamberg, Uni, Universit&auml;t, WIAI, Wirtschaftsinformatik, Angewandte Informatik, Community, WIAI Community, Fachschaft WIAI, Fachschaft"/>
+
+        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+        <link rel="stylesheet" href="./css/style.css">
+
+    </head>
+    <body>
+        <header>
+            <h1>Introductory Days for First Semester Students</h1>
+            Overview of useful web pages for studying in Bamberg
+        </header>
+        <main>
+            <ul>
+                <li>
+                    <a target="_blank" href="https://www.uni-bamberg.de/en/wiai/fs/">
+                        <h2>Student Association</h2>
+                        <p>Opening hours, contact information, services (tutorials and exam archive) and events</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://www.uni-bamberg.de/en/wiai/">
+                        <h2>WIAI Faculty</h2>
+                        <p>Study paths and subjects, regulations, module guides and Career &amp; International Center</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://zul.zuv.uni-bamberg.de/qisserver/rds?state=user&type=0&noDBAction=y&init=y">
+                        <h2>Student Office Online Services</h2>
+                        <p>Certificate of enrollment, address editing and parking permits for the Park &amp; Ride</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://fn2stud.zuv.uni-bamberg.de/FN2AUTH/FN2AuthServlet?op=Login">
+                        <h2>FlexNow</h2>
+                        <p>Exam and lecture registration, grades list, exam dates and places as well as TAN lists</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="http://vc.uni-bamberg.de">
+                        <h2>Virtual Campus</h2>
+                        <p>Online courses, study material and forums for each lecture</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="http://univis.uni-bamberg.de">
+                        <h2>UnivIS</h2>
+                        <p>Schedule creation and index of all lectures, rooms and university employees (unfortunately German only)</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://katalog.ub.uni-bamberg.de/ubg-www/Katalog/TouchPoint_en.html">
+                        <h2>Library</h2>
+                        <p>Catalog, book preorders (including delivery to your university site) and online full-text volumes</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://o365.uni-bamberg.de">
+                        <h2>Email and MS Office</h2>
+                        <p>"Office 365" web version including Word, Excel, Powerpoint etc.</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://mailex.uni-bamberg.de">
+                        <h2>Alternative Email System</h2>
+                        <p>Login for the university's alternative email system (switching is possible in the IAM Portal)</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://icprint.uni-bamberg.de/index.php?lang=uk">
+                        <h2>Printing</h2>
+                        <p>Overview page listing ongoing and waiting printing jobs as well as an option to scan documents using icprint</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://www.studentenwerk-wuerzburg.de/bamberg/essen-trinken/mensen.html">
+                        <h2>Canteens</h2>
+                        <p>Menu and opening hours of the university's canteens</p>
+                    </a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://iam.uni-bamberg.de/OGiTiX/unimate/Default.aspx?page=WorkflowList&key=5CD83B366DC04DE8B4471D84D195DDAC00000003">
+                        <h2>IAM Portal</h2>
+                        <p>Email forwarding configuration, switching the email system and password resets (unfortunately German only)</p>
+                    </a>
+                </li>
+                <li class="without-english-version">
+                    <a target="_blank" href="http://www.feki.de">
+                        <h2>Feki.de</h2>
+                        <p>Quicklinks, Informationen rund ums Studium, Vereinsblog, Kellerguide und Mensaplan</p>
+                    </a>
+                </li>
+            </ul>
+        </main>
+
+        <footer>
+            &copy; Fachschaft WIAI - 2013 to 2018 (<a href="index.html">Deutsche Version</a>)
+        </footer>
+
+    </body>
+</html>​

eet/index.html

@@ -1,145 +1,103 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<html>
+<!DOCTYPE html>
+<html lang="de">
     <head>
-        <title>EET</title>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-		<meta name="description" content="EET im SS13 zum Studium rund um die Fakult&auml;t WIAI an der Universit&auml;t Bamberg" />
-		<meta name="keywords" content="Bamberg, Uni, Universit&auml;t, WIAI, Wirtschaftsinformatik, Angewandte Informatik, Community, WIAI Community, Fachschaft WIAI, Fachschaft"/>
-		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-		
-		<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen"/>
-		
+
+        <title>EETs | Kurzlinks</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<meta name="description" content="Kurzlinks zum Studium rund um die Fakult&auml;t WIAI an der Universit&auml;t Bamberg" />
+        <meta name="keywords" content="Bamberg, Uni, Universit&auml;t, WIAI, Wirtschaftsinformatik, Angewandte Informatik, Community, WIAI Community, Fachschaft WIAI, Fachschaft"/>
+
+        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+        <link rel="stylesheet" href="./css/style.css">
+
     </head>
     <body>
-        <div id="header">
-            <h1 class="pageHeader">Fachschaft WIAI</h1>
-            Erstsemester Einführungstage
-        </div>
-        <div id="centerhelp"></div>
-        <div id="dashboard">
-            <ul id="nav">
+        <header>
+            <h1>Erstsemester-Einführungstage</h1>
+            Übersicht über die Portale zum Studium in Bamberg
+        </header>
+        <main>
+            <ul>
                 <li>
-                    <div class="step">1:</div>
-                    <a class="navbg" target="_blank" href="https://wiai.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">WIAI.de</span>
-                            <span class="nav_descr">Portal der Fachschaft</span>
-                        </span>
+                    <a target="_blank" href="https://wiai.de">
+                        <h2>WIAI.de</h2>
+                        <p>Webportal der Fachschaft mit Links zur Fakultäts- und Fachschaftsseite sowie zu WIAI.community</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">2:</div>
-                    <a class="navbg" target="_blank" href="http://www.feki.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Feki.de</span>
-                            <span class="nav_descr">Quick links</span>
-                        </span>
+                    <a target="_blank" href="http://www.feki.de">
+                        <h2>Feki.de</h2>
+                        <p>Quicklinks, Informationen rund ums Studium, Vereinsblog, Kellerguide und Mensaplan</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">3:</div>
-                    <a class="navbg" target="_blank" href="https://o365.uni-bamberg.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Email</span>
-                            <span class="nav_descr">Office 365</span>
-                        </span>
+                    <a target="_blank" href="http://zul.zuv.uni-bamberg.de">
+                        <h2>Studierendenkanzlei Online</h2>
+                        <p>Bescheinigungen für Studium, BAföG und die Hochschulwahl, Adressen und Parkausweise</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">4:</div>
-                    <a class="navbg" target="_blank" href="http://zul.zuv.uni-bamberg.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Onlinedienste</span>
-                            <span class="nav_descr">Bescheinigungen, etc.</span>
-                        </span>
+                    <a target="_blank" href="https://fn2stud.zuv.uni-bamberg.de/FN2AUTH/FN2AuthServlet?op=Login">
+                        <h2>FlexNow</h2>
+                        <p>Anmeldung zu Prüfungen und Lehrveranstaltungen, Prüfungstermine, Notenübersicht und TAN-Listen</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">5:</div>
-                    <a class="navbg" target="_blank" href="http://www.uni-bamberg.de/pruefungsamt/flexnow/">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Flexnow</span>
-                            <span class="nav_descr">Prüfungsanmeldung, Noten</span>
-                        </span>
+                    <a target="_blank" href="http://vc.uni-bamberg.de">
+                        <h2>Virtueller Campus</h2>
+                        <p>Onlinekurse, Vorlesungsunterlagen und Foren zu den einzelnen Veranstaltungen</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">6:</div>
-                    <a class="navbg" target="_blank" href="http://vc.uni-bamberg.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">VC</span>
-                            <span class="nav_descr">Kurse, Vorlesungsunterlagen</span>
-                        </span>
+                    <a target="_blank" href="http://univis.uni-bamberg.de">
+                        <h2>UnivIS</h2>
+                        <p>Vorlesungsverzeichnis, Stundenplanerstellung und Verzeichnis von Räumen und Personen</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">7:</div>
-                    <a class="navbg" target="_blank" href="http://univis.uni-bamberg.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">UnivIS</span>
-                            <span class="nav_descr">Vorlesungsverzeichnis</span>
-                        </span>
+                    <a target="_blank" href="https://katalog.ub.uni-bamberg.de">
+                        <h2>Bibliothek</h2>
+                        <p>Literatursuche, Vorbestellung an verschiedene Standorte und Onlineexemplare im Volltext</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">8:</div>
-                    <a class="navbg" target="_blank" href="https://katalog.ub.uni-bamberg.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Bibliothek</span>
-                            <span class="nav_descr">Literatursuche</span>
-                        </span>
+                    <a target="_blank" href="https://o365.uni-bamberg.de">
+                        <h2>Email und MS Office</h2>
+                        <p>Webversion des Microsoft-Softwaresuite "Office 365" mit Outlook, Word, Excel, Powerpoint etc.</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">9:</div>
-                    <a class="navbg" target="_blank" href="http://icprint.uni-bamberg.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Drucken</span>
-                            <span class="nav_descr">Drucken und scannen</span>
-                        </span>
+                    <a target="_blank" href="https://mailex.uni-bamberg.de">
+                        <h2>Alternatives Emailsystem</h2>
+                        <p>Login für das alternative Email-System der Uni (Wechsel über das IAM-Portal möglich)</p>
                     </a>
                 </li>
                 <li>
-                    <div class="step">10:</div>
-                    <a class="navbg" target="_blank" href="http://www.studentenwerk-wuerzburg.de/bamberg/essen-trinken/speiseplaene.html?tx_thmensamenu_pi2%5Bmensen%5D=3&tx_thmensamenu_pi2%5Baction%5D=show&tx_thmensamenu_pi2%5Bcontroller%5D=Speiseplan&cHash=c3fe5ebb35e5fba3794f01878e798b7c">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Mensa</span>
-                            <span class="nav_descr">Speiseplan</span>
-                        </span>
+                    <a target="_blank" href="http://icprint.uni-bamberg.de">
+                        <h2>Drucken</h2>
+                        <p>Übersicht über ausstehende Druckjobs und Scannen mittels icprint</p>
                     </a>
                 </li>
-                
-
-
-<li>
-                    <div class="step">11:</div>
-                    <a class="navbg" target="_blank" href="https://mailex.uni-bamberg.de">
-                        <span class="nav_wrap">
-                            <span class="nav_link">Email</span>
-                            <span class="nav_descr">Alternatives Email System</span>
-                        </span>
+                <li>
+                    <a target="_blank" href="https://www.studentenwerk-wuerzburg.de/bamberg/essen-trinken/mensen.html">
+                        <h2>Mensa</h2>
+                        <p>Speisepläne und Öffnungszeiten für die verschiedenen Mensen der Universität</p>
                     </a>
                 </li>
-
-
-<li>
-                    <div class="step">12:</div>
-                    <a class="navbg" target="_blank" href="https://iam.uni-bamberg.de/OGiTiX/unimate/Default.aspx?page=WorkflowList&key=5CD83B366DC04DE8B4471D84D195DDAC00000003">
-                        <span class="nav_wrap">
-                            <span class="nav_link">IAM-Portal</span>
-                            <span class="nav_descr">Email-Weiterleitung</span>
-                        </span>
+                <li>
+                    <a target="_blank" href="https://iam.uni-bamberg.de/OGiTiX/unimate/Default.aspx?page=WorkflowList&key=5CD83B366DC04DE8B4471D84D195DDAC00000003">
+                        <h2>IAM-Portal</h2>
+                        <p>Verschiedene Services: Emailweiterleitungen einrichten, das Mailsystem wechseln und Passwörter zurücksetzen</p>
                     </a>
                 </li>
-
             </ul>
+        </main>
 
-        </div>
+        <footer>
+            &copy; Fachschaft WIAI - 2013 bis 2018 (<a href="english.html">English version</a>)
+        </footer>
 
-        <div id="reference">
-            &copy; Fachschaft WIAI 2013-2017
-        </div>  
-            
     </body>
 </html>​