morri/hotel-am-see
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
hotel-am-see/about.html
Jontil88 2b462bc0e6 Initial commit: Hotel am See website with bilingual i18n (DE/EN) 
- 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>
2026-03-13 22:49:57 +01:00

333 lines
12 KiB
HTML
Raw Blame History

<!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 &mdash;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><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 class="active"><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_3.jpg')">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-8 text-center">
<h1 class="heading text-white" data-aos="fade-up" data-i18n="about.hero_heading">About us</h1>
<p class="text-white-50 w-75 mx-auto" data-aos="fade-up" data-aos-delay="100" data-i18n="about.hero_subtitle">Als familiär geführtes Hotel in der Voreifel legen wir großen Wert auf eine persönliche Atmosphäre und unvergessliche
Erlebnisse für unsere Gäste</p>
</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>
</div>
</div>
<div class="section sec-features bg-light">
<div class="container">
<div class="row mb-5">
<div class="col-lg-4" data-aos="fade-up">
<h2 class="heading" data-i18n="about.who_heading">Wer sind wir!</h2>
</div>
<div class="col-lg-6 text-start" data-aos="fade-up" data-aos-delay="100">
<p data-i18n="[html]about.who_text">Wir sind ein familiengeführtes Hotel in der wunderschönen Voreifel. Unser Hotel zeichnet sich durch eine familiäre
Atmosphäre aus, die unseren Gästen ein Gefühl von Zuhause vermittelt.<br><br>
Wir legen großen Wert darauf, dass sich unsere Gäste bei uns wohlfühlen. Wir sind stets bemüht, auf die Wünsche unserer Gäste einzugehen und einen persönlichen Service
zu bieten, der weit über das Standardmaß hinausgeht.<br><br>
Als familiär geführtes Hotel ist es uns besonders wichtig, dass unsere Gäste sich bei uns wie zuhause fühlen und
unvergessliche Erinnerungen mit nach Hause nehmen. Wir laden Sie herzlich ein, uns und unser Hotel kennenzulernen und
freuen uns darauf, Sie bald bei uns begrüßen zu dürfen.</p>
</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">
<!--<img src="images/person_1.jpg" alt="Image" class="img-fluid w-50 rounded-circle mb-4">-->
<h3 class="mb-0" data-i18n="about.team_name">Marc Nuyken</h3>
<span class="text-black-50 mb-3 d-block" data-i18n="about.team_role">Hotelier</span>
<p class="text-black-50" data-i18n="about.team_quote">"Als Familienbetrieb ist es uns eine Herzensangelegenheit, unseren Gästen einen unvergesslichen Aufenthalt zu bereiten -
wir freuen uns darauf, Sie bei uns willkommen zu heißen.</p>
<!--<a href="#" class="more d-block">Learn More</a>-->
</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-instagram">
<div class="container mb-5">
<div class="row">
<div class="col-lg-3" data-aos="fade-up">
<h2 class="heading" data-i18n="about.impressions_heading">Impressionen</h2>
</div>
<div class="col-lg-7" data-aos="fade-up" data-aos-delay="100">
<!--<p>
A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>-->
</div>
</div>
</div>
<div class="instagram-slider-wrap" data-aos="fade-up" data-aos-delay="200">
<div class="instagram-slider" id="instagram-slider">
<div class="item">
<a class="instagram-item">
<span class="icon-instagram"></span>
<img src="images/img_1.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="item">
<a class="instagram-item">
<span class="icon-instagram"></span>
<img src="images/img_2.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="item">
<a class="instagram-item">
<span class="icon-instagram"></span>
<img src="images/img_3.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="item">
<a class="instagram-item">
<span class="icon-instagram"></span>
<img src="images/img_4.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="item">
<a class="instagram-item">
<span class="icon-instagram"></span>
<img src="images/img_2.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="item">
<a class="instagram-item">
<span class="icon-instagram"></span>
<img src="images/img_3.jpg" alt="Image" class="img-fluid">
</a>
</div>
<div class="item">
<a class="instagram-item">
<span class="icon-instagram"></span>
<img src="images/img_4.jpg" alt="Image" class="img-fluid">
</a>
</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 &copy;
<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>
Reference in a new issue View git blame Copy permalink