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>