152 lines
6.3 KiB
HTML
152 lines
6.3 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">Fichte</h1>
|
|
<div class="card card-body my-3">
|
|
<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">Europa</dd>
|
|
</dl>
|
|
<p class="card-text">
|
|
<audio src="Fichte.mp3" controls></audio>
|
|
</p>
|
|
</div>
|
|
<div class="card card-body my-3">
|
|
<h2 class="card-title">MENSCH-BAUM</h2>
|
|
<p class="card-text">
|
|
|
|
</p>
|
|
</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 der Fichte?
|
|
</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 no-content">
|
|
<div id="mapdiv"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h2 class="card-title h6">KARTE</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card my-3 no-content">
|
|
<div class="card-img-top">
|
|
|
|
</div>
|
|
<div class="card-body">
|
|
<h2 class="card-title">BILDER</h2>
|
|
|
|
</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/ginkgo">weiter</a>
|
|
<a class="card-action col" href="/arboretum/eiche">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/Fichte" 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> |