diff --git a/public/assets/css/main.css b/public/assets/css/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..8f8cf5c83af3c68060fc34de8785f759d21a5919
--- /dev/null
+++ b/public/assets/css/main.css
@@ -0,0 +1,142 @@
+.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
diff --git a/public/assets/css/typeface.css b/public/assets/css/typeface.css
new file mode 100644
index 0000000000000000000000000000000000000000..2bcec7e1536a3130787cbbb57c6641c98181bdbe
--- /dev/null
+++ b/public/assets/css/typeface.css
@@ -0,0 +1,42 @@
+@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
diff --git a/public/assets/typeface/ApfelGrotezk-Brukt.woff b/public/assets/typeface/ApfelGrotezk-Brukt.woff
new file mode 100644
index 0000000000000000000000000000000000000000..76f964bb13590f895013b4c4eff45b50eb70c3a7
Binary files /dev/null and b/public/assets/typeface/ApfelGrotezk-Brukt.woff differ
diff --git a/public/assets/typeface/ApfelGrotezk-Brukt.woff2 b/public/assets/typeface/ApfelGrotezk-Brukt.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..2acb3c6e305c9760b2d92e63432aa4a00f72f757
Binary files /dev/null and b/public/assets/typeface/ApfelGrotezk-Brukt.woff2 differ
diff --git a/public/assets/typeface/ApfelGrotezk-Fett.woff b/public/assets/typeface/ApfelGrotezk-Fett.woff
new file mode 100644
index 0000000000000000000000000000000000000000..18d36069efcdb5adbf25800b700e873fbe3a975e
Binary files /dev/null and b/public/assets/typeface/ApfelGrotezk-Fett.woff differ
diff --git a/public/assets/typeface/ApfelGrotezk-Fett.woff2 b/public/assets/typeface/ApfelGrotezk-Fett.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..3dbc53c749bab19a385efe61c4b58d52994cf0db
Binary files /dev/null and b/public/assets/typeface/ApfelGrotezk-Fett.woff2 differ
diff --git a/public/assets/typeface/ApfelGrotezk-Regular.woff b/public/assets/typeface/ApfelGrotezk-Regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..eb380c85085f4bf63538fa0782138adf8c59a6a7
Binary files /dev/null and b/public/assets/typeface/ApfelGrotezk-Regular.woff differ
diff --git a/public/assets/typeface/ApfelGrotezk-Regular.woff2 b/public/assets/typeface/ApfelGrotezk-Regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..23e6e14238d23d4a35e4f37e120d829225d43c95
Binary files /dev/null and b/public/assets/typeface/ApfelGrotezk-Regular.woff2 differ
diff --git a/public/home/index.html b/public/home/index.html
index 16ff28538b2ba1cb0ce0ccc1857d4cf6657af959..ba298fb9f262759fbda90e1f15bbb2a3af07be92 100644
--- a/public/home/index.html
+++ b/public/home/index.html
@@ -2,303 +2,63 @@
<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>
-
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="generator" content="GitLab Pages">
+ <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>•
+ 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>
- <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> <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> </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> <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> </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> <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> </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> <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> </p>
- </div>
+ <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="chapter">
+ <h3>3 PARTIZIPATION! UND NUN?</h3>
+ </div>
+ <div class="chapter">
+ <h3>4 NACHHALTIG IM QUARTIER</h3>
+ </div>
+ <div class="chapter">
+ <h3>5 POTENZIALE DIGITALER WERKZEUGE</h3>
+ </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> <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> <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> </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> <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> </p>
- </div>
- </div>
- </div>
</div>
+ <div class="footer">
+ <div class="row">
+ <div class="column">
+ <h2>Ãœber das Projekt</h2>
+ </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>
- </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>
+ <div class="column">
+ <h2><a href="downloads.html">Downloads</a></h2>
- <div class="footer"></div>
- <div class="legal"></div>
+ </div>
+ <div class="column">
+ <h2><a href="https://www.hft-stuttgart.de/impressum">Impressum</a></h2>
- <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>
+ </div>
+
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/public/home/index_alt.html b/public/home/index_alt.html
new file mode 100644
index 0000000000000000000000000000000000000000..16ff28538b2ba1cb0ce0ccc1857d4cf6657af959
--- /dev/null
+++ b/public/home/index_alt.html
@@ -0,0 +1,304 @@
+<!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>
+ <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> <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> </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> <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> </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> <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> </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> <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> </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> <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> <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> </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> <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> </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