Skip to content

GitLab

Commit 7203280f authored by Patrick's avatar Patrick
Browse files

Update Design

parent 03fa479e
Show whitespace changes
Inline Side-by-side
vcm/css/menu.css
View file @ 7203280f
...@@ -119,8 +119,9 @@ ...@@ -119,8 +119,9 @@
} }
.dropbtn { .dropbtn {
background-color: #303030; color: #303030;
color: white; background-color: white;
border: 1px solid #121212 !important;
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
border: none; border: none;
...@@ -233,11 +234,23 @@ ...@@ -233,11 +234,23 @@
float: left; float: left;
width: 33.33%; width: 33.33%;
padding: 10px; padding: 10px;
padding-left: 0px;
position: relative; position: relative;
text-align: center; text-align: center;
color: white; color: white;
/* height: 350px; Should be removed. Only for demonstration */ /* height: 350px; Should be removed. Only for demonstration */
} }
.column23 {
float: left;
width: 66.66%;
padding-left: 10px;
position: relative;
text-align: left;
color: black;
margin-top: 5px !important;
padding-top:0px !important;
/* height: 350px; Should be removed. Only for demonstration */
}
.column2 { .column2 {
width: 33.33%; width: 33.33%;
...@@ -254,21 +267,26 @@ ...@@ -254,21 +267,26 @@
position: absolute; position: absolute;
top: 8px; top: 8px;
/* left: 16px; */ /* left: 16px; */
background-color: #121212; color:#121212;
background-color: white;
padding: 4px; padding: 4px;
padding-left: 7px; padding-left: 7px;
margin-left: 15px;
padding-right: 7px; padding-right: 7px;
border-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-weight:500; font-weight:500;
border:1px solid #121212;
} }
.imagecol3{ .imagecol3{
/* border-color:#121212; */ /* border-color:#121212; */
border-width: 2px; border-width: 2px;
border-radius:4px; border-radius:4px;
border:solid #121212 ; border:1px solid #121212 ;
} }
#colum_projects1{ #colum_projects1{
...@@ -438,12 +456,13 @@ ul > li { ...@@ -438,12 +456,13 @@ ul > li {
/* Caption text */ /* Caption text */
.textNord { .textNord {
color: #f2f2f2; background-color: #f2f2f2;
font-size: 15px; font-size: 15px;
padding: 8px 12px; padding: 8px 12px;
position: absolute; position: absolute;
background-color: black; color: #121212;
bottom: 8px; border:1px solid #121212;
bottom: 12px;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
...@@ -495,3 +514,4 @@ ul > li { ...@@ -495,3 +514,4 @@ ul > li {
@media only screen and (max-width: 300px) { @media only screen and (max-width: 300px) {
.prevNord, .nextNord,.textNord {font-size: 11px} .prevNord, .nextNord,.textNord {font-size: 11px}
} }
vcm/index.html
View file @ 7203280f
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
<!-- <a href="#" onclick="addcont('main_bock2');showtourSpecific('main');setpositionVAR(false);zoomto('projektOne')" id = "btn_bock" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Böckingerstraße</a> <!-- <a href="#" onclick="addcont('main_bock2');showtourSpecific('main');setpositionVAR(false);zoomto('projektOne')" id = "btn_bock" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Böckingerstraße</a>
<a href="#" onclick="removebuildings();addcont('main_nordbstuff2');NordbahnhofText();setpositionVAR(false);zoomto('NordbahnhofInfo')" id = "btn_nord" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Nordbahnhof</a> --> <a href="#" onclick="removebuildings();addcont('main_nordbstuff2');NordbahnhofText();setpositionVAR(false);zoomto('NordbahnhofInfo')" id = "btn_nord" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Nordbahnhof</a> -->
<!-- <a href="#" onclick="NoiseText(true);setpositionVAR(false);" id = "btn_acous" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Akkustik Projekt</a> --> <!-- <a href="#" onclick="NoiseText(true);setpositionVAR(false);" id = "btn_acous" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Akkustik Projekt</a> -->
<a href="#" onclick="removebuildings();addcont('main_bock');addcont('main_heatdem');addcont('main_nordbstuff');Expert();setpositionVAR(false);zoomto('Expertenmodus');" id = "btn_expert" class=" top-nav buttonset one btn_home btn_size"><i id="icon_lock" class="fa fa-lock"></i> Toolbox</a> <a href="#" style="float: right; margin-right: 7px; " onclick="removebuildings();addcont('main_bock');addcont('main_heatdem');addcont('main_nordbstuff');Expert();setpositionVAR(false);zoomto('Expertenmodus');" id = "btn_expert" class=" top-nav buttonset one btn_home btn_size"><i id="icon_lock" class="fa fa-lock"></i> Toolbox</a>
<!-- style="float:right;margin-right:2em;" --> <!-- style="float:right;margin-right:2em;" -->
</div> </div>
<!-- Expertenmodus-.-------------------------- <!-- Expertenmodus-.--------------------------
...@@ -318,7 +318,7 @@ ...@@ -318,7 +318,7 @@
<p class="contentOne">Drei Lärmsensoren im Raum Stuttgart messen zeitaktuell die Lärmbelastung vor Ort. Die Daten können Sie sich hier durch Auswahl eines Sensors anzeigen lassen.</p> <p class="contentOne">Drei Lärmsensoren im Raum Stuttgart messen zeitaktuell die Lärmbelastung vor Ort. Die Daten können Sie sich hier durch Auswahl eines Sensors anzeigen lassen.</p>
<br><div class="row2" id="loadingHistNoise"></div> <br><div class="row2" id="loadingHistNoise"></div>
<!-- <label class="column2" style="position:relative;padding-left:0px; padding-top:10px; padding-bottom:10px;margin-left:0px;" >Sensor wählen:</label> --> <!-- <label class="column2" style="position:relative;padding-left:0px; padding-top:10px; padding-bottom:10px;margin-left:0px;" >Sensor wählen:</label> -->
<select class="dropbtn" style="border-radius: 3px; height: 3em; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19);margin-left:20px;" name="sensor" id="sensors"> <select class="dropbtn" style="border-radius: 3px; height: 3.1em; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19);" name="sensor" id="sensors">
<option value="49368">49368</option> <option value="49368">49368</option>
<option value="53627">53627</option> <option value="53627">53627</option>
<option value="29212">29212</option> <option value="29212">29212</option>
...@@ -369,7 +369,7 @@ ...@@ -369,7 +369,7 @@
</label> </label>
<br> <br>
<h3 id="headNordB">Navigationsrechner</h3> <h3 id="headNordB">Navigationsrechner</h3>
<p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus.</p> <p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus. Klicken Sie hierfür auf den Button Startpunkt und danach auf die gewünschte Stelle in der Karte. Wiederholen Sie das für den Endpunkt, dann können Sie sich über die Route Buttons den Weg anzeigen.</p>
<div style="width:34em;"> <div style="width:34em;">
<button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button> <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button>
<input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat"> <input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat">
...@@ -485,8 +485,8 @@ ...@@ -485,8 +485,8 @@
<h3 class="top-left">Nordbahnhof</h3> <h3 class="top-left">Nordbahnhof</h3>
<img class="imagecol3" src="images/thumbnails/Nord_thumb_001.jpg" alt="Forest" style="width:100%"> <img class="imagecol3" src="images/thumbnails/Nord_thumb_001.jpg" alt="Forest" style="width:100%">
</div> </div>
<div> <div class="column23">
<p style="padding-top: 1em;" class="contentOne">Drei Quartiere liegen beim LABOR Nordbahnhof im Fokus verschiedener Aktionen und Experimente im öffentlichen Raum. Hier können Sie sich aktiv am Prozess beteiligen und ihre Ideen und Meinung einbringen!</p> <p style="padding-top: 0em; margin-top: 0em;" class="contentOne">Drei Quartiere liegen beim LABOR Nordbahnhof im Fokus verschiedener Aktionen und Experimente im öffentlichen Raum. Hier können Sie sich aktiv am Prozess beteiligen und ihre Ideen und Meinung einbringen!</p>
</div> </div>
<!-- <div style="cursor:pointer;" onclick="NoiseText(true);setpositionVAR(false);" class="column3"> <!-- <div style="cursor:pointer;" onclick="NoiseText(true);setpositionVAR(false);" class="column3">
<h3 class="top-left">Akkustik Projekt</h3> <h3 class="top-left">Akkustik Projekt</h3>
...@@ -500,8 +500,8 @@ ...@@ -500,8 +500,8 @@
<h3 class="top-left">Böckinger Straße</h3> <h3 class="top-left">Böckinger Straße</h3>
<img class="imagecol3" src="images/thumbnails/boe_thumb_001_sw.jpg" alt="Snow" style="width:100%"> <img class="imagecol3" src="images/thumbnails/boe_thumb_001_sw.jpg" alt="Snow" style="width:100%">
</div> </div>
<div> <div class="column23">
<p style="padding-top: 1em;" class="contentOne">Wie lassen sich vorhandene Quartiersstrukturen in einer wachsenden Nachbarschaft nutzen und erweitern? Um das herauszufinden, beleben vier kleine Rotkäppchen-Kioske das Quartier und den öffentlichen Raum in der Böckinger Straße. </p> <p style="padding-top: 0em; margin-top: 0em;" class="contentOne">Wie lassen sich vorhandene Quartiersstrukturen in einer wachsenden Nachbarschaft nutzen und erweitern? Um das herauszufinden, beleben vier kleine Rotkäppchen-Kioske das Quartier und den öffentlichen Raum in der Böckinger Straße. </p>
</div> </div>
<!-- <div style="cursor:pointer;" onclick="NoiseText(true);setpositionVAR(false);" class="column3"> <!-- <div style="cursor:pointer;" onclick="NoiseText(true);setpositionVAR(false);" class="column3">
...@@ -674,13 +674,13 @@ ...@@ -674,13 +674,13 @@
<div class="mySlidesNord fadeNord"> <div class="mySlidesNord fadeNord">
<div class="numbertextNord">1 / 2</div> <div class="numbertextNord">1 / 2</div>
<img src="images/NordB/001.jpg" style="width:100%"> <img src="images/NordB/001.jpg" style="width:100%;border-radius: 10px;border: 1px solid black;">
<div class="textNord">Konzept für den Nordbahnhof</div> <div class="textNord">Konzept für den Nordbahnhof</div>
</div> </div>
<div class="mySlidesNord fadeNord"> <div class="mySlidesNord fadeNord">
<div class="numbertextNord">2 / 2</div> <div class="numbertextNord">2 / 2</div>
<img src="images/NordB/002.jpg" style="width:100%"> <img src="images/NordB/002.jpg" style="width:100%;border-radius: 10px;border: 1px solid black;">
<div class="textNord">Foto des Nordbahnhofs</div> <div class="textNord">Foto des Nordbahnhofs</div>
</div> </div>
<a class="prevNord" onclick="plusSlidesNord(-1)">&#10094;</a> <a class="prevNord" onclick="plusSlidesNord(-1)">&#10094;</a>
...@@ -689,8 +689,8 @@ ...@@ -689,8 +689,8 @@
<br> <br>
<div style="text-align:center"> <div style="text-align:center">
<span class="dotNord" onclick="currentSlide(1)"></span> <span class="dotNord" onclick="currentSlideNord(1)"></span>
<span class="dotNord" onclick="currentSlide(2)"></span> <span class="dotNord" onclick="currentSlideNord(2)"></span>
</div> </div>
<p class="contentOne">Die Fläche, die mit der Fertigstellung des neuen Hauptbahnhofs frei wird, bietet für die Stadt Stuttgart enormes Potenzial. Ein Quartier soll entstehen, das nachhaltig und klimagerecht ist und dabei leben, arbeiten und wohnen verbindet. Die Arbeitsgemeinschaft asp Architekten GmbH und Koeber Landschaftsarchitektur GmbH gingen mit ihrem städtebaulichen Konzept als Sieger aus dem Internationalen städtebaulichen Wettbewerb Rosenstein hervor. </p> <p class="contentOne">Die Fläche, die mit der Fertigstellung des neuen Hauptbahnhofs frei wird, bietet für die Stadt Stuttgart enormes Potenzial. Ein Quartier soll entstehen, das nachhaltig und klimagerecht ist und dabei leben, arbeiten und wohnen verbindet. Die Arbeitsgemeinschaft asp Architekten GmbH und Koeber Landschaftsarchitektur GmbH gingen mit ihrem städtebaulichen Konzept als Sieger aus dem Internationalen städtebaulichen Wettbewerb Rosenstein hervor. </p>
......
vcm/templates/story/story.css
View file @ 7203280f
...@@ -21,18 +21,29 @@ header{ ...@@ -21,18 +21,29 @@ header{
border-bottom-color: #121212; border-bottom-color: #121212;
} }
.buttonset.one{ .btn_size{
padding: 4px 12px 4px 12px !important;
}
.buttonset.one{
background-color: #ffffff;
color: #121212 !important;
border: 1px solid #121212 !important;
border-radius: 10px;
}
.buttonset.one:hover{
background-color: #121212; background-color: #121212;
} color: #ffffff !important;
.buttonset.one:hover{ } /**/
background-color: #5e5e5e; .buttonset.two{
} background-color: #ffffff;
.buttonset.two{ color: #121212;
border: 1px solid #121212;
border-radius: 10px;
}
.buttonset.two:hover{
background-color: #121212; background-color: #121212;
} color: #ffffff;
.buttonset.two:hover{ }
background-color: #5e5e5e;
}
h1{ h1{
color: #121212; color: #121212;
} }
...@@ -292,6 +303,7 @@ div.title-fill { ...@@ -292,6 +303,7 @@ div.title-fill {
background-color: #121212; background-color: #121212;
top: 1em; top: 1em;
padding:.45rem .55rem; padding:.45rem .55rem;
display: none !important;
} }
#tour-button > i:before{ #tour-button > i:before{
content: "\f061"; content: "\f061";
...@@ -423,3 +435,8 @@ div.title-fill { ...@@ -423,3 +435,8 @@ div.title-fill {
.hidden { .hidden {
display: none!important; display: none!important;
} }
h1{
margin-top:6em;
margin-bottom:2em;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal