Finish UI for project 2

This commit is contained in:
Marcel Schwarz 2020-11-26 02:19:28 +01:00
parent 7ba71f2dd7
commit 24cad951d5
2 changed files with 31 additions and 21 deletions

View File

@ -10,34 +10,45 @@
<link href="style.css" rel="stylesheet">
</head>
<body>
<body class="bg-dark">
<nav class="navbar navbar-light bg-light">
<h5 class="navbar-text text-dark">
Geo Visualisierung - Projekt 2 - Tim Herbst & Marcel Schwarz
</h5>
</nav>
<div class="mx-5 my-2">
<div class="row">
<h1 class="col text-center">Aufgabe 1</h1>
</div>
<div class="row mb-5">
<div class="row my-3">
<div class="col">
<div id="map" style="height: 40rem" class="w-auto"></div>
<div class="card">
<h4 class="card-header">Aufgabe 1 - European population density map</h4>
<div id="map" style="height: 60vh" class="w-auto card-body"></div>
</div>
</div>
</div>
<div class="row">
<h1 class="col text-center">Aufgabe 2</h1>
</div>
<div class="row mb-5">
<div class="row my-3">
<div class="col">
<div id="poiMap" style="height: 50rem" class="w-auto"></div>
<div class="card">
<h4 class="card-header">Aufgabe 2 - POIs in Stuttgart</h4>
<div id="poiMap" style="height: 60vh" class="w-auto card-body"></div>
</div>
</div>
</div>
<div class="row">
<h1 class="col text-center">Aufgabe 3</h1>
</div>
<div class="row">
<div class="row my-3">
<div class="col">
<div id="suiMap" style="height: 50rem" class="w-auto"></div>
<div class="card">
<h4 class="card-header">Aufgabe 3 - UN SAN/H2O Europa</h4>
<div id="suiMap" style="height: 60vh" class="w-auto card-body"></div>
</div>
</div>
</div>
</div>
<footer class="mt-5 text-center" style="background-color: #f5f5f5; height: 2rem">
<div class="container">
<span class="text-muted">&copy;2020 - Tim Herbst & Marcel Schwarz </span>
</div>
</footer>
<script defer src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

View File

@ -2,6 +2,10 @@
background-color: #c5e8ff;
}
.footer {
background-color: #f5f5f5;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
@ -12,11 +16,6 @@
max-width: 40vw;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
line-height: 18px;
color: #555;