Jontil88
2b462bc0e6
- Static HTML hotel website with Bootstrap 5 - i18next-based client-side internationalization - Language switcher (DE/EN) in navbar - German and English translation JSON files - Translated: navigation, content, forms, FAQ, legal pages (AGB) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
451 lines
18 KiB
HTML
451 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Work+Sans:wght@400;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
|
|
<link rel="stylesheet" href="fonts/icomoon/style.css">
|
|
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
|
|
|
|
<link rel="stylesheet" href="css/tiny-slider.css">
|
|
<link rel="stylesheet" href="css/aos.css">
|
|
<link rel="stylesheet" href="css/flatpickr.min.css">
|
|
<link rel="stylesheet" href="css/glightbox.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
|
|
|
|
|
<title>Hotel am See —Ihre Unterkunft in Obermaubach</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="site-mobile-menu site-navbar-target">
|
|
<div class="site-mobile-menu-header">
|
|
<div class="site-mobile-menu-close">
|
|
<span class="icofont-close js-menu-toggle"></span>
|
|
</div>
|
|
</div>
|
|
<div class="site-mobile-menu-body"></div>
|
|
</div>
|
|
|
|
<nav class="site-nav">
|
|
<div class="container">
|
|
<div class="menu-bg-wrap">
|
|
<div class="site-navigation">
|
|
<div class="row g-0 align-items-center">
|
|
<div class="col-2">
|
|
<a href="index.html" class="logo m-0 float-start text-white" data-i18n="common.logo">Hotel am See</a>
|
|
</div>
|
|
<div class="col-8 text-center">
|
|
<ul class="js-clone-nav d-none d-lg-inline-block text-start site-menu mx-auto">
|
|
<li class="active"><a href="index.html" data-i18n="common.nav.home">Home</a></li>
|
|
<li><a href="rooms.html" data-i18n="common.nav.rooms">Unsere Zimmer</a></li>
|
|
<li><a href="services.html" data-i18n="common.nav.services">Services</a></li>
|
|
<li><a href="about.html" data-i18n="common.nav.about">Über uns</a></li>
|
|
<li><a href="contact.html" data-i18n="common.nav.contact">Kontakt</a></li>
|
|
<li><a href="impressum.html" data-i18n="common.nav.impressum">Impressum</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-2 text-end">
|
|
<a href="#"
|
|
class="burger ms-auto float-end site-menu-toggle js-menu-toggle d-inline-block d-lg-none light">
|
|
<span></span>
|
|
</a>
|
|
|
|
<div class="lang-switcher float-end" role="navigation" aria-label="Sprachwahl / Language selection">
|
|
<a href="#" class="lang-option active" data-lang="de" aria-label="Deutsch" aria-current="true">DE</a>
|
|
<span class="lang-divider" aria-hidden="true">|</span>
|
|
<a href="#" class="lang-option" data-lang="en" aria-label="English">EN</a>
|
|
</div>
|
|
|
|
<a href="#" class="call-us d-flex align-items-center">
|
|
<span class="icon-phone"></span>
|
|
<span data-i18n="[html]common.phone">+49 2422 / 504 48 66<br>+49 176 / 847 34 595</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="hero overlay" style="background-image: url('images/img_1.jpg')">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<h1 class="heading mb-5 text-white" data-aos="fade-up" data-i18n="index.hero_heading">Willkommen</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section sec-features bg-light">
|
|
<div class="container">
|
|
<div class="row mb-5">
|
|
<div class="col-lg-6" data-aos="fade-up">
|
|
<h2 class="heading" data-i18n="index.service_heading">Unser Service</h2>
|
|
|
|
</div>
|
|
<div class="col-lg-6 text-end">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-slider-wrap" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="features-slider" id="features-slider">
|
|
|
|
<div class="item">
|
|
|
|
<div class="feature bg-color-1">
|
|
<span class="flaticon-trekking"></span>
|
|
|
|
<h3 data-i18n="index.feature_hiking_title">Wanderungen</h3>
|
|
<p class="text-black-50" data-i18n="index.feature_hiking_text">Starten Sie von unserem Hotel aus eine traumhafte Wanderung durch die schönsten Gegenden der Eifel!</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
|
|
<div class="feature bg-color-2">
|
|
<span class="flaticon-map"></span>
|
|
|
|
<h3 data-i18n="index.feature_event_title">Event Location</h3>
|
|
<p class="text-black-50" data-i18n="index.feature_event_text">Wir bieten Ihnen einen großzügig gestalteten Raum für Ihre Veranstaltung für bis zu 40 Personen.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
|
|
<div class="feature bg-color-3">
|
|
<span class="flaticon-suitcase"></span>
|
|
|
|
<h3 data-i18n="index.feature_luggage_title">Gepäck</h3>
|
|
<p class="text-black-50" data-i18n="index.feature_luggage_text">Gerne können Sie ihr Gepäck bei uns Aufbewahren.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section ">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-7" data-aos="fade-up" data-aos-delay="100">
|
|
<div id="features-slider-nav">
|
|
<button class="btn btn-primary prev" data-controls="prev" data-i18n="common.prev">Zurück</button>
|
|
<button class="btn btn-primary next" data-controls="next" data-i18n="common.next">Weiter</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section sec-about">
|
|
<div class="container">
|
|
<div class="row g-5 justify-content-between">
|
|
<div class="col-lg-6 has-bg" data-aos="fade-right">
|
|
<img src="images/about_1.jpg" alt="Image" class="img-fluid img-box-shadow rounded">
|
|
</div>
|
|
<div class="col-lg-4 align-self-center" data-aos="fade-left" data-aos-delay="100">
|
|
<h2 class="heading mb-4" data-i18n="index.about_heading"><br><br><br><br>Das Hotel am See</h2>
|
|
<p data-i18n="index.about_text">Willkommen im Herzen der Voreifel! Entdecken Sie die malerische Landschaft und verbringen Sie einen
|
|
unvergesslichen
|
|
Aufenthalt in unserem "Hotel am See". Lassen Sie sich von unserem freundlichen Personal verwöhnen und
|
|
genießen Sie
|
|
die Annehmlichkeiten eines modernen Hotels.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section sec-posts">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-lg-7" data-aos="fade-up">
|
|
<h2 class="heading mb-4" data-i18n="index.impressions_heading">Impressionen</h2>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-12" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="post-slider-wrap">
|
|
|
|
<div id="post-slider-nav">
|
|
<button class="btn btn-primary prev" data-controls="prev" data-i18n="common.prev">Zurück</button>
|
|
<button class="btn btn-primary next" data-controls="next" data-i18n="common.next">Weiter</button>
|
|
</div>
|
|
|
|
|
|
<div class="post-slider" id="post-slider">
|
|
|
|
<div class="item">
|
|
<div class="post-entry">
|
|
<a href="#" class="thumbnail"><img src="images/img_1.jpg" alt="Image" class="img-fluid"></a>
|
|
<div class="post-entry-body">
|
|
<!--<span class="icon-pencil"></span>-->
|
|
<h3><a href="#"></a></h3>
|
|
|
|
<div class="read-more-wrap">
|
|
<!--<a href="#" class="more">Read More</a>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="post-entry">
|
|
<a href="#" class="thumbnail"><img src="images/hero_2.jpg" alt="Image" class="img-fluid"></a>
|
|
<div class="post-entry-body">
|
|
<!--<span class="icon-pencil"></span>-->
|
|
<h3><a href="#"></a></h3>
|
|
|
|
<div class="read-more-wrap">
|
|
<!--<a href="#" class="more">Read More</a>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="post-entry">
|
|
<a href="#" class="thumbnail"><img src="images/img_2.jpg" alt="Image" class="img-fluid"></a>
|
|
<div class="post-entry-body">
|
|
<!--<span class="icon-pencil"></span>-->
|
|
<h3><a href="#"></a></h3>
|
|
|
|
<div class="read-more-wrap">
|
|
<!--<a href="#" class="more">Read More</a>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="post-entry">
|
|
<a href="#" class="thumbnail"><img src="images/img_long_4.jpg" alt="Image" class="img-fluid"></a>
|
|
<div class="post-entry-body">
|
|
<!--<span class="icon-pencil"></span>-->
|
|
<h3><a href="#"></a></h3>
|
|
|
|
<div class="read-more-wrap">
|
|
<!--<a href="#" class="more">Read More</a>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="post-entry">
|
|
<a href="#" class="thumbnail"><img src="images/img_3.jpg" alt="Image" class="img-fluid"></a>
|
|
<div class="post-entry-body">
|
|
<!--<span class="icon-pencil"></span>-->
|
|
<h3><a href="#"></a></h3>
|
|
|
|
<div class="read-more-wrap">
|
|
<!--<a href="#" class="more">Read More</a>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section sec-faq">
|
|
<div class="container">
|
|
<div class="row justify-content-between">
|
|
<div class="col-lg-3 mt-4" data-aos="fade-up">
|
|
<h2 class="heading text-black" data-i18n="index.faq_heading">FAQ</h2>
|
|
|
|
</div>
|
|
<div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="accordion accordion-flush" id="accordionFlushExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="flush-headingOne">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" data-i18n="index.faq_q1">
|
|
Welche Einrichtungen bietet das Hotel an?
|
|
</button>
|
|
</h2>
|
|
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
|
|
data-bs-parent="#accordionFlushExample">
|
|
<div class="accordion-body">
|
|
<p data-i18n="index.faq_a1">Unser Hotel bietet einige Einrichtungen für einen angenehmen Aufenthalt, darunter eine Bar,
|
|
kostenfreies WLAN und kostenlose Parkplätze.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="flush-headingTwo">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo" data-i18n="index.faq_q2">
|
|
Zu welchen Zeiten kann man an- / abreisen?
|
|
</button>
|
|
</h2>
|
|
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
|
|
data-bs-parent="#accordionFlushExample">
|
|
<div class="accordion-body" data-i18n="[html]index.faq_a2">
|
|
<p>Anreisen können Sie von 15:00 bis 19:00 <br> oder nach Absprache</p>
|
|
<p>Abreisen ist von 06:00 bis 10:00 möglich</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="flush-headingThree">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree" data-i18n="index.faq_q3">
|
|
Welche Aktivitäten kann man in der Umgebung des Hotels unternehmen?
|
|
</button>
|
|
</h2>
|
|
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
|
|
data-bs-parent="#accordionFlushExample">
|
|
<div class="accordion-body">
|
|
<p data-i18n="index.faq_a3">
|
|
In der Umgebung des Hotels gibt es viele Aktivitäten, die Sie unternehmen können, wie Wandern,
|
|
Radfahren, Schwimmen,
|
|
Golfen und Besichtigungen von historischen Stätten und Sehenswürdigkeiten.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site-footer bg-light">
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="widget">
|
|
<h3></h3>
|
|
<ul class="list-unstyled float-left links">
|
|
<!--<li><a href="#">About us</a></li>
|
|
<li><a href="#">Places</a></li>
|
|
<li><a href="#">Services</a></li>
|
|
<li><a href="#">Destination</a></li>
|
|
<li><a href="#">Terms</a></li>
|
|
<li><a href="#">Privacy</a></li>-->
|
|
</ul>
|
|
</div> <!-- /.widget -->
|
|
</div> <!-- /.col-lg-3 -->
|
|
|
|
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="widget">
|
|
<h3></h3>
|
|
<ul class="list-unstyled float-left links">
|
|
<!--<li><a href="#">Travel</a></li>
|
|
<li><a href="#">Popular places</a></li>
|
|
<li><a href="#">Destination</a></li>
|
|
<li><a href="#">Tour</a></li>
|
|
<li><a href="#">Family Vacation</a></li>-->
|
|
</ul>
|
|
</div> <!-- /.widget -->
|
|
</div> <!-- /.col-lg-3 -->
|
|
|
|
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="widget">
|
|
<h3></h3>
|
|
<ul class="list-unstyled float-left links">
|
|
<!--<li><a href="#">Tour</a></li>
|
|
<li><a href="#">Swimming</a></li>
|
|
<li><a href="#">Kayak</a></li>
|
|
<li><a href="#">Surfing</a></li>-->
|
|
</ul>
|
|
</div> <!-- /.widget -->
|
|
</div> <!-- /.col-lg-3 -->
|
|
|
|
<div class="col-6 col-sm-6 col-md-6 col-lg-3">
|
|
<div class="widget">
|
|
<h3 data-i18n="common.footer.contact_heading">Kontakt</h3>
|
|
<address data-i18n="[html]common.footer.address">Seestraße 2D,<br> 52372 Kreuzau-Obermaubach</address>
|
|
<ul class="list-unstyled links mb-4">
|
|
<li><a href="tel://+4924225044866">+49(2422) 504 48 66</a></li>
|
|
<li><a href="tel://+4916084734595">+49(160) 84734 595</a></li>
|
|
<li><a href="mailto:info@hotel-obermaubach.de">info@hotel-obermaubach.de</a></li>
|
|
</ul>
|
|
|
|
<h3 data-i18n="common.footer.connect_heading">Connect</h3>
|
|
<ul class="list-unstyled social">
|
|
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
|
<!--<li><a href="#"><span class="icon-twitter"></span></a></li>
|
|
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
|
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
|
<li><a href="#"><span class="icon-pinterest"></span></a></li>
|
|
<li><a href="#"><span class="icon-dribbble"></span></a></li>-->
|
|
</ul>
|
|
|
|
</div> <!-- /.widget -->
|
|
</div> <!-- /.col-lg-3 -->
|
|
|
|
</div> <!-- /.row -->
|
|
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-12 text-center">
|
|
<p data-i18n="[html]common.footer.copyright">Copyright ©
|
|
<script>document.write(new Date().getFullYear());</script> All rights reserved | <i
|
|
class="icon-heart text-danger" aria-hidden="true"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div> <!-- /.container -->
|
|
</div> <!-- /.site-footer -->
|
|
|
|
|
|
|
|
<!-- Preloader -->
|
|
<div id="overlayer"></div>
|
|
<div class="loader">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden" data-i18n="common.loading">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/tiny-slider.js"></script>
|
|
|
|
<script src="js/flatpickr.min.js"></script>
|
|
<script src="js/glightbox.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/i18next@23.16.8/i18next.min.js"></script>
|
|
<script src="https://unpkg.com/i18next-http-backend@3.0.2/i18nextHttpBackend.min.js"></script>
|
|
<script src="js/i18n.js"></script>
|
|
|
|
<script src="js/aos.js"></script>
|
|
<script src="js/navbar.js"></script>
|
|
<script src="js/counter.js"></script>
|
|
<script src="js/custom.js"></script>
|
|
</body>
|
|
|
|
</html>
|