Leuchtturm Stand 08.Juli
This commit is contained in:
Max
@@ -0,0 +1,197 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Reiseagentur Leuchtturm</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Reiseagentur Leuchtturm</h1>
|
||||
<nav>
|
||||
<!--
|
||||
Mit dem Argument 'this' wird der Funktion das Element mitgegeben, das die Funktion aufruft.
|
||||
Wird hier verwendet, um dem Button die Klasse 'active' hinzuzufügen / zu entfernen.
|
||||
-->
|
||||
<button onclick="loadPage(this, 'home')" id="homeButton">Start</button>
|
||||
<button onclick="loadPage(this, 'berge')">Urlaub in den Bergen</button>
|
||||
<button onclick="loadPage(this, 'malediven')">Urlaub auf den Malediven</button>
|
||||
<button onclick="loadPage(this, 'toskana')">Urlaub in der Toskana</button>
|
||||
<button onclick="loadPage(this, 'daheim')">Urlaub in Balkonien</button>
|
||||
<button onclick="loadPage(this, 'barcelona')">Urlaub in Barcelona</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="content"></main>
|
||||
|
||||
<footer>
|
||||
<span>Reiseagentur Leuchtturm GmbH © 2026</span>
|
||||
<span>|</span>
|
||||
<button onclick="loadPage(this, 'impressum')">Impressum</button>
|
||||
</footer>
|
||||
|
||||
<!--
|
||||
template-Elemente werden standardmäßig nicht angezeigt, können aber über JavaScript angesprochen werden.
|
||||
Anstatt den html-Code in der loadPage()-Funktion zu definieren, kopiert loagPage() hier den Inhalt einfach aus den
|
||||
entsprechenden Templates.
|
||||
-->
|
||||
<template id="homeTemplate">
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Ihr Traumurlaub bei der Reiseagentur Leuchtturm</h2>
|
||||
<p>Buchen Sie Ihren Urlaub bei uns!</p>
|
||||
</div>
|
||||
<div class="content-img right"><img src="./src/Leuchtturm.jpg" alt="Leuchtturm"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<template id="bergeTemplate">
|
||||
<section>
|
||||
<div class="content-img left"><img src="./src/Bergdorf.jpg" alt="Bergdorf"></div>
|
||||
<div class="content-text">
|
||||
<h2>Urlaub in den Bergen</h2>
|
||||
<p>Genießen Sie die frische Luft und die atemberaubende Aussicht.</p>
|
||||
<a href="https://de.wikipedia.org/wiki/Berge" target="_blank rel='noopener noreferrer'">Mehr über Berge</a>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Die volle Natur</h2>
|
||||
<p>Es ist für jeden was dabei.</p>
|
||||
</div>
|
||||
<div class="content-img right"><img src="./src/BergMitNebel.jpg" alt="Berg mit Nebel"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<template id="maledivenTemplate">
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Urlaub auf den Malediven</h2>
|
||||
<p>Genießen Sie die frische Luft und die atemberaubende Aussicht.</p>
|
||||
<a href="https://de.wikipedia.org/wiki/Malediven" target="_blank rel='noopener noreferrer'">Mehr über die Malediven</a>
|
||||
</div>
|
||||
<div class="content-img left"><img src="./src/HerrenHausAmMeer.jpg" alt="Haus am Meer"></div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="content-img right"><img src="./src/PalmenVorStrand.jpg" alt="Strand mit Palmen"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<template id="toskanaTemplate">
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Urlaub in der Toskana</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
|
||||
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
|
||||
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
|
||||
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
|
||||
</div>
|
||||
<div class="content-img left"><img src="./src/Toskana.jpg" alt="Grünes Tal in der Toscana"></div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Einzigartige Landschaft</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-img right"><img src="./src/Toskana2.jpg" alt="Grünes Tal in der Toscana" ></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<template id="daheimTemplate">
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Urlaub in vertrauten vier Wänden</h2>
|
||||
<p>Hier gibt's nichts zu buchen.</p>
|
||||
</div>
|
||||
<div class="content-img left"><img src="./src/Wohnzimmer.png" alt="Ein Wohnzimmer"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<template id="barcelonaTemplate">
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Urlaub in Barcelona</h2>
|
||||
<p>Barcelona ist die Hauptstadt Kataloniens und nach Madrid die zweitgrößte Stadt Spaniens. Sie liegt am Mittelmeer, circa 120 Kilometer südlich der Pyrenäen und der Grenze zu Frankreich. Barcelona ist Verwaltungssitz der gleichnamigen Provinz und der Comarca Barcelonès.</p>
|
||||
<p>Innerhalb des Stadtgebietes leben 1.731.649 Menschen (Stand: 2025). Damit ist Barcelona die neuntgrößte Gemeinde der Europäischen Union, nach Hamburg die zweitgrößte, die nicht die Hauptstadt eines Mitgliedstaates ist, und mit mehr als 16.000 Einwohnern pro Quadratkilometer nach Paris die am zweitdichtesten besiedelte Millionenstadt Europas. Zusammen mit den in der Àrea Metropolitana de Barcelona zusammengeschlossenen Gemeinden der Agglomeration beträgt die Einwohnerzahl 3,16 Millionen. Im weiteren Einzugsbereich der Metropolregion (Àmbit Metropolità de Barcelona) leben insgesamt 4,86 Millionen Menschen. Mit jährlich mehr als sieben Millionen Touristen aus dem Ausland (Stand 2015) zählt Barcelona überdies zu den drei meistbesuchten Städten Europas.</p>
|
||||
<p><a href="https://de.wikipedia.org/wiki/Barcelona" target="_blank rel='noopener noreferrer'">Erfahren Sie mehr</a></p>
|
||||
</div>
|
||||
<div class="content-img left"><img src="./src/Barcelona.png" alt="Barcelona"></div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Sehenswürdigkeiten</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
|
||||
</div>
|
||||
<div class="content-img right"><img src="./src/Barcelona2.png" alt="Arc de Triomf in Barcelona"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<template id="impressumTemplate">
|
||||
<section>
|
||||
<div class="content-text">
|
||||
<h2>Impressum</h2>
|
||||
|
||||
<p>
|
||||
<strong>Anbieter:</strong><br>
|
||||
Max Mustermann<br>
|
||||
Musterstraße 1<br>
|
||||
80999 München
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Kontakt:</strong><br>
|
||||
Telefon: 089/1234567-8<br>
|
||||
Telefax: 089/1234567-9<br>
|
||||
E-Mail: mail@mustermann.de<br>
|
||||
Website: www.mustermann.de
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<strong>Bei redaktionellen Inhalten:</strong><br>
|
||||
|
||||
Verantwortlich nach § 55 Abs.2 RStV<br>
|
||||
Moritz Schreiberling<br>
|
||||
Musterstraße 2<br>
|
||||
80999 München
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!--
|
||||
Muster für Templates
|
||||
<template id="[seitenname*]Template">
|
||||
<section>
|
||||
<div class="content-text"></div>
|
||||
<div class="content-img [right/left**]></div>
|
||||
</section>
|
||||
... (beliebig viele section-Elemente)
|
||||
</template>
|
||||
|
||||
* Muss dem String entsprechen, mit dem der Button in der Navigationsliste loadPage aufruft
|
||||
-> z.B. loadPage(this, 'home') => "homeTemplate" / loadPage(this, 'berge') => "bergeTemplate")
|
||||
** je nachdem auf welcher Seite das Bild erscheinen soll
|
||||
-->
|
||||
|
||||
|
||||
<script src="./script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user