styling changes

bfefde0a · Varun Srivastava · 71de19e1 · bfefde0a · bfefde0a · bfefde0a
Commit bfefde0a authored 4 years ago by Varun Srivastava
Hide whitespace changes
Inline Side-by-side

Showing

with 380 additions and 183 deletions
+380 -183
--- a/bwcloud.html
+++ b/bwcloud.html
@@ -17,14 +17,14 @@
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/bwcloud.png" width="100%"></div>
+                <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/bwcloud.png" width="100%"></div>
            </div>
        </div>
    </div>
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 30px;">
+                <div class="col-md-12 margin_bottom_30">
                    <h4 class="text-center">Die Universität Karlsruhe bietet für teilnehmende Hochschulen und Universitäten in Baden-Württemberg den Dienst bwSync&amp;Share an.
                    </h4>
                </div>
@@ -34,17 +34,17 @@
    <div>
-        <div id="Jira Text" style="background-color: #dadada;margin-top: 40px;">
+        <div id="Jira Text"class="background_dadada margin_top_40">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
-                    <div class="col-lg-12" style="background-color: #feffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>bwSync&amp;Share</strong></h2>
+                        <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15"><strong>bwSync&amp;Share</strong></h2>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1" style="background-color: #ffffff;">
+                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
                        <p>bwSync&amp;Share bietet die Möglichkeit, Dateien miteinenader zu teilen und zu synchronisieren.</p>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2" style="background-color: #ffffff;">
+                    <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
-                        <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="justify-content-between order-2">
                            <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-left align-items-md-start justify-content-lg-start">
                            Der Dienst baut dabei auf NextCloud und OnlyOffice auf und bietet Clienten für alle gängigen Betriebssysteme (Windows, Mac, Linux, Android und iOS)
                            </p>
@@ -53,22 +53,22 @@
                </div>
            </div>
        </div>
-        <div id="Access_Text" style="background-color: #dadada;margin-top: 0px;">
+        <div id="Access_Text" class="background_dadada m_top_0">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
-                    <div class="col-lg-12" style="background-color: #ffffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Zugang</strong></h2>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Zugang</strong></h2>
                    </div>
-                    <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
+                    <div class="col-md-4 col-lg-6 background_ffffff">
                        <p>Der Zugang für teilnehmende Institutionen erfolgt über Shibboleth</p>
                        <p>Kooperationspartner, die nicht ans Shibboleth angeschlossen sind, können als Gäste registriert werden. Gäste können Dateien bearbeiten, haben aber keinen eigenen Speicherplatz.</p>
                    </div>
-                    <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
+                    <div class="col-md-4 col-lg-6 text-center background_ffffff">
-                        <div class="order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="order-2">
-                            <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von bwSync&amp;Share finden sich in der zugehörigen <a href="https://help.bwsyncandshare.kit.edu/" style="display: contents;">Benutzerdokumentation</a> </p>
+                            <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von bwSync&amp;Share finden sich in der zugehörigen <a href="https://help.bwsyncandshare.kit.edu/" class="display_contents">Benutzerdokumentation</a> </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"
+                        <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 background_e0001b"
-                            role="button" style="background-color: #E0001B;" href="https://bwsyncandshare.kit.edu/"><strong>Zugang zu bwSync&amp;Share</strong></a>
+                            role="button" href="https://bwsyncandshare.kit.edu/"><strong>Zugang zu bwSync&amp;Share</strong></a>
                    </div>
                </div>
            </div>

--- a/confluence.html
+++ b/confluence.html
@@ -17,14 +17,14 @@
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Wissensaustausch.jpg" width="100%"></div>
+                <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Wissensaustausch.jpg" width="100%"></div>
            </div>
        </div>
    </div>
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 30px;">
+                <div class="col-md-12 margin_bottom_30">
                    <h4 class="text-center">Das Transferportal bietet eine Möglichkeit für kollaborativen Wissensaustausch an. Dieses Angebot richtet sich insbesondere an Kollaborationsprojekte zwischen der HfT und externen Partnern.</h4>
                </div>
            </div>
@@ -33,18 +33,18 @@
    <div>
-        <div id="Confluence Text" style="background-color: #dadada;margin-top: 40px;">
+        <div id="Confluence Text" class="background_dadada margin_top_40">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
-                    <div class="col-lg-12" style="background-color: #feffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Confluence</strong></h2>
+                        <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15"><strong>Confluence</strong></h2>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1" style="background-color: #ffffff;">
+                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
                        <p>Confluence ist ein Wiki-System der Firma Atlassian, welches an der Hochschule für Technik zum Einsatz kommt.</p>
                        <p>Über das Transferportal bieten wir eine Instanz an, auf der Projekte Bereiche anlegen können, über die sie Informationen und Wissen innerhalb des Projektes vernetzen können.</p>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2" style="background-color: #ffffff;">
+                    <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
-                        <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="justify-content-between order-2">
                            <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-left align-items-md-start justify-content-lg-start">
                            Wichtige Features umfassen dabei:
                                <ul class="text-left">
@@ -54,26 +54,26 @@
                                    <li>Vernetzung mit unserem Werkzeug zum <a href="/jira.html">Aufgabenmanagement</a>
                                </ul>
                            </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"
+                        </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 background_e0001b"
-                            role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/confluence/"><strong>Zugang über das Transferportal</strong></a></div>
+                            role="button" href="https://transfer.hft-stuttgart.de/confluence/"><strong>Zugang über das Transferportal</strong></a></div>
                </div>
            </div>
        </div>
-        <div id="Access_Text" style="background-color: #dadada;margin-top: 0px;">
+        <div id="Access_Text" class="background_dadada m_top_0">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
-                    <div class="col-lg-12" style="background-color: #ffffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Zugang</strong></h2>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Zugang</strong></h2>
                    </div>
-                    <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
+                    <div class="col-md-4 col-lg-6 background_ffffff">
                        <p>Um Zugang zu Confluence zu erhalten, benötigen Sie einen Account am Portal. Dieser muss zunächst noch freigeschalten werden, wenden Sie sich dazu bitte an den Administrator.</p>
                        <p>Um einen Bereich für ein Projekt zu erhalten, wenden Sie sich bitte ebenfalls an den Administrator, der mit Ihnen dann das weitere Vorgehen abstimmen wird.</p>
                    </div>
-                    <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
+                    <div class="col-md-4 col-lg-6 text-center background_ffffff">
-                        <div class="order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="order-2">
                            <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von Confluence finden sich auf den <a href="https://confluence.atlassian.com/doc/confluence-data-center-and-server-documentation-135922.html">Seiten der Firma Atlassian</a></p>
-                        </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto" role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
+                        </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto background_e0001b" role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
                </div>
            </div>
        </div>

--- a/css/m4lab.css
+++ b/css/m4lab.css
@@ -149,7 +149,7 @@ h1, .h1 {
  float: center;
  background-color: darkgray;
  width: 100%;
-  height: auto;
+  height: 200px;
  padding: 10px;
  object-fit: contain;
  margin-bottom: 20px;
@@ -354,7 +354,6 @@ justify-content:space-evenly;}
  margin-bottom: 40px;
 }
 .m_top_0 {
  margin-top: 0px;
 }
@@ -367,8 +366,8 @@ justify-content:space-evenly;}
  padding-top: 20px;
 }
-.p_top_20 {
+.p_bottom_20 {
-  padding-top: 20px;
+  padding-bottom: 20px;
 }
 .p_bottom_20 {
@@ -376,7 +375,7 @@ justify-content:space-evenly;}
 }
 .p_top_15 {
-  padding-bottom: 15px;
+  padding-top: 15px;
 }
 .mailinglist_heading {
@@ -384,3 +383,208 @@ justify-content:space-evenly;}
  color: #708090;
 }
+.color_black {
+  color: #000000;
+}
+.color_red {
+  color:#ff0000;
+}
+.color_white {
+  color:#ffffff;
+}
+.display_none {
+  display: none;
+}
+.color_8a348b {
+  color: #8a348b;
+}
+.contact_foot_message {
+  background-color: #ffffff;
+  margin: 0px;
+  padding: 60px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.background_eaeaea {
+  background-color: #eaeaea;
+}
+.p_bottom_35 {
+  padding-bottom: 35px;
+}
+.contact_send_btn {
+  background-color: #8a348b;
+  color: #ffffff;
+}
+.m_top_25 {
+  margin-top: 25px;
+}
+.contact_footer {
+  background-color: #eaeaea;
+  padding: 80px;
+  padding-top: 0px;
+}
+.mailinglist_activetable {
+  align-items:flex-start;
+}
+.height_200 {
+  height: 200px;
+}
+.background_f1f1f1 {
+  background-color: #f1f1f1;
+}
+.project_overview {
+  float:right;
+  margin-left:30px;
+  margin-bottom:0px;
+  width:50%;
+}
+.width_18 {
+  width: 18rem;
+}
+.no_text_decoration {
+  text-decoration: none
+}
+.p_left_5 {
+  padding-left: 5px;
+}
+.p_right_5 {
+  padding-right: 5px;
+}
+.mailingList_text {
+  background-color: #dadada;
+  margin-top: 0px;
+}
+.color_708090 {
+  color: #708090;
+}
+.m_top_15 {
+  margin-top: 15px;
+}
+.mailingList_aboText {
+  background-color: #dadada;
+  margin-top: 40px;
+}
+.m_top_10 {
+  margin-top: 10px;
+}
+.m_left_35 {
+  margin-left: 35px;
+}
+.m_right_35 {
+  margin-right: 35px;
+}
+.videoconference_jitsi {
+  padding-right: 5px;
+  padding-left: 0px;
+  margin-top: 15px;
+}
+.videoconference_gotomeeting_text {
+  margin-bottom: 0;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.videoconference_jitsi_text {
+  margin-bottom: 0;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.videoconference_gotomeeting {
+  padding-right: 0px;
+  padding-left: 5px;
+  margin-top: 15px;
+}
+.width_309 {
+  width: 309px;
+}
+.videoconference_more_info {
+  background-color: #e4e4e4;
+  color: #595959;
+  padding-bottom: 6px;
+  width: 309px;
+  margin-right: 0;
+  margin-bottom: 15px;
+}
+.info_partizipation_text {
+  margin-bottom: 0;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.jisi_text {
+  margin-bottom: 0;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.display_contents {
+  display: contents;
+}
+.background_708090 {
+  background-color: #708090;
+}
+.m_0 {
+  margin: 0px;
+}
+.p_0 {
+  padding: 0px;
+}
+.p_top_0 {
+  padding-top: 0px;
+}
+.index_foot_message {
+  background-color: #ffffff;
+  margin: 0px;
+  padding: 60px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.index_neues_projekt {
+  background-color: #f2f2f2;
+  margin-top: 0px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.index_project_overview {
+  background-color: #E0001B;
+  filter: invert(0%);
+  color: white;
+}
\ No newline at end of file
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -55,7 +55,7 @@
                                        <small>Gitlab-pages Projekt erstellen</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse1" class="card-body collapse" style="">
+                                <div id="collapse1" class="card-body collapse">
                                    <p>
                                        Um ein eigenes Gitlab-pages Projekt zu erstellen und damit eine eigene Projektseite zu erstellen, führen Sie folgende Schritte aus:
                                    </p>
@@ -98,7 +98,7 @@
                                        <small>Gitlab-pages Projekt ändern</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse2" class="card-body collapse" style="">
+                                <div id="collapse2" class="card-body collapse">
                                    <p>
                                        Nachdem Ihr Projekt das erste Mal veröffentlicht wurde, möchten Sie sicherlich Änderungen an der Seite vornehmen. Dafür gehen Sie wie folgt vor:
                                        <ol>
@@ -139,7 +139,7 @@
                                        <small>Gitlab-pages Seite entfernen</small></a>
                                    </h3>
                                </div>
-                                <div id="collapsedel" class="card-body collapse" style="">
+                                <div id="collapsedel" class="card-body collapse">
                                    <p>
                                        Um Ihre gitlab-pages Seite zu entfernen, gibt es zwei Möglichkeiten. Sie können entweder das gesamte Projekt löschen, oder aber nur die öffentliche Seite, das Projekt aber behalten, um daran Änderungen vorzunehmen. Um nur die Seite, nicht aber das Projekt an sich zu löschen, gehen Sie wie folgt vor:
                                        <ol>
@@ -210,7 +210,7 @@
                                        <small>Erste Schritte</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse7" class="card-body collapse" style="">
+                                <div id="collapse7" class="card-body collapse">
                                    <p>
                                        Um unsere Vorlage zu benutzen, müssen Sie folgende Schritte ausführen:
                                    </p>
@@ -256,7 +256,7 @@
                                        <small>Logo hinzufügen</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse3" class="card-body collapse" style="">
+                                <div id="collapse3" class="card-body collapse">
                                    <p> Um ein eigenes Projektlogo zum Projekt hinzuzufügen, müssen Sie folgende Schritte ausführen: 
                                        <ol>
                                            <li>
@@ -292,7 +292,7 @@
                                        <small>Neue Seite hinzufügen</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse4" class="card-body collapse" style="">
+                                <div id="collapse4" class="card-body collapse">
                                    <p>
                                        Um Ihrem Projekt neue Seiten hinzuzufügen, führen Sie folgende Schritte aus:
                                        <ol>
@@ -356,7 +356,7 @@
                                        <small>Menü bearbeiten</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse5" class="card-body collapse" style="">
+                                <div id="collapse5" class="card-body collapse">
                                    <p>
                                        Wenn Sie das Menü am oberen Seitenrand bearbeiten wollen, führen Sie folgende Schritte durch:
                                        <ol>

--- a/help/gitlab.html
+++ b/help/gitlab.html
@@ -52,7 +52,7 @@
                                        <small>Möchten Sie die Projektinhalte ansehen oder herunterladen?</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse1" class="card-body collapse" style="">
+                                <div id="collapse1" class="card-body collapse">
                                    <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>
@@ -70,7 +70,7 @@
                                            <small>Möchten Sie zu einem Projekt beitragen?</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse2" class="card-body collapse" style="">
+                                <div id="collapse2" class="card-body collapse">
                                    <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
@@ -120,7 +120,7 @@
                                            bereitzustellen?</small></a>
                                    </h3>
                                </div>
-                                <div id="collapse3" class="card-body collapse" style="">
+                                <div id="collapse3" class="card-body collapse">
                                <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.

--- a/help/index.html
+++ b/help/index.html
@@ -16,8 +16,8 @@
 <body>
-    <div style="background-color: #dadada;">
+    <div class="background_dadada">
-        <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+        <div class="container background_ffffff margin_bottom_30">
            <div class="row">
                <div class="col-md-12">
                    <h4 class="text-center">Hilfethemen Übersicht</h4>
@@ -25,13 +25,13 @@
                </div>
            </div>
        </div>
-        <div id="gitlab" style="margin-top: 40px;margin-bottom: 30px;">
+        <div id="gitlab"  class="margin_top_40 margin_bottom_30">
-            <div class="container" style="background-color: #ffffff;">
+            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="m_bottom_0 p_top_20 p_bottom_20">
                    <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>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Gitlab</strong></h2>
                    </div>
-                    <div class="col-auto" style="background-color: #ffffff;">
+                    <div class="col-auto background_ffffff">
                        <ul>
                            <li>
                                <a href="/help/gitlab.html" target="_blank"> Projektverwaltung mittels Gitlab </a>
@@ -45,13 +45,13 @@
            </div>
        </div>
-        <div id="videoconference" style="margin-top: 10px;margin-bottom: 30px;">
+        <div id="videoconference" class="m_top_10 margin_bottom_30">
-            <div class="container" style="background-color: #ffffff;">
+            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="m_bottom_0 p_top_20 p_bottom_20">
                    <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>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Videokonferenzen</strong></h2>
                    </div>
-                    <div class="col-auto" style="background-color: #ffffff;">
+                    <div class="col-auto background_ffffff">
                        <ul>
                            <li>
                                <a href="/help/jitsi.html" target="_blank"> Videokonferenzen über Jitsi</a>
@@ -62,13 +62,13 @@
            </div>
        </div>
-        <div id="videoconference" style="margin-top: 10px;margin-bottom: 30px;">
+        <div id="videoconference" class="m_top_10 margin_bottom_30">
-            <div class="container" style="background-color: #ffffff;">
+            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="m_bottom_0 p_top_20 p_bottom_20">
                    <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>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Mailinglisten</strong></h2>
                    </div>
-                    <div class="col-auto" style="background-color: #ffffff;">
+                    <div class="col-auto background_ffffff">
                        <ul>
                            <li>
                                <a href="/help/mailinglists.html" target="_blank"> Mailinglisten erstellen und verwalten</a>

--- a/help/jitsi.html
+++ b/help/jitsi.html
@@ -16,35 +16,35 @@
 <body>
-    <div style="background-color: #dadada;">
+    <div class="background_dadada">
-       <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+       <div class="container background_ffffff margin_bottom_30">
            <div class="row">
            </div>
       </div> 
-        <div id="Jitsi" style="margin-top: 40px;margin-bottom: 30px;">
+        <div id="Jitsi" class="margin_top_40 margin_bottom_30">
-            <div class="container" style="background-color: #ffffff;">
+            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="jisi_text">
                    <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>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Jitsi</strong></h2>
                    </div>
-                    <div class="col-auto" style="background-color: #ffffff;">
+                    <div class="col-auto background_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"
+                 <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 background_e0001b"
-                            role="button" style="background-color: #E0001B;" href="https://telemeeting.hft-stuttgart.de"><strong>Zugang über das Transferportal</strong></a>
+                            role="button" 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 id="usage" class="m_top_10 margin_bottom_30">
-            <div class="container" style="background-color: #ffffff;">
+            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="jisi_text">
                    <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>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Jitsi verwenden</strong></h2>
                    </div>
-                    <div class="col-auto" style="background-color: #ffffff;">
+                    <div class="col-auto background_ffffff">
                        <ol>
                            <li>Beim Transferportal als Organisator anmelden</li>
                            <li>Videokonferenz über Jitsi eröffnen</li>
@@ -57,7 +57,7 @@
            </div>
        </div>
-      <div class="container" style="background-color: #ffffff;margin-bottom: 30px;">
+      <div class="container background_ffffff margin_bottom_30">
            <div class="row">
            </div>
       </div> 

--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
 <div>
  <div class="container">
    <div class="row">
-      <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Forschung_team1.jpg" width="100%"></div>
+      <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Forschung_team1.jpg" width="100%"></div>
    </div>
  </div>
 </div>
@@ -25,16 +25,15 @@
  <div class="container">
    <div class="row">
      <div class="col-lg-1"></div>
-      <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;"><img class="d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto" src="/img/Icon_Informationen_Verlauf.png" width="150" style="margin: 0px;">
+      <div class="col-md-6 col-lg-4 p_left_5 p_right_5"><img class="d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto m_0" src="/img/Icon_Informationen_Verlauf.png" width="150">
-        <h2 class="text-center"
+        <h2 class="text-center heading"><strong>Informationen bereitstellen</strong><br></h2>
-            style="color: #708090;"><strong>Informationen bereitstellen</strong><br></h2>
        <p class="text-left">Über das Transferportal können Sie <strong>Informationen</strong> und <strong>Daten</strong>, <strong>Dokumentationen</strong> und <strong>Software-Code</strong> von Open-Source Projekten an HFT-interne und externe Partner sowie
          der breiten Öffentlichkeit zur Verfügung stellen. <br><br>Hierfür stehen eine Projektübersicht, ein Wiki, ein Ablagesystem für Dateien sowie die Nutzung unseres <a href="https://transfer.hft-stuttgart.de/gitlab/explore/projects" target="_blank"><strong>GitLab-Dienstes</strong></a> zur Softwareentwicklung bereit. <br></p>
      </div>
      <div class="col-lg-2"></div>
-      <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;"><img class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto" src="/img/Icon_Zusammenarbeiten_%20Verlauf.png" width="150px" style="margin: 0px;padding: 0px;">
+      <div class="col-md-6 col-lg-4 p_left_5 p_right_5"><img class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-start mx-auto m_0 p_0" src="/img/Icon_Zusammenarbeiten_%20Verlauf.png" width="150px">
        <h2
-                class="text-center" style="color: #708090;"><strong>Zusammenarbeiten und Austauschen</strong><br></h2>
+                class="text-center heading"><strong>Zusammenarbeiten und Austauschen</strong><br></h2>
        <p class="text-left">Für die Zusammenarbeit mit Projektpartnern können Sie verschiedene <a href="./videoconference.html"><strong>Videokonferenz-Systeme</strong></a> nutzen. Wir stellen sowohl für Mitglieder der HFT als auch für externe
          Nutzer Möglichkeiten bereit.<br><br>Bleiben Sie im Kontakt mit Ihren Projektpartnern: Über unsere <a href="./mailinglists"><strong>Mailinglisten</strong></a> können Sie sich schnell zu Ihren Projektthemen austauschen. Kommunizieren
          Sie Projektneuheiten und aktuelle<br>Anlässe an Ihre Nutzergruppe.<br></p>
@@ -43,27 +42,27 @@
    </div>
  </div>
 </div>
-<div style="margin-top: 40px;margin-bottom: 40px;">
+<div class="margin_top_40 margin_bottom_40">
-  <div style="background-color: rgba(255,255,255,0);">
+  <div class="background_ffffff">
    <div class="container">
      <div class="row">
-        <div class="col-md-4 col-lg-1" style="margin-top: -0;padding-top: 0px;"></div>
+        <div class="col-md-4 col-lg-1 m_top_0 p_top_0"></div>
-        <div class="col-md-4 col-lg-10" style="background-color: #f2f2f2;margin-top: 0px;padding-top: 20px;padding-bottom: 20px;">
+        <div class="col-md-4 col-lg-10" class="index_neues_projekt">
-          <h2 class="text-center" style="color: #708090;"><strong>Neues Projekt anlegen</strong></h2>
+          <h2 class="text-center heading"><strong>Neues Projekt anlegen</strong></h2>
-          <p class="text-center">Im Transferportal der HFT Stuttgart können Sie die Inhalte Ihrer Projekte ablegen, bearbeiten und darstellen. </p><button class="btn btn-primary btn-lg d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-end mx-auto" type="button" style="background-color: #E0001B;filter: invert(0%);"><a href="/project" style="color:white"><strong>Zur Projektübersicht</strong></a></button></div>
+          <p class="text-center">Im Transferportal der HFT Stuttgart können Sie die Inhalte Ihrer Projekte ablegen, bearbeiten und darstellen. </p><button class="btn btn-primary btn-lg d-inline-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center justify-content-lg-center align-items-lg-end mx-auto" type="button" class="index_project_overview"><a href="/project" class="color_white"><strong>Zur Projektübersicht</strong></a></button></div>
        <div class="col-md-4 col-lg-1"></div>
      </div>
    </div>
  </div>
 </div>
 <div>
-  <div style="background-color: #708090;">
+  <div class="background_708090">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-lg-2"></div>
        <div class="col-md-4 col-lg-8">
-          <div style="background-color: #feffff;margin: 0px;padding: 60px;padding-top: 20px;padding-bottom: 20px;"><img class="d-flex d-lg-flex justify-content-center justify-content-lg-center align-items-lg-start mx-auto" src="/img/Logo_TV1.png" width="100px" style="padding-bottom: 35px;">
+          <div class="index_foot_message"><img class="d-flex d-lg-flex justify-content-center justify-content-lg-center align-items-lg-start mx-auto p_bottom_35" src="/img/Logo_TV1.png" width="100px">
-            <h2 class="text-center" style="color: #708090;"><strong>Transferportal</strong></h2>
+            <h2 class="text-center heading"><strong>Transferportal</strong></h2>
            <p class="text-center">Das Transferportal entsteht in einem Teilprojekt der Innovativen <a href="https://www.hft-stuttgart.de"><strong>Hochschule für Technik Stuttgart</strong></a>. Im <a href="https://www.hft-stuttgart.de/forschung/innovative-hochschule-m4-lab"><strong>Innovationslabor M4_LAB</strong></a>                                wird das Transferportal als eine Webpräsenz entwickelt, welches Wissen, Lösungen und Dienste für HFT-Mitglieder, externe Partner und die allgemeine Öffentlichkeit bereitstellt.<br><br>Es ergänzt die Informationen der allgemeinen
              HFT-Webseite durch konkrete Ergebnisse aus Forschung und Entwicklung, verfügbar in verschiedenster Form wie beispielsweise Daten, Dokumentationen und Software-Code.<br><br>Zudem stellt es Kollaborationsmittel für Projektpartner
              und später auch Partizipationsmöglichkeiten für die breite Öffentlichkeit bereit.</p>

--- a/info_partizipation.html
+++ b/info_partizipation.html
@@ -25,10 +25,10 @@
        </div>
        <div id="Gitlab_Text" class="margin_top_30 margin_bottom_30">
            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="info_partizipation_text">
                    <div class="col-lg-12">
-                        <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center"
+                        <h2 class="d-flex flex-column flex-shrink-1 justify-content-lg-start text-center heading p_top_15">
-                            style="padding-top: 15px;color: #708090;"><strong>Beteiligungsplattform</strong></h2>
+                            <strong>Beteiligungsplattform</strong></h2>
                    </div>
                    <div class="col-auto flex-row flex-grow-1 flex-fill background_ffffff">
                        <p> Die im M4_Lab entwickelte Beteiligungsplattform soll den Bürgern ermöglichen ihre Meinung in
@@ -36,20 +36,19 @@
                            Entwicklungsstadium.
                        </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"
+                    <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 background_e0001b"
-                        role="button" style="background-color: #E0001B;"
+                        role="button"
                        href="https://transfer.hft-stuttgart.de/partizipation/#/"><strong>Zugriff auf die
                            Beteiligungsplattform</strong></a>
                </div>
            </div>
        </div>
-        <div id="help_Text" style="margin-top: 10px;margin-bottom: 30px;">
+        <div id="help_Text" class="m_top_10 margin_bottom_30">
            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="info_partizipation_text">
                    <div class="col-lg-12">
-                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center"
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15">
-                            style="padding-top: 15px;color: #708090;"><strong>Funktionen der
+                            <strong>Funktionen der Beteiligungsplattform</strong></h2>
-                                Beteiligungsplattform</strong></h2>
                    </div>
                    <div class="col-auto background_ffffff">
                        <div class="help">
@@ -143,13 +142,12 @@
                </div>
            </div>
        </div>
-        <div id="Projects_Text" style="margin-top: 10px;margin-bottom: 30px;">
+        <div id="Projects_Text" class="m_top_10 margin_bottom_30">
            <div class="container background_ffffff">
-                <div style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="info_partizipation_text">
                    <div class="col-lg-12">
-                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center"
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15">
-                            style="padding-top: 15px;color: #708090;"><strong>Projekte auf der
+                            <strong>Projekte auf der Beteiligungsplattform</strong></h2>
-                                Beteiligungsplattform</strong></h2>
                    </div>
                    <div class="col-auto background_ffffff">
                        <div class="help">

--- a/jira.html
+++ b/jira.html
@@ -17,14 +17,14 @@
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Aufgabenmanagement.png" width="100%"></div>
+                <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Aufgabenmanagement.png" width="100%"></div>
            </div>
        </div>
    </div>
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 30px;">
+                <div class="col-md-12 margin_bottom_30">
                    <h4 class="text-center">Das Transferportal bietet eine Möglichkeit zum Aufgabenmanagement innerhalb eines Projektes an. Dieses Angebot richtet sich insbesondere an Kollaborationsprojekte zwischen der HfT und externen Partnern.
                    </h4>
                </div>
@@ -34,18 +34,18 @@
    <div>
-        <div id="Jira Text" style="background-color: #dadada;margin-top: 40px;">
+        <div id="Jira Text" class="background_dadada margin_top_40">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
-                    <div class="col-lg-12" style="background-color: #feffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Jira</strong></h2>
+                        <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15"><strong>Jira</strong></h2>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1" style="background-color: #ffffff;">
+                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
                        <p>Jira ist ein System der Firma Atlassian zum operativen Projektmanagement. Es bietet vielfältige Möglichkeiten des Aufgaben-, Prozess- und Anforderungsmanagements.</p>
                        <p>Über das Transferportal bieten wir eine Instanz für Projekte an, die darüber ihre Prozesse und Workflows steuern und abwickeln können.</p>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2" style="background-color: #ffffff;">
+                    <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
-                        <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="justify-content-between order-2">
                            <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-left align-items-md-start justify-content-lg-start">
                            Wichtige Features umfassen dabei:
                                <ul class="text-left">
@@ -55,26 +55,26 @@
                                    <li>Vernetzung mit unserem Werkzeug zum <a href="/confluence.html">Wissensaustausch</a>
                                </ul>
                            </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"
+                        </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 background_e0001b"
-                            role="button" style="background-color: #E0001B;" href="https://transfer.hft-stuttgart.de/jira/"><strong>Zugang über das Transferportal</strong></a></div>
+                            role="button" href="https://transfer.hft-stuttgart.de/jira/"><strong>Zugang über das Transferportal</strong></a></div>
                </div>
            </div>
        </div>
-        <div id="Access_Text" style="background-color: #dadada;margin-top: 0px;">
+        <div id="Access_Text" class="background_dadada m_top_0">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row" class="m_bottom_0 p_top_20 p_bottom_20">
-                    <div class="col-lg-12" style="background-color: #ffffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center" style="padding-top: 15px;color: #708090;"><strong>Zugang</strong></h2>
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15"><strong>Zugang</strong></h2>
                    </div>
-                    <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
+                    <div class="col-md-4 col-lg-6 background_ffffff">
                        <p>Um Zugang zu Jira zu erhalten, benötigen Sie einen Account am Portal. Dieser muss zunächst noch freigeschalten werden, wenden Sie sich dazu bitte an den Administrator.</p>
                        <p>Um ein Projekt in der Instanz zu platzieren, wenden Sie sich bitte ebenfalls an den Administrator, der mit Ihnen dann das weitere Vorgehen abstimmen wird.</p>
                    </div>
-                    <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
+                    <div class="col-md-4 col-lg-6 text-center background_ffffff">
-                        <div class="order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="order-2">
                            <p class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">Weitere Hilfe zur Benutzung von Jira finden sich auf den <a href="https://confluence.atlassian.com/jira">Seiten der Firma Atlassian</a></p>
-                        </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto" role="button" style="background-color: #E0001B;" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
+                        </div><a class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto background_e0001b" role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a></div>
                </div>
            </div>
        </div>

--- a/videoconference.html
+++ b/videoconference.html
@@ -18,7 +18,7 @@
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Videokonferenzen.jpg"
+                <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Videokonferenzen.jpg"
                        width="100%"></div>
            </div>
        </div>
@@ -26,7 +26,7 @@
    <div>
        <div class="container">
            <div class="row">
-                <div class="col-md-12" style="margin-bottom: 30px;">
+                <div class="col-md-12 margin_bottom_30">
                    <h4 class="text-center">Das Transferportal bietet <strong>drei</strong> verschiedene Möglichkeiten
                        für Videokonferenzen:</h4>
                </div>
@@ -36,15 +36,14 @@
-    <div class="d-flex justify-content-lg-center align-items-lg-start flex-row"
+    <div class="d-flex justify-content-lg-center align-items-lg-start flex-row m_left_35 m_right_35"></div>
-        style="margin-right: 35px;margin-left: 35px;"></div>
    <div>
        <div class="container">
            <div
                class="row flex-row justify-content-start align-items-start align-content-stretch align-self-stretch flex-wrap align-items-lg-start">
-                <div class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center"
+                <div
-                    style="padding-right: 5px;padding-left: 0px;margin-top: 15px;">
+                    class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center videoconference_jitsi">
-                    <h2 class="text-center" style="color: #708090;"><strong>Jitsi</strong><br></h2>
+                    <h2 class="text-center heading"><strong>Jitsi</strong><br></h2>
                    <p class="text-center"><strong>Für alle Nutzer des Portals</strong><br><br></p>
                    <p class="text-left">Videokonferenzen direkt im Browser<br>OpenSource System<br></p>
                    <ul class="text-left">
@@ -53,14 +52,12 @@
                        <li>Chat-Funktion</li>
                        <li>Mobile Online-Meetings (App)</li>
                    </ul>
-                    <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center"
+                    <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center videoconference_more_info"
-                        role="button"
+                        role="button" href="#Jitsi_Text"><strong>Mehr Infos zu Jitsi</strong><i
-                        style="background-color: rgb(228,228,228);color: rgb(89,89,89);padding-bottom: 6px;width: 309px;margin-right: 0;margin-bottom: 15px;"
-                        href="#Jitsi_Text"><strong>Mehr Infos zu Jitsi</strong><i
                            class="fa fa-arrow-down d-lg-flex justify-content-lg-center"></i></a>
-                    <a class="btn btn-primary text-center d-lg-flex align-self-center justify-content-md-center align-items-md-end justify-content-lg-center align-items-lg-center justify-content-xl-center mx-auto"
+                    <a class="btn btn-primary text-center d-lg-flex align-self-center justify-content-md-center align-items-md-end justify-content-lg-center align-items-lg-center justify-content-xl-center mx-auto background_e0001b width_309"
-                        role="button" style="background-color: #E0001B;width: 309px;"
+                        role="button" href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das
-                        href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das Transferportal</strong></a>
+                            Transferportal</strong></a>
                </div>
                <!-- <div class="col-md-6 col-lg-4 text-center flex-column justify-content-between"
                    style="padding-right: 5px;padding-left: 5px;margin-top: 15px;">
@@ -77,9 +74,9 @@
                    </ul><a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center" role="button" style="background-color: rgb(228,228,228);color: rgb(89,89,89);padding-bottom: 6px;width: 309px;margin-right: 0;margin-bottom: 15px;"
                        href="#AdobeConnect_Text"><strong>Mehr Infos zu Adobe Connect</strong><i class="fa fa-arrow-down d-lg-flex justify-content-lg-center"></i></a><a class="btn btn-primary text-center align-self-center mx-auto" role="button" style="background-color: #E0001B;width: 309px;"
                        href="https://webconf.vc.dfn.de/dfnvc/disco/index.html?entityID=https%3A%2F%2Fwebconf.vc.dfn.de%2Fshibboleth&amp;return=https%3A%2F%2Fwebconf.vc.dfn.de%2FShibboleth.sso%2FLogin%3FSAMLDS%3D1%26target%3Dss%253Amem%253A91a559f6fe23a4cf2047736a346176afdde2eee7c554b2fb1cddbc35aea5aec6"><strong>Zugang über DFNconf</strong></a></div> -->
-                <div class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center"
+                <div
-                    style="padding: 0;margin: 0;margin-right: 0px;margin-left: 0px;padding-right: 0px;padding-left: 5px;margin-top: 15px;">
+                    class="col-md-6 text-center d-flex flex-column justify-content-center align-items-md-center videoconference_gotomeeting">
-                    <h2 class="text-center" style="color: #708090;"><strong>GoToMeeting</strong><br></h2>
+                    <h2 class="text-center heading"><strong>GoToMeeting</strong><br></h2>
                    <p class="text-center"><strong>Für Mitglieder der HFT</strong><br><br></p>
                    <p class="text-left">Videokonferenzen mit Lizenzanfrage über die Verwaltung<br></p>
                    <ul class="text-left">
@@ -90,14 +87,12 @@
                        <li>Aufzeichnung von Konferenzen und<br />Vorlesungen</li>
                        <li>Max. 150 Teilnehmer gleichzeitig</li>
                    </ul>
-                    <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center"
+                    <a class="btn btn-primary text-center flex-grow-1 flex-shrink-1 flex-fill justify-content-center videoconference_more_info"
-                        role="button"
+                        role="button" href="#GoToMeeting_Text"><strong>Mehr Infos zu GoToMeeting</strong><i
-                        style="background-color: rgb(228,228,228);color: rgb(89,89,89);padding-bottom: 6px;width: 309px;margin-right: 0;margin-bottom: 15px;"
-                        href="#GoToMeeting_Text"><strong>Mehr Infos zu GoToMeeting</strong><i
                            class="fa fa-arrow-down d-lg-flex justify-content-lg-center"></i></a>
-                    <a class="btn btn-primary text-center d-lg-flex flex-column justify-content-center align-items-center align-content-center align-items-lg-center mx-auto"
+                    <a class="btn btn-primary text-center d-lg-flex flex-column justify-content-center align-items-center align-content-center align-items-lg-center mx-auto background_e0001b width_309"
-                        role="button" style="background-color: #E0001B;width: 309px;"
+                        role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin
-                        href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin anfragen</strong></a>
+                            anfragen</strong></a>
                </div>
            </div>
        </div>
@@ -107,15 +102,16 @@
    <div>
-        <div id="Jitsi_Text" style="background-color: #dadada;margin-top: 40px;">
+        <div id="Jitsi_Text" class="background_dadada margin_top_40">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row videoconference_jitsi_text">
-                    <div class="col-lg-12" style="background-color: #feffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center"
+                        <h2
-                            style="padding-top: 15px;color: #708090;"><strong>Jitsi</strong></h2>
+                            class="d-flex flex-column flex-shrink-1 order-1 justify-content-lg-start text-center heading p_top_15">
+                            <strong>Jitsi</strong>
+                        </h2>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1"
+                    <div class="col-auto col-md-4 col-lg-6 flex-row flex-grow-1 flex-fill order-1 background_ffffff">
-                        style="background-color: #ffffff;">
                        <p>Jitsi&nbsp;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.
@@ -124,9 +120,9 @@
                            wird, raten wir von einer Nutzung auf
                            mobilen Endgeräten ab.&nbsp;<br /></p>
                    </div>
-                    <div class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2"
+                    <div
-                        style="background-color: #ffffff;">
+                        class="col-auto col-md-4 col-lg-6 text-center flex-row flex-grow-1 flex-fill justify-content-between flex-wrap order-2 background_ffffff">
-                        <div class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="justify-content-between order-2 background_ffffff">
                            <p
                                class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">
                                Aktuelle Informationen und Tutorials zu Jitsi finden Sie auf den&nbsp;<a
@@ -136,9 +132,8 @@
                                </strong>
                            </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"
+                            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 background_e0001b"
-                            role="button" style="background-color: #E0001B;"
+                            role="button" href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das
-                            href="https://telemeeting.hft-stuttgart.de/"><strong>Zugang über das
                                Transferportal</strong></a>
                    </div>
                </div>
@@ -163,30 +158,31 @@
                </div>
            </div>
        </div> -->
-        <div id="GoToMeeting_Text" style="background-color: #dadada;margin-top: 0px;">
+        <div id="GoToMeeting_Text" class="background_dadada m_top_0">
            <div class="container">
-                <div class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;">
+                <div class="row videoconference_gotomeeting_text">
-                    <div class="col-lg-12" style="background-color: #ffffff;">
+                    <div class="col-lg-12 background_ffffff">
-                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center"
+                        <h2 class="d-flex flex-column order-1 justify-content-lg-start text-center heading p_top_15">
-                            style="padding-top: 15px;color: #708090;"><strong>GoToMeeting</strong></h2>
+                            <strong>GoToMeeting</strong>
+                        </h2>
                    </div>
-                    <div class="col-md-4 col-lg-6" style="background-color: #ffffff;">
+                    <div class=" col-md-4 col-lg-6 background_ffffff">
-                        <p>Auch über den Dienst GoToMeeting können Webkonferenzen<br />abgehalten werden. <br />Für eine
+                        <p>Auch über den Dienst GoToMeeting können Webkonferenzen<br />abgehalten werden. <br />Für
+                            eine
                            Nutzungsanfrage wenden Sie sich bitte an <a
                                href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>.<br />
                        </p>
                    </div>
-                    <div class="col-md-4 col-lg-6 text-center" style="background-color: #ffffff;">
+                    <div class="col-md-4 col-lg-6 text-center background_ffffff">
-                        <div class="order-2" style="background-color: rgba(255,255,255,0);">
+                        <div class="order-2">
                            <p
                                class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start">
                                Aktuelle Informationen und Tutorials zu GoToMeeting finden Sie auf den<a
                                    href="https://confluence.hft-stuttgart.de/display/DZ/Anleitung+GoToMeeting">Confluence-Seiten
                                    der HFT Stuttgart&nbsp;(Intranet).</a></p>
                        </div><a
-                            class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto"
+                            class="btn btn-primary text-center d-lg-flex justify-content-center align-items-center align-content-center align-self-center align-items-lg-end mx-auto background_e0001b"
-                            role="button" style="background-color: #E0001B;"
+                            role="button" href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin
-                            href="mailto:support-transfer@hft-stuttgart.de"><strong>Zugang über Admin
                                anfragen</strong></a>
                    </div>
                </div>