morri/hotel-am-see
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
hotel-am-see/contact.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

272 lines
9.9 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><a href="about.html" data-i18n="common.nav.about">Über uns</a></li>
<li class="active"><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_4.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="contact.hero_heading">Kontakt</h1>
<p class="text-white-50 w-75 mx-auto" data-aos="fade-up" data-aos-delay="100"></p>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row mb-5">
<div class="col-lg-6" data-aos="fade-up">
<h2 class="heading" data-i18n="contact.messages_heading">Nachrichten</h2>
<p class="text-black-50" data-i18n="contact.messages_text">Wir sind gerne für Sie da. Haben Sie Fragen, Reservierungen, Anregungen lassen Sie gerne uns eine Nachricht zu kommen</p>
</div>
</div>
<form action="https://formspree.io/f/mayzegkr"
class="row justify-content-between"
method="POST">
<div class="col-md-6 col-lg-6" data-aos="fade-up" data-aos-delay="100">
<div class="row">
<div class="mb-3 col-lg-6">
<label for="name" class="ps-3 fw-bold mb-2" data-i18n="contact.label_name">Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="mb-3 col-lg-6">
<label for="email" class="ps-3 fw-bold mb-2" data-i18n="contact.label_email">Email</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="mb-3 col-lg-12">
<label for="message" class="ps-3 fw-bold mb-2" data-i18n="contact.label_message">Message</label>
<textarea name="message" id="message" class="form-control" cols="30" rows="10"></textarea>
</div>
<div class="col-lg-6">
<input type="submit" class="btn btn-primary text-white py-3" value="Send Message" data-i18n="[value]contact.submit">
</div>
</div>
</div>
<div class="col-md-6 col-lg-5" data-aos="fade-up" data-aos-delay="200">
<div class="row">
<div class="col-6 col-lg-6 mb-4">
<h3 class="h6 fw-bold text-secondary" data-i18n="contact.info_address_heading">Address</h3>
<p data-i18n="[html]contact.info_address">Seestraße 2 D,<br>52372 Kreuzau - Obermaubach</p>
</div>
<div class="col-6 col-lg-6 mb-4">
<h3 class="h6 fw-bold text-secondary" data-i18n="contact.info_phone_heading">Telefon</h3>
<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>
</ul>
</div>
<div class="col-6 col-lg-6 mb-4">
<h3 class="h6 fw-bold text-secondary" data-i18n="contact.info_follow_heading">Follow</h3>
<ul class="list-unstyled social-custom">
<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>
<div class="col-6 col-lg-6 mb-4">
<h3 class="h6 fw-bold text-secondary" data-i18n="contact.info_email_heading">Email</h3>
<p>
<a href="#">info@hotel-obermaubach.de</a>
</p>
</div>
</div>
</div>
</form>
</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