	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Fennek und seine Umwelt - Beispielseite HTML5</title>
	<meta name="description" content="Die Website fennek.mobi dient als Beispiel für 3 Spalten Layout und dem HTML-Kurs www.HTML-Seminar.de">
	<link href="design.css" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="slicknav/slicknav.min.css">
	</head>
	<body>


	<header>
	<p id="logotext">Fennek Wüstenläufer</p>

	<p>3-Spalten-Webdesign in HTML5<br>
	Schritt für Schritt erklärt<br>
	von <a href="https://www.html-seminar.de/">www.html-seminar.de</a></p>
	</header>

	<div id="wrapper">

	<nav id="steuerungoben">
	<ul>
	<li><a href="index.htm">Startseite</a></li>
	<li><a href="vorstellung.htm">Vorstellung</a></li>
	<li><a href="einzelteile.htm">Einzelteile</a></li>
	</ul>
	</nav>

	<nav id="steuerunglinks">
	<ul>
	<li><a href="index.htm">Startseite</a></li>
	<li><a href="vorstellung.htm">über diese Website</a>
	<ul>
	<li><a href="einzelteile.htm">Einzelteile</a></li>
	<li><a href="design-verwenden.htm">Design verwenden</a></li>
	</ul>
	</li>
	<li><a href="kontakt.htm">Kontakt</a></li>
	<li><a href="impressum.htm">Impressum</a></li>
	<li><a href="datenschutzerklaerung.php">Datenschutzerklärung</a></li>
	</ul>
	</nav>

	<article>
	<h2 style="color: red;">aktuelle Fensterbreite:<br>
	<span id="ausgabebreite"></span></h2>

	<script>
	window.addEventListener ('load', function () {
	var ausgabebreite = document.getElementById('ausgabebreite');

	// Breite beim Laden anzeigen
	var width = window.innerWidth;
	var inEM = width/16;

	ausgabebreite.innerHTML = width + "px = " + inEM + "em";

	window.onresize = function () {
	width = window.innerWidth;
	var inEM = width/16;
	ausgabebreite.innerHTML = width + "px = " + inEM + "em";
	}
	});
	</script>

	<h1>Fennek - Wüstenläufer</h1>

	<p>Der Fennek bzw. der Wüstenfuchs ist ein Wildhund mit extrem großen Ohren, die dem Wärmeausgleich dienen. Die Ohren sind ca. 15 cm lang - bei einer Gesamtläge von ca. 40 cm ist das proportional beachtlich.</p>

	<p>Lebt gerne im Sand - sprich in Wüsten und schläft tagsüber.</p>

	<h2>Mahlzeiten des Fennek</h2>

	<p>Zu der Nahrung der Fenneks zählen:</p>

	<ul>
	<li>Mäuse</li>
	<li>Heuschrecken</li>
	<li>Eidechsen</li>
	<li>Vögel</li>
	<li>Obst und Beeren (in Gefangenschaft)</li>
	</ul>

	<hr>

	<h2>Der Mozilla-Fennec</h2>

	<p>Bei dem Fennec von Mozilla handelt es sich um einen mobilen Webbrowser, der als kleiner Bruder des Firefox einen passenden Namen benötigt hat. Und ein Fennek ist definitiv kleiner als ein Fuchs:)</p>

	<p>Diese Seite hat nichts mit Fennec von mozilla.org zu tun - wenn Sie aber zu Mozillas mobilem Webbrowser Fennec wollen, gehen Sie zu <a href="http://website-archive.mozilla.org/www.mozilla.org/fennec_releasenotes/projects/fennec/1.0a1/releasenotes/">Mozilla</a>.</p>

	<hr>

	<h2>Sinn und Zweck dieser Website</h2>

	<p>Diese Website dient als Nachbau-Objekt und zum Lernen von HTML und CSS. Alle benötigten Einzelteile bekommen Sie auf den Unterseiten. Beachten Sie, dass der Hintergrund frei ausgetauscht werden kann.</p>

	<p>Die Schritt für Schritt Anleitung zum Nachbau in HTML und CSS gibt es unter
	<a href="https://www.html-seminar.de/3-spalten-layout-mit-css-erstellen.htm">https://www.html-seminar.de/3-spalten-layout-mit-css-erstellen.htm</a>
	</p>

	<p>Jetzt viel Spaß beim Nachbau des 3-Spalten-Webdesigns.</p>

	<p>Axel</p>
	</article>

	<aside>
	<p>Bildersammlung:</p>

	<p>
	<img src="bilder/fennek-1.jpg"
	width="155" height="116"
	alt="Fennek schlafend" title="Fennek schlafend" >

	<img src="bilder/fennek-2.jpg"
	width="155" height="116"
	alt="Fennek schläft noch immer"
	title="Fennek schläft noch immer" >

	<img src="bilder/fennek-3.jpg"
	width="155" height="116"
	alt="Fenneks sind Nachts wach"
	title="Fenneks sind Nachts wach" >
	</p>
	</aside>

	<footer>
	<p>© 2017 - 2021
	<a href="https://fennek.mobi/">https://fennek.mobi</a></p>
	</footer>
	</div>

	<script src="js/jquery.js"></script>
	<script src="slicknav/jquery.slicknav.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	$('#steuerunglinks').slicknav({
	allowParentLinks: true,
	label: "MENÜ"
	}
	);
	});
	</script>


	</body>
	</html>