<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Meine Website</title>
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #333; color: white; padding: 20px; text-align: center; }
.container { display: flex; min-height: 100vh; }
main { flex: 1; padding: 20px; }
nav {
width: 200px;
background: #f4f4f4;
padding: 20px;
order: 2; /* Menü rechts */
}
nav ul { list-style: none; padding: 0; margin: 0; }
nav li { margin: 10px 0; }
nav li ul { margin-left: 15px; } /* Untermenü einrücken */
nav a { color: #333; text-decoration: none; display: block; }
.gallery img { max-width: 100%; height: auto; margin-bottom: 10px; }
footer { background: #ddd; text-align: center; padding: 10px; }
</style>
</head>
<body>
<header>
<h1>Mein Banner / Titel</h1>
</header>
<div class="container">
<main>
<!-- Hier kommt dein Text -->
<p>Hier kannst du alles schreiben: Texte, Fotos, Listen …</p>
<!-- Beispielgalerie -->
<div class="gallery">
<img src="bilder/foto1.jpg" alt="Foto 1">
<img src="bilder/foto2.jpg" alt="Foto 2">
</div>
</main>
<nav>
<!-- Menü flexibel selbst erstellen -->
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li>
<a href="#">Menüpunkt 2</a>
<ul>
<li><a href="#">Unterpunkt 2.1</a></li>
<li><a href="#">Unterpunkt 2.2</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 3</a></li>
<!-- Weitere Menüeinträge beliebig -->
</ul>
</nav>
</div>
<footer>
© 2025 Meine Website
</footer>
</body>
</html>