2020-11-21 15:13:53 +01:00

211 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Arboretum - Grüner Salon e.V.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body class="d-flex flex-column">
<div class="page-content container">
<div class="row">
<div class="col-lg-8 mx-auto mt-3">
<main class="">
<h1 class="ml-3">Mammutbaum</h1>
<div class="card card-body my-3 no-content">
<h2 class="card-title">INFORMATIONEN</h2>
<dl class="row">
<dt class="col-lg-3">lateinischer Name</dt>
<dd class="col-lg-9">Arbor</dd>
<dt class="col-lg-3">Heimat</dt>
<dd class="col-lg-9"></dd>
</dl>
</div>
<div class="my-3 container-fluid">
<h2 class="">Geschichten eines Mammutbaums</h2>
<div class="row my-1">
<div class="col-lg-3">
<img class="card-img" src="Julia1.jpg" alt="Julia Hill auf dem Baum">
</div>
<div class="card card-body col-lg-9">
<h3>Julia "Butterfly" Hill</h3>
<p>
Julia "Butterfly" Hill wurde am 18. Februar 1974 in Mount Vernon, Missouri geboren.
Sie
bestieg am 10. Dezember 1997 einen kalifornischen Küstenmammutbaum und lebte dort
für
738
Tage, um ihn vor dem Abholzen durch die Firma Pacific Lumber zu beschützen. Im
Rahmen
ihrer
Reise kam sie nach Humboldt County und nahm an einer Spendensammlung zur Rettung der
Wälder
teil. Einige der Teilnehmer besetzten die Bäume, um die Arbeiter von Pacific Lumber
am
Kahlschlag zu hindern. Die Organisatoren suchten jemand, der für eine Woche in dem
Baum
bleibt.
</p>
<blockquote class="blockquote text-success">
“Nobody else would volunteer so they had to pick me. - Niemand anderes wollte es
freiwillig
machen, also suchten sie mich aus.“
</blockquote>
</div>
</div>
<div class="row my-1">
<div class="col-lg-3">
<img class="card-img" src="petra_buschkamp.jpg" alt="Petra Buschkämper">
</div>
<div class="card card-body col-lg-9">
<h3>Petra Buschkämper</h3>
<p>
Die Künstlerin und Sprecherin Petra Buschkämper erzählt die Geschichte von Julia
Hill, die über zwei Jahre auf dem Mammutbaum lebte, um ihn vor dem Abholzen zu
schützen.
</p>
<audio src="Mammutbaum.mp3" controls>
Ihr Browser kann dieses Tondokument nicht wiedergeben.<br>
Sie können es unter
<a href="Mammutbaum.mp3">diesem Link</a>
abrufen.
</audio>
</div>
</div>
<div class="row my-1">
<div class="col-lg-3">
<img class="card-img" src="julia_mantel.jpg" alt="Julia Hill auf dem Baum">
</div>
<div class="card card-body col-lg-9">
<h3>Julia Mantel</h3>
<p>
Der Text wurde von Julia Mantel verfasst. Sie veröffentlichte im Frühjahr 2018 ihren
dritten Lyrikband
<strong> „Der Bäcker gibt mir das Brot auch so“</strong>.
</p>
</div>
</div>
</div>
<div class="card card-body my-3">
<h2 class="card-title">QUIZ</h2>
<form action="">
<div class="form-group row">
<label for="quiz1" class="col-form-label col-12">
Wie ist der lateinische Name des BAUMS?
</label>
<div class="col-12">
<input type="text" name="quiz1" id="quiz1" class="form-control">
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" class="btn btn-secondary" value="Antwort prüfen">
</div>
</div>
</form>
</div>
</main>
</div>
<aside class="col-lg-4 mx-auto mt-3">
<div class="card my-3">
<div class="card-img-top">
<div id="mapdiv"></div>
</div>
<div class="card-body">
<h2 class="card-title h6">KARTE</h2>
</div>
</div>
<div class="my-3">
<h2 class="card-title">BILDER</h2>
<div class="card">
<img class="card-img" src="blaetter.jpeg" />
<div class="card-img-overlay">
<h5 class="card-title">Blätter des Mammutbaums</h5>
</div>
</div>
</div>
<div class="card card-body my-3">
<h2 class="card-title">RUNDGANG</h2>
<div class="card-actions">
<a class="card-action col" href="/arboretum">weiter</a>
<a class="card-action col" href="/arboretum/linde">zurück</a>
</div>
</div>
<div class="card card-body my-3">
<h2 class="card-title">INTERESSANTES</h2>
<p class="card-text">
<a href="https://wikipedia.de/wiki/Mammutbaum" target="_blank">zu Wikipedia</a>
</p>
</div>
</aside>
</div>
</div>
<footer class="sticky-footer text-dark">
<div class="container">
<div class="row text-center">
<div class="col-lg-2 ml-auto">
<a class="btn btn-link" href="/arboretum">Arboretum</a>
</div>
<div class="col-lg-2 mx-auto">
<a class="btn btn-link" href="/datenschutzerklaerung">Datenschutzerklärung</a>
</div>
<div class="col-lg-2 mr-auto">
<a class="btn btn-link" href="/impressum">Impressum</a>
</div>
</div>
<div class="row">
<div class="col mx-auto copyright text-center">
Copyright © Der Grüne Salon e.V. Designed by Benjamin Barnett
</div>
</div>
</div>
</footer>
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat(11.38101, 51.17635)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var zoom = 18;
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var marker = new OpenLayers.Marker(lonLat);
marker.icon.imageDiv.title = "Sie sind hier"
markers.addMarker(marker);
map.setCenter(lonLat, zoom);
</script>
</body>
</html>