198 lines
8.0 KiB
HTML
198 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Haus Schleusingen</title>
|
||
<link rel="stylesheet" href="css/haus-schleusingen.css">
|
||
<link rel="stylesheet" href="fonts/fonts.css">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="main-nav">
|
||
<div class="nav-container">
|
||
<a href="#" class="logo">Haus Schleusingen</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#hero">Startseite</a></li>
|
||
<li><a href="#about">Über uns</a></li>
|
||
<li><a href="#zimmer">Zimmer</a></li>
|
||
<li><a href="#galerie">Galerie</a></li>
|
||
<li><a href="#kontakt">Kontakt</a></li>
|
||
</ul>
|
||
<button class="nav-toggle" aria-label="Menü öffnen">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="hero" class="hero">
|
||
<div class="hero-content">
|
||
<h1>Willkommen in Haus Schleusingen</h1>
|
||
<p>Ihr Zu Hause am Rande des Thüringer Waldes</p>
|
||
<a href="#zimmer" class="btn btn-primary">Zimmer entdecken</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Section -->
|
||
<section id="about" class="section about">
|
||
<div class="container">
|
||
<h2 class="section-title">Über uns</h2>
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<p>Genießen Sie die Gemütlichkeit und den Komfort unseres Hauses. Haus Schleusingen bietet Ihnen eine ideale Ausgangslage für Wanderungen und Ausflüge im Thüringer Wald.</p>
|
||
<p>Wir freuen uns auf Ihren Besuch!</p>
|
||
</div>
|
||
<div class="about-image">
|
||
<img src="images/about.jpg" alt="Haus Schleusingen">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Zimmer Section -->
|
||
<section id="zimmer" class="section zimmer">
|
||
<div class="container">
|
||
<h2 class="section-title">Unsere Zimmer</h2>
|
||
<div class="zimmer-grid">
|
||
<div class="zimmer-card">
|
||
<div class="zimmer-image">
|
||
<img src="images/zimmer1.jpg" alt="Einzelzimmer">
|
||
</div>
|
||
<div class="zimmer-info">
|
||
<h3>Einzelzimmer</h3>
|
||
<p>Gemütliche Einzelzimmer mit allem Komfort.</p>
|
||
<span class="price">ab 55 € / Nacht</span>
|
||
</div>
|
||
</div>
|
||
<div class="zimmer-card">
|
||
<div class="zimmer-image">
|
||
<img src="images/zimmer2.jpg" alt="Doppelzimmer">
|
||
</div>
|
||
<div class="zimmer-info">
|
||
<h3>Doppelzimmer</h3>
|
||
<p>Räumliche Doppelzimmer für Paare und Alleinreisende.</p>
|
||
<span class="price">ab 75 € / Nacht</span>
|
||
</div>
|
||
</div>
|
||
<div class="zimmer-card">
|
||
<div class="zimmer-image">
|
||
<img src="images/zimmer3.jpg" alt="Familienzimmer">
|
||
</div>
|
||
<div class="zimmer-info">
|
||
<h3>Familienzimmer</h3>
|
||
<p>Geräumige Zimmer für die ganze Familie.</p>
|
||
<span class="price">ab 95 € / Nacht</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Galerie Section -->
|
||
<section id="galerie" class="section galerie">
|
||
<div class="container">
|
||
<h2 class="section-title">Galerie</h2>
|
||
<div class="galerie-grid">
|
||
<div class="galerie-item">
|
||
<img src="images/galerie1.jpg" alt="Haus Schleusingen Ansicht">
|
||
</div>
|
||
<div class="galerie-item">
|
||
<img src="images/galerie2.jpg" alt="Zimmer">
|
||
</div>
|
||
<div class="galerie-item">
|
||
<img src="images/galerie3.jpg" alt="Thüringer Wald">
|
||
</div>
|
||
<div class="galerie-item">
|
||
<img src="images/galerie4.jpg" alt="Frühstück">
|
||
</div>
|
||
<div class="galerie-item">
|
||
<img src="images/galerie5.jpg" alt="Terrasse">
|
||
</div>
|
||
<div class="galerie-item">
|
||
<img src="images/galerie6.jpg" alt="Aussicht">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Kontakt Section -->
|
||
<section id="kontakt" class="section kontakt">
|
||
<div class="container">
|
||
<h2 class="section-title">Kontakt</h2>
|
||
<div class="kontakt-content">
|
||
<div class="kontakt-info">
|
||
<div class="kontakt-item">
|
||
<h3>Adresse</h3>
|
||
<p>Haus Schleusingen<br>Musterstraße 1<br>98553 Schleusingen</p>
|
||
</div>
|
||
<div class="kontakt-item">
|
||
<h3>Telefon</h3>
|
||
<p><a href="tel:+493684148990">+49 36841 48990</a></p>
|
||
</div>
|
||
<div class="kontakt-item">
|
||
<h3>E-Mail</h3>
|
||
<p><a href="mailto:mki@kies-media.de">mki@kies-media.de</a></p>
|
||
</div>
|
||
<div class="kontakt-item">
|
||
<h3>Öffnungszeiten</h3>
|
||
<p>Rezeption: 08:00 – 20:00 Uhr<br>Frühstück: 07:00 – 10:00 Uhr</p>
|
||
</div>
|
||
</div>
|
||
<div class="kontakt-formular">
|
||
<form id="kontaktForm">
|
||
<div class="form-group">
|
||
<label for="name">Name</label>
|
||
<input type="text" id="name" name="name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">E-Mail</label>
|
||
<input type="email" id="email" name="email" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="nachricht">Nachricht</label>
|
||
<textarea id="nachricht" name="nachricht" rows="5" required></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Nachricht senden</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-col">
|
||
<h4>Haus Schleusingen</h4>
|
||
<p>Ihr Zu Hause am Rande des Thüringer Waldes.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Kontakt</h4>
|
||
<p>Musterstraße 1<br>98553 Schleusingen</p>
|
||
<p><a href="tel:+493684148990">+49 36841 48990</a></p>
|
||
<p><a href="mailto:mki@kies-media.de">mki@kies-media.de</a></p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Links</h4>
|
||
<ul>
|
||
<li><a href="#about">Über uns</a></li>
|
||
<li><a href="#zimmer">Zimmer</a></li>
|
||
<li><a href="#kontakt">Kontakt</a></li>
|
||
<li><a href="#">Impressum</a></li>
|
||
<li><a href="#">Datenschutz</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2025 Haus Schleusingen. Alle Rechte vorbehalten.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/haus-schleusingen.js"></script>
|
||
</body>
|
||
</html> |