New Website Design

public/assets/css/main.css

+.footer {
+    /* position: fixed; */
+    /* left: 0;
+    bottom: 0; */
+    width: 100%;
+    text-align: center;
+    background-color: white;
+    /* height: 10%; */
+}
+
+.header {
+    margin-bottom: 10px;
+    margin-top: 0px;
+    /* position: fixed; */
+    /* left: 0;
+    top: 0; */
+    height: 10%;
+    background-color: white;
+}
+
+.main {
+    margin-top: 60px;
+    margin-bottom: 60px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: 80%;
+}
+
+.centered {
+    /* position: absolute; */
+    /* top: 100;
+    bottom: 100;*/
+    left: 0;
+    right: 0;
+    height: 70%;
+
+    margin: auto;
+}
+
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* html,
+body {
+    min-height: 80%;
+}
+
+body {
+    height: 85vh;
+} */
+
+.column {
+    float: left;
+    width: 25%;
+    padding: 0px;
+    /* Should be removed. Only for demonstration */
+}
+
+* {
+    box-sizing: border-box;
+}
+
+
+a:link {
+    color: black;
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:visited {
+    color: black;
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:hover {
+    color: black;
+    background-color: transparent;
+    text-decoration: underline;
+
+}
+
+a:active {
+    color: grey;
+    background-color: transparent;
+    /* text-decoration: underline; */
+}
+
+
+/* @media Stuff */
+@media only screen and (max-width: 740px) {
+    h2 {
+        font-family: 'ApfelGrotezk_regular';
+        font-size: 20px;
+        color: black;
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    h3 {
+        font-family: 'ApfelGrotezk_regular';
+        font-size: 35px;
+        color: black;
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    h1 {
+        font-family: 'ApfelGrotezk_fett';
+        font-size: 40px;
+        color: black;
+
+    }
+}
+
+@media only screen and (max-width: 465px) {
+    h2 {
+        font-family: 'ApfelGrotezk_regular';
+        font-size: 15px;
+        color: black;
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    h3 {
+        font-family: 'ApfelGrotezk_regular';
+        font-size: 30px;
+        color: black;
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    h1 {
+        font-family: 'ApfelGrotezk_fett';
+        font-size: 30px;
+        color: black;
+
+    }
+}
\ No newline at end of file

public/assets/css/typeface.css

+@font-face {
+    font-family: "ApfelGrotezk_regular";
+    src: url("../typeface/ApfelGrotezk-Regular.woff2") format("woff2"),
+        url("../typeface/ApfelGrotezk-Regular.woff") format("woff");
+}
+
+@font-face {
+    font-family: "ApfelGrotezk_Brukt";
+    src: url("../typeface/ApfelGrotezk-Brukt.woff2") format("woff2"),
+        url("../typeface/ApfelGrotezk-Brukt.woff") format("woff");
+}
+
+@font-face {
+    font-family: "ApfelGrotezk_Fett";
+    src: url("../typeface/ApfelGrotezk-Fett.woff2") format("woff2"),
+        url("../typeface/ApfelGrotezk-Fett.woff") format("woff");
+}
+
+
+p {
+    font-family: 'ApfelGrotezk_regular';
+}
+
+h1 {
+    font-family: 'ApfelGrotezk_fett';
+    font-size: 55px;
+    margin: 20px;
+}
+
+h2 {
+    font-family: 'ApfelGrotezk_regular';
+    font-size: 30px;
+    color: black;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+h3 {
+    font-family: 'ApfelGrotezk_regular';
+    font-size: 45px;
+    text-align: center;
+}
\ No newline at end of file

public/home/index.html

@@ -5,300 +5,60 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="generator" content="GitLab Pages">
-  <title></title>
-  <link rel="stylesheet" href="../assets/css/style.css">
-  <link rel="stylesheet" href="../assets/css/mobile.css">
-  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
-  <link rel="stylesheet" href="../assets/css/importet.css">
-
-  <style>
-    .cover {
-      margin-top: 48px;
-      display: flex
-    }
-
-    .cover img {
-      width: 250px;
-      object-fit: contain;
-      margin-bottom: auto;
-      box-shadow: 0 1px 4px -1px #00000069
-    }
-
-    .metadata {
-      display: flex;
-      flex-direction: column;
-      margin-left: 1em
-    }
-
-    .title {
-      flex-grow: 1;
-      font-size: 2em;
-      font-weight: 700
-    }
-
-    .metadata-item {
-      display: flex;
-      flex-direction: column;
-      margin-top: 24px
-    }
-
-    .download-item {
-      display: flex;
-      margin-top: 24px
-    }
-
-    .metadata-name {
-      border-bottom: 1px solid #cacaca;
-      border-image: linear-gradient(to right, #cacaca, #ffffff00) 1;
-      margin-bottom: 5px
-    }
-
-    .supervisors {
-      display: flex;
-      flex-direction: column
-    }
-
-    .button {
-      background-color: #4caf50;
-      border: none;
-      color: #fff;
-      padding: 15px 32px;
-      text-align: center;
-      text-decoration: none;
-      display: inline-block;
-      font-size: 16px
-    }
-
-    @media only screen and (max-width :450px) {
-      .cover {
-        flex-wrap: wrap
-      }
-
-      .cover img {
-        width: 100%
-      }
-    }
-  </style>
-
+    <title>Zukunft Stadt Labor</title>
+    <link rel="stylesheet" href="../assets/css/typeface.css">
+    <link rel="stylesheet" href="../assets/css/main.css">
 </head>
 
 <body>
-  <header id="header">
-    <div class="row">
-      <div class="logo" id="logo"></div>
-      <div class="hamburger">
-        <div class="line"></div>
-        <div class="line"></div>
-        <div class="line"></div>
-      </div>
-      <nav></nav>
+    <div class="header">
+        <h1>&bullet;
+            Zukunft Labor Stadt</h1>
     </div>
-    <div id="projectlogo"></div>
-    <div id="projectname"></div>
-  </header>
-  <div class="content">
-    <h1>Handlungsleitfaden M4_Lab TV3</h1>
-    <h2>Abstract</h2>
 
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque diam ipsum, nec
-      ultricies sem mollis et. Phasellus porttitor nec felis quis ultricies. In venenatis faucibus nisl
-      sed facilisis. Cras sapien nibh, dignissim at eros quis, commodo lobortis eros. Sed a massa
-      eleifend, dictum elit at, blandit magna. Nullam auctor enim nec orci luctus sagittis. Nunc blandit
-      quam nec laoreet egestas. Nulla feugiat nisl lacus, a viverra nisi hendrerit vitae. In nibh arcu,
-      sodales in enim tincidunt, tempus imperdiet ex. Aliquam fermentum augue magna, vel accumsan augue
-      consequat et. Vestibulum id interdum orci, a aliquam sapien. Vivamus eu ipsum sollicitudin, aliquet
-      arcu ut, ornare massa. Suspendisse tincidunt lectus a odio ultrices interdum. Praesent vitae sodales
-      urna, vitae sagittis ex. Vivamus tincidunt nisi ultrices lectus dapibus, at placerat nisl elementum.
-      Fusce cursus, sapien in tincidunt pellentesque, mi erat mollis nibh, ut maximus tortor magna vitae
-      nibh.
-
-    </p>
-    <a class="btn btn-sm btn-outline-success mt-1" href="downloads.html" target="_blank">
-      <i class="fas fa-project-diagram" aria-hidden="true"></i>Downloads</a>&nbsp;&nbsp;&nbsp;
-    <br><br>
-
-    <h2>Kapitelthemen</h2>
-
-    <div class="row">
-      <div class="col-lg-4">
-        <div class="card mb-4 shadow-sm extension overflow-auto">
-          <h5>Wirtschaftspsychologie <span class="content-subtitle text-muted">Partizipation?</span></h5>
-          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
-          <div class="card-body">
-            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
-              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
-                <i class="fas fa-user" aria-hidden="true"></i> Contact Person</b>: <a
-                href="https://www.hft-stuttgart.de/p/sarah-lang" target="_blank"> Sarah Lang-Lehmann
-              </a> <br><b>
-                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
-                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
-                target="_blank">
-                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
-                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
-                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+    <div class="main">
+        <div class="centered">
+            <div class="chapter">
+                <h3>INTRO</h3>
             </div>
+            <div class="chapter">
+                <h3>1 BETEILIGENDE GESTALTUNG</h3>
             </div>
+            <div class="chapter">
+                <h3>2 MOBILITÄTSWENDE AKTIV GESTALTEN</h3>
             </div>
-      <div class="col-lg-4">
-        <div class="card mb-4 shadow-sm extension overflow-auto">
-          <h5>Mobilität <span class="content-subtitle text-muted"> iCity Project</span></h5>
-          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
-          <div class="card-body">
-            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
-              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
-                <i class="fas fa-user" aria-hidden="true"></i> Contact Person</b>: <a
-                href="https://www.hft-stuttgart.de/p/tom-kwakman" target="_blank"> Tom Kwakman</a> <br><b>
-                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
-                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
-                target="_blank">
-                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
-                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
-                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+            <div class="chapter">
+                <h3>3 PARTIZIPATION! UND NUN?</h3>
             </div>
+            <div class="chapter">
+                <h3>4 NACHHALTIG IM QUARTIER</h3>
             </div>
-      </div>
-      <div class="col-lg-4">
-        <div class="card mb-4 shadow-sm extension overflow-auto">
-          <h5>Energie <span class="content-subtitle text-muted"> iCity Project</span></h5>
-          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
-          <div class="card-body">
-            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
-              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
-                <i class="fas fa-user" aria-hidden="true"></i> Contact Persons</b>: <a
-                href="https://www.hft-stuttgart.de/p/Keyu-bao" target="_blank"> Keyu Bao, </a><a
-                href="https://www.hft-stuttgart.de/p/Eric-duminil" target="_blank"> Eric Duminil</a> <br><b>
-                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
-                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
-                target="_blank">
-                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
-                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
-                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
-          </div>
+            <div class="chapter">
+                <h3>5 POTENZIALE DIGITALER WERKZEUGE</h3>
             </div>
         </div>
     </div>
+
+    <div class="footer">
         <div class="row">
-      <div class="col-lg-4">
-        <div class="card mb-4 shadow-sm extension overflow-auto">
-          <h5>Stadtplanung <span class="content-subtitle text-muted"> iCity Project</span></h5>
-          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
-          <div class="card-body">
-            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
-              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
-                <i class="fas fa-user" aria-hidden="true"></i> Contact Persons</b>: <a
-                href="https://www.hft-stuttgart.de/p/carolin-lahode" target="_blank"> Carolin Lahode,</a><a
-                href="https://www.hft-stuttgart.de/p/sarah-ann-sutter" target="_blank"> Sarah Ann Sutter</a> <br><b>
-                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
-                class="btn btn-sm btn-outline-secondary mt-1" href="stadtplanung.html" target="_blank">
-                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a target="_self"
-                class="btn btn-sm btn-outline-success mt-1" href="stadtplanung.html" target="_blank">
-                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
-          </div>
-        </div>
-      </div>
-      <div class="col-lg-4">
-        <div class="card mb-4 shadow-sm extension overflow-auto">
-          <h5>Geoinformatik <span class="content-subtitle text-muted"> iCity Project</span></h5>
-          <img class="thumbimg" src='chapterIMG/3D-Beteiligungsplattform.png' alt="">
-          <div class="card-body">
-            <p class="card-text-lg small">Partitizipationsprozesse können durch digitale Elemente ergänzt und für mehr
-              Teilnehmende zugänglich gemacht werden. Diese wird am Beispiel einer Beteiligung in Weilimdorf
-              gezeigt.<br><b>
-                <i class="fas fa-user" aria-hidden="true"></i> Kontaktpersonen</b>: <a
-                href="https://www.hft-stuttgart.de/p/patrick-wuerstle" target="_blank"> Patrick Würstle,</a><a
-                href="https://www.hft-stuttgart.de/p/rushikesh-padsala" target="_blank"> Rushikesh Padsala</a> <br><b>
-                <i class="fas fa-star" aria-hidden="true"></i> Stichworte</b>: Stadtmodelle, Partizipation, 3D<br><a
-                class="btn btn-sm btn-outline-secondary mt-1" href="https://transfer.hft-stuttgart.de/partizipation/"
-                target="_blank">
-                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
-                class="btn btn-sm btn-outline-success mt-1"
-                href="https://www.hft-stuttgart.de/forschung/news/hft-forschende-entwickeln-in-kooperation-mit-steg-und-stadt-stuttgart-digitales-tool-fuer-beteiligungsprozesse-zur-entwicklungsplanung-von-staedten-und-gemeinden"
-                target="_blank">
-                <i class="fas fa-project-diagram" aria-hidden="true"></i> Projekt</a>&nbsp;&nbsp;&nbsp;<a
-                class="btn btn-sm btn-outline-info mt-1"
-                href="https://www.int-arch-photogramm-remote-sens-spatial-inf-sci.net/XLVI-4-W1-2021/123/2021/"
-                target="_blank">
-                <i class="fas fa-project-diagram" aria-hidden="true"></i> Paper</a>&nbsp;&nbsp;&nbsp;</p>
-          </div>
-        </div>
-      </div>
-      <div class="col-lg-4">
-        <div class="card mb-4 shadow-sm extension overflow-auto">
-          <h5>Akustik <span class="content-subtitle text-muted"> iCity Project</span></h5>
-          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
-          <div class="card-body">
-            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
-              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
-                <i class="fas fa-user" aria-hidden="true"></i> Contact Person</b>: <a
-                href="https://www.hft-stuttgart.de/p/alexander-lee" target="_blank"> Alexander Lee</a> <br><b>
-                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
-                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
-                target="_blank">
-                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
-                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
-                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+            <div class="column">
+                <h2>Über das Projekt</h2>
             </div>
-        </div>
-      </div>
-    </div>
-
+            <div class="column">
+                <h2>Autor:innen</h2>
 
-    <div class="cover">
-      <img src="cover.jpg">
-      <ul class="metadata">
-        <li class="metadata-item title">
-          Handlungsleitfaden
-        </li>
-        <li class="metadata-item">
-          <div class="metadata-name">Author*innen</div>
-          <div>Keyu Bao</div>
-          <div>Eric Duminil</div>
-          <div>Tom Kwakman</div>
-          <div>Carolin Lahode</div>
-          <div>Sarah Lang-Lehmann</div>
-          <div>Alexander Lee</div>
-          <div>Rushikesh Padsala</div>
-          <div>Amando Reber</div>
-          <div>Sarah Ann Sutter</div>
-          <div>Patrick Würstle</div>
-        </li>
-        <!-- <li class="metadata-item">
-              <div class="metadata-name">Professor*innen</div>
-              <div class="supervisors">
-                <div>Christina Simon-Philipp</div>
             </div>
-            </li>
-            <li class="metadata-item">
-              <div class="metadata-name">Year</div>
-              <div>2022</div>
-            </li>
-            <li class="download-item"><a href="thesis.pdf" class="button" download>download</a></li> -->
-      </ul>
-      <ul class="metadata" style="margin-top:4em;">
-        <li class="metadata-item">
-          <div class="metadata-name">Professor*innen</div>
-          <div class="supervisors">
-            <div>Christina Simon-Philipp</div>
+            <div class="column">
+                <h2><a href="downloads.html">Downloads</a></h2>
+
             </div>
-        </li>
-        <li class="metadata-item">
-          <div class="metadata-name">Year</div>
-          <div>2022</div>
-        </li>
-        <li class="download-item"><a href="thesis.pdf" class="button" download>download</a></li>
-      </ul>
+            <div class="column">
+                <h2><a href="https://www.hft-stuttgart.de/impressum">Impressum</a></h2>
+
             </div>
         </div>
 
-  <div class="footer"></div>
-  <div class="legal"></div>
-
-  <script src="../settings.js"> </script>
-  <script src="../main.js"> </script>
-  <script src="../assets/js/jquery-3.1.1.min.js"></script>
-  <script src="../assets/js/bootstrap.min.js"></script>
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> -->
+    </div>
 </body>
 
 </html>
\ No newline at end of file

public/home/index_alt.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="generator" content="GitLab Pages">
+  <title></title>
+  <link rel="stylesheet" href="../assets/css/style.css">
+  <link rel="stylesheet" href="../assets/css/mobile.css">
+  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../assets/css/importet.css">
+
+  <style>
+    .cover {
+      margin-top: 48px;
+      display: flex
+    }
+
+    .cover img {
+      width: 250px;
+      object-fit: contain;
+      margin-bottom: auto;
+      box-shadow: 0 1px 4px -1px #00000069
+    }
+
+    .metadata {
+      display: flex;
+      flex-direction: column;
+      margin-left: 1em
+    }
+
+    .title {
+      flex-grow: 1;
+      font-size: 2em;
+      font-weight: 700
+    }
+
+    .metadata-item {
+      display: flex;
+      flex-direction: column;
+      margin-top: 24px
+    }
+
+    .download-item {
+      display: flex;
+      margin-top: 24px
+    }
+
+    .metadata-name {
+      border-bottom: 1px solid #cacaca;
+      border-image: linear-gradient(to right, #cacaca, #ffffff00) 1;
+      margin-bottom: 5px
+    }
+
+    .supervisors {
+      display: flex;
+      flex-direction: column
+    }
+
+    .button {
+      background-color: #4caf50;
+      border: none;
+      color: #fff;
+      padding: 15px 32px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px
+    }
+
+    @media only screen and (max-width :450px) {
+      .cover {
+        flex-wrap: wrap
+      }
+
+      .cover img {
+        width: 100%
+      }
+    }
+  </style>
+
+</head>
+
+<body>
+  <header id="header">
+    <div class="row">
+      <div class="logo" id="logo"></div>
+      <div class="hamburger">
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+      </div>
+      <nav></nav>
+    </div>
+    <div id="projectlogo"></div>
+    <div id="projectname"></div>
+  </header>
+  <div class="content">
+    <h1>Handlungsleitfaden M4_Lab TV3</h1>
+    <h2>Abstract</h2>
+
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque diam ipsum, nec
+      ultricies sem mollis et. Phasellus porttitor nec felis quis ultricies. In venenatis faucibus nisl
+      sed facilisis. Cras sapien nibh, dignissim at eros quis, commodo lobortis eros. Sed a massa
+      eleifend, dictum elit at, blandit magna. Nullam auctor enim nec orci luctus sagittis. Nunc blandit
+      quam nec laoreet egestas. Nulla feugiat nisl lacus, a viverra nisi hendrerit vitae. In nibh arcu,
+      sodales in enim tincidunt, tempus imperdiet ex. Aliquam fermentum augue magna, vel accumsan augue
+      consequat et. Vestibulum id interdum orci, a aliquam sapien. Vivamus eu ipsum sollicitudin, aliquet
+      arcu ut, ornare massa. Suspendisse tincidunt lectus a odio ultrices interdum. Praesent vitae sodales
+      urna, vitae sagittis ex. Vivamus tincidunt nisi ultrices lectus dapibus, at placerat nisl elementum.
+      Fusce cursus, sapien in tincidunt pellentesque, mi erat mollis nibh, ut maximus tortor magna vitae
+      nibh.
+
+    </p>
+    <a class="btn btn-sm btn-outline-success mt-1" href="downloads.html" target="_blank">
+      <i class="fas fa-project-diagram" aria-hidden="true"></i>Downloads</a>&nbsp;&nbsp;&nbsp;
+    <br><br>
+
+    <h2>Kapitelthemen</h2>
+
+    <div class="row">
+      <div class="col-lg-4">
+        <div class="card mb-4 shadow-sm extension overflow-auto">
+          <h5>Wirtschaftspsychologie <span class="content-subtitle text-muted">Partizipation?</span></h5>
+          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
+          <div class="card-body">
+            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
+              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
+                <i class="fas fa-user" aria-hidden="true"></i> Contact Person</b>: <a
+                href="https://www.hft-stuttgart.de/p/sarah-lang" target="_blank"> Sarah Lang-Lehmann
+              </a> <br><b>
+                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
+                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
+                target="_blank">
+                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
+                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
+                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="card mb-4 shadow-sm extension overflow-auto">
+          <h5>Mobilität <span class="content-subtitle text-muted"> iCity Project</span></h5>
+          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
+          <div class="card-body">
+            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
+              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
+                <i class="fas fa-user" aria-hidden="true"></i> Contact Person</b>: <a
+                href="https://www.hft-stuttgart.de/p/tom-kwakman" target="_blank"> Tom Kwakman</a> <br><b>
+                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
+                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
+                target="_blank">
+                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
+                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
+                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="card mb-4 shadow-sm extension overflow-auto">
+          <h5>Energie <span class="content-subtitle text-muted"> iCity Project</span></h5>
+          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
+          <div class="card-body">
+            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
+              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
+                <i class="fas fa-user" aria-hidden="true"></i> Contact Persons</b>: <a
+                href="https://www.hft-stuttgart.de/p/Keyu-bao" target="_blank"> Keyu Bao, </a><a
+                href="https://www.hft-stuttgart.de/p/Eric-duminil" target="_blank"> Eric Duminil</a> <br><b>
+                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
+                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
+                target="_blank">
+                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
+                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
+                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-4">
+        <div class="card mb-4 shadow-sm extension overflow-auto">
+          <h5>Stadtplanung <span class="content-subtitle text-muted"> iCity Project</span></h5>
+          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
+          <div class="card-body">
+            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
+              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
+                <i class="fas fa-user" aria-hidden="true"></i> Contact Persons</b>: <a
+                href="https://www.hft-stuttgart.de/p/carolin-lahode" target="_blank"> Carolin Lahode,</a><a
+                href="https://www.hft-stuttgart.de/p/sarah-ann-sutter" target="_blank"> Sarah Ann Sutter</a> <br><b>
+                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
+                class="btn btn-sm btn-outline-secondary mt-1" href="stadtplanung.html" target="_blank">
+                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a target="_self"
+                class="btn btn-sm btn-outline-success mt-1" href="stadtplanung.html" target="_blank">
+                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="card mb-4 shadow-sm extension overflow-auto">
+          <h5>Geoinformatik <span class="content-subtitle text-muted"> iCity Project</span></h5>
+          <img class="thumbimg" src='chapterIMG/3D-Beteiligungsplattform.png' alt="">
+          <div class="card-body">
+            <p class="card-text-lg small">Partitizipationsprozesse können durch digitale Elemente ergänzt und für mehr
+              Teilnehmende zugänglich gemacht werden. Diese wird am Beispiel einer Beteiligung in Weilimdorf
+              gezeigt.<br><b>
+                <i class="fas fa-user" aria-hidden="true"></i> Kontaktpersonen</b>: <a
+                href="https://www.hft-stuttgart.de/p/patrick-wuerstle" target="_blank"> Patrick Würstle,</a><a
+                href="https://www.hft-stuttgart.de/p/rushikesh-padsala" target="_blank"> Rushikesh Padsala</a> <br><b>
+                <i class="fas fa-star" aria-hidden="true"></i> Stichworte</b>: Stadtmodelle, Partizipation, 3D<br><a
+                class="btn btn-sm btn-outline-secondary mt-1" href="https://transfer.hft-stuttgart.de/partizipation/"
+                target="_blank">
+                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
+                class="btn btn-sm btn-outline-success mt-1"
+                href="https://www.hft-stuttgart.de/forschung/news/hft-forschende-entwickeln-in-kooperation-mit-steg-und-stadt-stuttgart-digitales-tool-fuer-beteiligungsprozesse-zur-entwicklungsplanung-von-staedten-und-gemeinden"
+                target="_blank">
+                <i class="fas fa-project-diagram" aria-hidden="true"></i> Projekt</a>&nbsp;&nbsp;&nbsp;<a
+                class="btn btn-sm btn-outline-info mt-1"
+                href="https://www.int-arch-photogramm-remote-sens-spatial-inf-sci.net/XLVI-4-W1-2021/123/2021/"
+                target="_blank">
+                <i class="fas fa-project-diagram" aria-hidden="true"></i> Paper</a>&nbsp;&nbsp;&nbsp;</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <div class="card mb-4 shadow-sm extension overflow-auto">
+          <h5>Akustik <span class="content-subtitle text-muted"> iCity Project</span></h5>
+          <img class="thumbimg" src="https://citydemonstrator.hft-stuttgart.de/assets/img/iCity_network_1.svg" alt="">
+          <div class="card-body">
+            <p class="card-text-lg small">Learn about Intelligent Cities with our City Demonstrator.
+              Find out what makes our cities Liveable, Intelligent and Sustainable - the LIS city.<br><b>
+                <i class="fas fa-user" aria-hidden="true"></i> Contact Person</b>: <a
+                href="https://www.hft-stuttgart.de/p/alexander-lee" target="_blank"> Alexander Lee</a> <br><b>
+                <i class="fas fa-star" aria-hidden="true"></i> Keywords</b>: Smart City, Participation, LIN Stadt<br><a
+                class="btn btn-sm btn-outline-secondary mt-1" href="https://citydemonstrator.hft-stuttgart.de/"
+                target="_blank">
+                <i class="fas fa-search" aria-hidden="true"></i> Explore</a>&nbsp;&nbsp;&nbsp;<a
+                class="btn btn-sm btn-outline-success mt-1" href="http://icity.hft-stuttgart.de/#/" target="_blank">
+                <i class="fas fa-project-diagram" aria-hidden="true"></i> Project</a>&nbsp;&nbsp;&nbsp;</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="cover">
+      <img src="cover.jpg">
+      <ul class="metadata">
+        <li class="metadata-item title">
+          Handlungsleitfaden
+        </li>
+        <li class="metadata-item">
+          <div class="metadata-name">Author*innen</div>
+          <div>Keyu Bao</div>
+          <div>Eric Duminil</div>
+          <div>Tom Kwakman</div>
+          <div>Carolin Lahode</div>
+          <div>Sarah Lang-Lehmann</div>
+          <div>Alexander Lee</div>
+          <div>Rushikesh Padsala</div>
+          <div>Amando Reber</div>
+          <div>Sarah Ann Sutter</div>
+          <div>Patrick Würstle</div>
+        </li>
+        <!-- <li class="metadata-item">
+              <div class="metadata-name">Professor*innen</div>
+              <div class="supervisors">
+                <div>Christina Simon-Philipp</div>
+              </div>
+            </li>
+            <li class="metadata-item">
+              <div class="metadata-name">Year</div>
+              <div>2022</div>
+            </li>
+            <li class="download-item"><a href="thesis.pdf" class="button" download>download</a></li> -->
+      </ul>
+      <ul class="metadata" style="margin-top:4em;">
+        <li class="metadata-item">
+          <div class="metadata-name">Professor*innen</div>
+          <div class="supervisors">
+            <div>Christina Simon-Philipp</div>
+          </div>
+        </li>
+        <li class="metadata-item">
+          <div class="metadata-name">Year</div>
+          <div>2022</div>
+        </li>
+        <li class="download-item"><a href="thesis.pdf" class="button" download>download</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="footer"></div>
+  <div class="legal"></div>
+
+  <script src="../settings.js"> </script>
+  <script src="../main.js"> </script>
+  <script src="../assets/js/jquery-3.1.1.min.js"></script>
+  <script src="../assets/js/bootstrap.min.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> -->
+</body>
+
+</html>
\ No newline at end of file