Intermediate

css/help.css

+img{
+    padding-bottom: 20px;
+}

css/m4lab.css

+.trennung {
+  -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+dl {
+	text-indent: 0em;
+}
+
+.legals li {display: inline-block;
+list-style-type: none;
+padding-bottom: 0px;}
+
+.footer-items li {display: inline-block;
+list-style-type: none;}
+
+#navelemente {display: inline-block;
+list-style-type: none;}
+
+#socialmediabuttons {text-align: center;
+color: darkgrey;
+font-size: 2em;
+padding-left: 1em;
+padding-right: 1em;}
+
+.contactrow{
+padding-left: 15px;
+padding-right:5px;
+}
+
+.contact-lower{
+display: inline-block;
+}
+
+.footer-unten a {color: darkgrey;
+}
+.footer-unten a:hover {color: black;
+}
+.footer-unten {color: darkgrey;
+}
+#socialmediabuttons a {
+color: darkgrey;
+}
+
+#socialmediabuttons a:hover {color: black;
+}
+
+.navbar-header li {display: inline-block;
+padding-right: 0.5em;
+vertical-align: bottom;
+}
+
+.navbar-header text {color: darkgrey;
+vertical-align: bottom;
+}
+
+.navbar-header img {height: 6em;
+padding-right: 0.5em;
+padding-bottom: 1em;
+/*border-color: black;
+border-style: dashed;
+border-width: thick;*/}
+
+.nav-item {/*border-color: black;
+border-style: dashed;
+border-width: thick;
+padding: 0px;*/}
+
+.nav-item-suchfeld {padding-bottom: 0.45em;
+color: darkgrey;}
+
+#sf_submit {vertical-align: middle;}
+
+
+.col-md-4 {vertical-align: bottom;}
+
+#Projektliste {
+  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+#Projektliste td, #customers th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+#Projektliste tr:nth-child(even){background-color: #f2f2f2;}
+
+#Projektliste tr:hover {background-color: #ddd;}
+
+#Projektliste th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #993399;
+  color: white;
+}
+
+#Projektliste button {
+  border: solid thin;
+	border-radius: 8px;
+  border-color: #993399;
+  color: black;
+  padding: 5px 5px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1ep;
+  font-weight: thin;
+}
+
+h1, .h1 {
+	font-weight: bold;
+}
+
+.nav-link {
+	color: darkgrey;
+}
+
+.nav-link:hover, .nav-link:focus {
+	color: black;
+}
+
+.projectimg {
+  display: inline-block;
+  float: ;
+  background-color: none;
+  width: 100%;
+  height: auto;
+  padding-bottom: 20px;
+  object-fit: contain;
+}
+
+.Projektlogos {
+  display: inline-block;
+  float: center;
+  background-color: white;
+  width: 100%;
+  height: auto;
+  padding: 10px;
+  object-fit: contain;
+  margin-bottom: 20px;
+}
+
+.Downloads {
+  color: white;
+  display: inline-block;
+  float: center;
+  background-color: darkgray;
+  width: 100%;
+  height: auto;
+  padding: 10px;
+  object-fit: contain;
+  margin-bottom: 20px;
+}
+
+.Downloads a:link {
+  color: black;
+}
+
+.Downloads a:hover {
+  color: white;
+}
+
+@media screen and (max-width: 700px) {
+  .row, .navbar {   
+    flex-direction: column;
+  }
+}
+
+.d-flex {
+	flex-direction: row;
+	flex-grow: 1;
+}
+
+#Textblock-startseite {background-color:#993399;
+color: white;
+padding-left: 50px;
+padding-right: 50px;
+padding-bottom: 15px;
+padding-top: 15px;
+}
+
+#Textblock-startseite h1, .h1 {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: whitesmoke;
+  font-variant-caps:all-petite-caps;
+  line-height: 85%;}
+
+#Textblock-startseite h2, .h2 {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: white;
+}
+
+#Textblock-startseite a:link {background-color: white;
+	color: #993399;
+	font-weight: bold;
+}
+#Textblock-startseite a:hover {color: darkgray;
+}
+
+
+#Textblock-startseite span {background-color: white;
+	color: #993399;
+	font-weight: bold;
+}
+#Textblock-startseite span:hover {color: darkgray;
+}
+
+.Bildunterschrift a:link {
+  font-size: 1rem;
+  font-weight: bold;
+	font-style: italic;
+  color: black;
+  line-height: 85%;
+padding-top: 1em;}
+
+.Bildunterschrift a:hover {
+  font-size: 1rem;
+  font-weight: bold;
+	font-style: italic;
+  color: dimgray;
+  line-height: 85%;
+padding-top: 1em;}
+
+.flex-container {
+	display: flex;
+	flex-direction: row;
+flex-grow: 1;
+justify-content:space-evenly;}
+
+.row {  
+  display: flex;
+  flex-wrap: wrap;}
+	
+.main {
+  flex: 70%;
+  background-color: white;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	padding-left: 75px;
+	padding-right: 30px;
+}
+
+.main p {
+  text-align: justify;
+}
+
+.side {
+  flex: 30%;
+  background-color: #f1f1f1;
+  padding: 20px;
+  padding-right: 60px;
+}
+
+.card {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+
+.card-body {
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1.25rem;
+}
+
+.card-header {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.card-header:first-child {
+  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+}
+
+.card-header + .list-group .list-group-item:first-child {
+  border-top: 0;
+}
+
+.help .card-title > a:before {
+  float: right !important;
+  content: "-";
+  padding-right: 5px;
+}
+.help .card-title > a.collapsed:before {
+    float: right !important;
+    content: "+";
+}
+.help h3 > a {
+  color: #708090;
+  text-decoration: none;
+  display: block;
+}
+.help a {
+    display: inline;
+}
+.help .card > .card-header {
+  color: #fff;
+}
+.card-title {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+#infoicon {
+  color: #708090;
+}
+.heading {
+  color: #708090;
+}

help/gitlab.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Hilfe: Gitlab</title>
+    <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/fonts/font-awesome.min.css">
+    <link rel="stylesheet" href="/fonts/ionicons.min.css">
+    <link rel="stylesheet" href="/css/Testimonials.css">
+    <link rel="stylesheet" href="/css/help.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+</head>
+
+<body>
+
+    <div style="background-color: #dadada;">
+        
+        <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+            <div class="row">
+            </div>
+       </div> 
+        <div id="Gitlab_Text" style="margin-top: 40px;margin-bottom: 30px;">
+            <div class="container" style="background-color: #ffffff;">
+                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                    <div class="col-lg-12">
+                        <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab</strong></h2>
+                    </div>
+                    <div class="col-auto flex-row flex-grow-1 flex-fill" style="background-color: #ffffff;">
+                        <p><a href="https://de.wikipedia.org/wiki/GitLab">GitLab</a> ist eine umfangreiche Webanwendung zur Versionsverwaltung für Softwareprojekte auf Basis von <a href="https://de.wikipedia.org/wiki/Git">Git</a> die auch Wiki-Funktionen und Issue Tracking bietet. Das Transferportal der HFT-Stuttgart betreibt eine eigene GitLab-Instanz für die Hochschule für Technik Stuttgart und ihre Kooperationspartner unter einer Open-Access-Lizenz. 
+                        </p>
+                    </div>
+                    <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
+                            role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><strong>Zugriff auf Gitlab</strong></a>
+                </div>
+            </div>
+        </div>
+        <div id="help_Text" style="margin-top: 10px;margin-bottom: 30px;">
+            <div class="container" style="background-color: #ffffff;">
+                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                    <div class="col-lg-12">
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Hilfestellung zu Gitlab</strong></h2> 
+                    </div>
+                    <div class="col-auto" style="background-color: #ffffff;">
+                        <div class="help">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
+                                        <small>Möchten Sie die Projektinhalte ansehen oder herunterladen?</small></a>
+                                    </h3>
+                                </div>
+                                <div id="collapse1" class="card-body collapse" style="">
+                                    <p>
+                                        Dann klicken Sie auf diesen
+                                            <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects"><i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>
+                                        um die Liste aller im Gitlab erfassten Projekte zu sehen. Vor dort können Sie dann auf die einzelnen
+                                        Projekte zugreifen.
+                                        Ein Anmelden am Portal ist dazu nicht nötig.
+                                    </p>
+                                </div>
+                            </div>
+                            <br/>
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
+                                            <small>Möchten Sie zu einem Projekt beitragen?</small></a>
+                                    </h3>
+                                </div>
+                                <div id="collapse2" class="card-body collapse" style="">
+                                    <p>
+                                        Sie können mittels Issues dem Projekteigentümer eine Rückmeldung geben bzw. einen Fehler melden.
+                                        Darüberhinaus können Sie sich auch aktiv beteiligen. Dazu müssen Sie im Portal als Nutzer
+                                        registriert sein.
+                                    </p>
+                                    <p>
+                                        Wenn Sie noch kein Benutzerkonto haben, klicken Sie bitte oben auf den Link Benutzerkonto und folgen
+                                        Sie dem System durch die Registrierungsprozedur.
+                                    </p>
+                                    <p>
+                                        Haben Sie ein Benutzerkonto, befolgen Sie bitte folgende Schritte:
+                                    </p>
+                                    <ol>
+                                        <li>
+                                            Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">
+                                                <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu
+                                            gelangen.
+                                        </li>
+                                        <li>
+                                            Melden Sie sich bei Gitlab an, indem Sie im Gitlab auf den Link Sign-In klicken.
+                                        </li>
+                                        <li>
+                                            Sie werden dann auf eine Anmeldeseite von unserem Portal geführt. Geben Sie dort bitte ihre
+                                            Benutzerdaten vom Portal ein.
+                                        </li>
+                                        <li>
+                                            Nach erfolgreichem Anmelden werden Sie zum Gitlab zurückgeführt.
+                                        </li>
+                                        <li>
+                                            Navigieren Sie dann zum Projekt Ihrer Wahl.
+                                        </li>
+                                        <li>
+                                            Abhängig davon wie der Projekteigentümer das Projekt konfiguriert hat, können Sie entweder
+                                            direkt loslegen, oder Sie müssen zunächst noch beim Projekteigentümer Zugang zum Projekt
+                                            anfragen, indem Sie im Gitlab bei der entsprechende Projektseite auf den Link Request Access
+                                            klicken.
+                                        </li>
+                                    </ol>
+                                </div>
+                            </div>
+                            <br/>
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
+                                            <small>Möchten Sie selbst ein Projekt anlegen, um es der Öffentlichkeit
+                                            bereitzustellen?</small></a>
+                                    </h3>
+                                </div>
+                                <div id="collapse3" class="card-body collapse" style="">
+                                <p>
+                                    Vorraussetzung dazu ist, dass Sie aktives oder ehemaliges Mitglied der Hochschule für Technik sind,
+                                    d.h. eine (noch) gültige HFT-Emailadresse haben, und zudem im Portal als Nutzer registriert sein.
+                                </p>
+                                <p>
+                                    Wenn Sie noch kein Benutzerkonto haben, klicken Sie bitte oben auf den Link Benutzerkonto und folgen
+                                    Sie dem System durch die Registrierungsprozedur.
+                                </p>
+                                <p>
+                                    Haben Sie ein Benutzerkonto, befolgen Sie bitte folgende Schritte:
+                                </p>
+                                <ol>
+                                    <li>
+                                        Folgen Sie dem <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects">
+                                        <i class="fas fa-chevron-right">Link zu den Gitlab-Projekten</i></a>, um zum Gitlab zu
+                                        gelangen.
+                                    </li>
+                                    <li>
+                                        Melden Sie sich bei Gitlab an, indem Sie im Gitlab auf den Link Sign-In klicken.
+                                    </li>
+                                    <li>
+                                        Sie werden dann auf eine Anmeldeseite von unserem Portal geführt. Geben Sie dort bitte ihre
+                                        Benutzerdaten vom Portal ein.
+                                    </li>
+                                    <li>
+                                        Nach erfolgreichem Anmelden werden Sie zum Gitlab zurückgeführt.
+                                    </li>
+                                    <li>
+                                        Erstellen Sie dann in Gitlab ein neues Projekt durch Klicken auf den grünen New Project-Knopf
+                                        und anschließendem Befolgen der Eingabemaske von Gitlab.
+                                    </li>
+                                </ol>
+                                <p>
+                                    Weitere Hilfestellung zum Anlegen von Projekten in Gitlab finden Sie in der <a href="https://docs.gitlab.com/ee/gitlab-basics/create-project.html" target="_blank">Gitlab-Dokumentation</a>.
+                                </p>
+                                <p>
+                                    Hinweis: Um Inhalte zum Gitlab "pushen" zu können, verwendet die Gitlab-Instanz unseres Portals die
+                                    s.g. "SSH Keys".
+                                    Weitere Informationen dazu finden Sie in der <a href="https://transfer.hft-stuttgart.de/gitlab/help/ssh/README" target="_blank">
+                                    <i class="fas fa-chevron-right">Gitlab-Dokumentation zu SSH Keys</i></a>.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+        <div class="row">
+        </div>
+    </div> 
+</div>
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="/js/headfoot.js"></script>
+</body>
+
+</html>

help/index.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Hilfe</title>
+    <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/fonts/font-awesome.min.css">
+    <link rel="stylesheet" href="/fonts/ionicons.min.css">
+    <link rel="stylesheet" href="/css/Testimonials.css">
+    <link rel="stylesheet" href="/css/help.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+</head>
+
+<body>
+
+    <div style="background-color: #dadada;">
+        <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+            <div class="row">
+                <div class="col-md-12">
+                    <h4 class="text-center">Hilfethemen Übersicht</h4>
+                    
+                </div>
+            </div>
+        </div>
+        <div id="gitlab" style="margin-top: 40px;margin-bottom: 30px;">
+            <div class="container" style="background-color: #ffffff;">
+                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                    <div class="col-lg-12">
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Gitlab</strong></h2>
+                    </div>
+                    <div class="col-auto" style="background-color: #ffffff;">
+                        <ul>
+                            <li>
+                                <a href="/help/gitlab.html" target="_blank"> Projektverwaltung mittels Gitlab </a>
+                            </li>
+                            <li>
+                                <a href="/help/gitlab-pages.html" target="_blank">Projektwebseiten mittels Gitlab-pages </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <div id="videoconference" style="margin-top: 10px;margin-bottom: 30px;">
+            <div class="container" style="background-color: #ffffff;">
+                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                    <div class="col-lg-12">
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Videokonferenzen</strong></h2>
+                    </div>
+                    <div class="col-auto" style="background-color: #ffffff;">
+                        <ul>
+                            <li>
+                                <a href="/help/jitsi.html" target="_blank"> Videokonferenzen über Jitsi</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div id="videoconference" style="margin-top: 10px;margin-bottom: 30px;">
+            <div class="container" style="background-color: #ffffff;">
+                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                    <div class="col-lg-12">
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Mailinglisten</strong></h2>
+                    </div>
+                    <div class="col-auto" style="background-color: #ffffff;">
+                        <ul>
+                            <li>
+                                <a href="/help/mailinglists.html" target="_blank"> Mailinglisten erstellen und verwalten</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="/js/headfoot.js"></script>
+</body>
+
+</html>

help/jitsi.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Hilfe: Jitsi</title>
+    <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/fonts/font-awesome.min.css">
+    <link rel="stylesheet" href="/fonts/ionicons.min.css">
+    <link rel="stylesheet" href="/css/Testimonials.css">
+    <link rel="stylesheet" href="/css/help.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+</head>
+
+<body>
+
+    <div style="background-color: #dadada;">
+       <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+            <div class="row">
+            </div>
+       </div> 
+        <div id="Jitsi" style="margin-top: 40px;margin-bottom: 30px;">
+            <div class="container" style="background-color: #ffffff;">
+                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                    <div class="col-lg-12">
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Jitsi</strong></h2>
+                    </div>
+                    <div class="col-auto" style="background-color: #ffffff;">
+                        <p> 
+                            Jitsi ist ein Open-Source-Videokonferenz-System für HFT-interne und externe Nutzer. Es ermöglicht, Videokonferenzen direkt im Browser abzuhalten. Wir empfehlen hierbei die Nutzung von Chrome auf einem Desktopsystem oder Laptop. Die Verwendung des Internet Explorers hierfür ist leider nicht möglich, da Jitsi über diesen nicht aufgerufen werden kann. Da die Daten-Hauptlast bei diesem System clientseitig getragen wird, raten wir von einer Nutzung auf mobilen Endgeräten ab. 
+                        </p>
+                    </div>
+                </div>
+                 <a class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto"
+                            role="button" style="background-color: #E0001B;" href="https://telemeeting.hft-stuttgart.de"><strong>Zugang über das Transferportal</strong></a>
+            </div>
+        </div>
+    
+        <div id="usage" style="margin-top: 10px;margin-bottom: 30px;">
+            <div class="container" style="background-color: #ffffff;">
+                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                    <div class="col-lg-12">
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Jitsi verwenden</strong></h2>
+                    </div>
+                    <div class="col-auto" style="background-color: #ffffff;">
+                        <ol>
+                            <li>Beim Transferportal als Organisator anmelden</li>
+                            <li>Videokonferenz über Jitsi eröffnen</li>
+                            <li>Eingabe eines Namens für das Meeting<br></li>
+                            <li>Start der Konferenz<br></li>
+                            <li>Einladung weiterer Teilnehmer über den generierten Link<br></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+      
+      <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+            <div class="row">
+            </div>
+       </div> 
+</div>
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="/js/headfoot.js"></script>
+</body>
+
+</html>