forked from openSenseLab/sensillerbeck-dashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mapstories.html
executable file
·89 lines (83 loc) · 4.62 KB
/
mapstories.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body {
font-family: 'Raleway', serif;
font-size: 18px;
}
#map { width: 100%; height: 100%; }
div.a{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<a href="./" class="d-flex align-items-center text-dark text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
fill="currentColor"></path>
</svg>
<span class="fs-4">Dashboard</span>
</a>
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<a class="me-3 py-2 text-dark text-decoration-none" href="./dashboard">Dashboard</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="./karten.html">Karten</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="./index.html">Index</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="./impressum.html">Impressum</a>
</nav>
</div>
</header>
<main>
<div class="row">
<div class="col">
<!-- Element: Idee des Tages -->
<div class="card rounded-3 shadow-sm mb-4">
<div class="card-header py-3">
<div class="row justify-content-between">
<div class="col">
<h4 class="my-0 fw-normal">Billerbeck Global – Lokal</h4>
</div>
<div class="col">
</div>
</div>
</div>
<div class="card-body">
Mapstories zu glokalen Orten in Billerbeck<br><br>
Hier werden lokale Orte dargestellt, die eine globale Verknüpfung haben – also ein glokales Billerbeck! Die Mapstories
erzählen dabei, wie unterschiedliche Orte auf der Welt mit Billerbeck verbunden ist. Von E-Mobilität, Waldaufforstung,
Integration und fairem Handel ist alles mit dabei – schau einfach mal rein!
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<!-- Element: Idee des Tages -->
<div class="card rounded-3 shadow-sm mb-4">
<div class="card-header py-3">
<div class="row justify-content-between">
<div class="col">
<h4 class="my-0 fw-normal">Müll in den Weltmeeren</h4>
</div>
<div class="col">
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<iframe src="https://mapstories.de/embed/all/story/mull-in-den-weltmeeren/start" style="border:none; width:100%; height:50vh" title="Mapstories"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>