Bootstrap-Website komplett: Parallax Hero, Logo, PHPMailer, responsive Banner-Bilder und neue Baumaschinen (CAT 906, Volvo ZL 302)
This commit is contained in:
263
kontakt.html
Normal file
263
kontakt.html
Normal file
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Kontaktieren Sie Andreas Baumer für Baumaschinen und Gartengeräte Verleih">
|
||||
<title>Kontakt - Andreas Baumer</title>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="css/bootstrap-icons.css">
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header / Navigation -->
|
||||
<header class="sticky-top">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="images/logo_invert.png" alt="Andreas Baumer Logo" class="navbar-logo me-3">
|
||||
<div>
|
||||
<strong>Andreas Baumer</strong>
|
||||
<small class="d-block text-light-emphasis" style="font-size: 0.75rem;">Baumaschinen & Gartengeräte</small>
|
||||
</div>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Start</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="kontakt.html">Kontakt</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="impressum.html">Impressum</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Contact Bar -->
|
||||
<div class="contact-bar bg-primary-subtle py-2">
|
||||
<div class="container">
|
||||
<div class="row g-2 text-center text-lg-start">
|
||||
<div class="col-lg-4 col-12">
|
||||
<i class="bi bi-telephone-fill text-primary"></i>
|
||||
<a href="tel:+4994739515530" class="text-decoration-none text-dark ms-2">+49 (0) 9473 951 5530</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<i class="bi bi-phone-fill text-primary"></i>
|
||||
<a href="tel:+49160966074 70" class="text-decoration-none text-dark ms-2">+49 (0) 160 966 074 70</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<i class="bi bi-envelope-fill text-primary"></i>
|
||||
<a href="mailto:baumer@traidendorf.de" class="text-decoration-none text-dark ms-2">baumer@traidendorf.de</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container text-center">
|
||||
<h1 class="display-4 text-primary mb-3">Kontakt</h1>
|
||||
<p class="lead">Haben Sie Fragen zu unseren Maschinen? Kontaktieren Sie uns gerne!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Content -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<!-- Contact Information -->
|
||||
<div class="col-lg-5">
|
||||
<div class="contact-info-box">
|
||||
<h4><i class="bi bi-person-circle"></i> Andreas Baumer</h4>
|
||||
|
||||
<div class="info-item">
|
||||
<i class="bi bi-geo-alt-fill"></i>
|
||||
<div class="d-inline-block">
|
||||
<strong>Adresse</strong><br>
|
||||
Angerstraße 19<br>
|
||||
93183 Kallmünz<br>
|
||||
Ortsteil Traidendorf
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<i class="bi bi-telephone-fill"></i>
|
||||
<div class="d-inline-block">
|
||||
<strong>Telefon</strong><br>
|
||||
<a href="tel:+4994739515530">+49 (0) 9473 951 5530</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<i class="bi bi-phone-fill"></i>
|
||||
<div class="d-inline-block">
|
||||
<strong>Mobil / WhatsApp</strong><br>
|
||||
<a href="tel:+49160966074 70">+49 (0) 160 966 074 70</a><br>
|
||||
<small>Auch per WhatsApp erreichbar</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<i class="bi bi-envelope-fill"></i>
|
||||
<div class="d-inline-block">
|
||||
<strong>E-Mail</strong><br>
|
||||
<a href="mailto:baumer@traidendorf.de">baumer@traidendorf.de</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<i class="bi bi-clock-fill"></i>
|
||||
<div class="d-inline-block">
|
||||
<strong>Erreichbarkeit</strong><br>
|
||||
Montag - Freitag: Nach Vereinbarung<br>
|
||||
Wochenende: Nach Vereinbarung<br>
|
||||
<small>Bitte kontaktieren Sie uns telefonisch oder per E-Mail.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="col-lg-7">
|
||||
<div class="card shadow">
|
||||
<div class="card-body p-4">
|
||||
<h4 class="card-title mb-4">Anfrage senden</h4>
|
||||
|
||||
<!-- Erfolgs-/Fehlermeldung -->
|
||||
<div id="alertSuccess" class="alert alert-success alert-dismissible fade show d-none" role="alert">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
<strong>Vielen Dank!</strong> Ihre Nachricht wurde erfolgreich versendet. Wir melden uns in Kürze bei Ihnen.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
|
||||
<div id="alertError" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
<strong>Fehler!</strong> Ihre Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es erneut oder kontaktieren Sie uns telefonisch.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
|
||||
<form action="send-mail.php" method="POST" id="contactForm">
|
||||
<!-- Honeypot für Spam-Schutz (versteckt) -->
|
||||
<input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">Name *</label>
|
||||
<input type="text" class="form-control" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">E-Mail *</label>
|
||||
<input type="email" class="form-control" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="phone" class="form-label">Telefon</label>
|
||||
<input type="tel" class="form-control" id="phone" name="phone">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="maschine" class="form-label">Gewünschte Maschine</label>
|
||||
<input type="text" class="form-control" id="maschine" name="maschine"
|
||||
placeholder="z.B. Minibagger 2.0 Tonnen">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="zeitraum" class="form-label">Gewünschter Zeitraum</label>
|
||||
<input type="text" class="form-control" id="zeitraum" name="zeitraum"
|
||||
placeholder="z.B. 15.03.2026 - 17.03.2026">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="nachricht" class="form-label">Nachricht *</label>
|
||||
<textarea class="form-control" id="nachricht" name="nachricht"
|
||||
rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100" id="submitBtn">
|
||||
<i class="bi bi-send"></i> Anfrage senden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p class="text-muted small mb-0">
|
||||
* Pflichtfelder<br>
|
||||
Ihre Daten werden vertraulich behandelt und nur zur Bearbeitung Ihrer Anfrage verwendet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white py-5">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<h5 class="text-success mb-3">Andreas Baumer</h5>
|
||||
<p class="mb-1">Angerstraße 19</p>
|
||||
<p class="mb-1">93183 Kallmünz</p>
|
||||
<p>Ortsteil Traidendorf</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="text-success mb-3">Kontakt</h5>
|
||||
<p class="mb-1">
|
||||
<i class="bi bi-telephone"></i>
|
||||
<a href="tel:+4994739515530" class="text-white text-decoration-none">+49 (0) 9473 951 5530</a>
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
<i class="bi bi-phone"></i>
|
||||
<a href="tel:+49160966074 70" class="text-white text-decoration-none">+49 (0) 160 966 074 70</a>
|
||||
</p>
|
||||
<p>
|
||||
<i class="bi bi-envelope"></i>
|
||||
<a href="mailto:baumer@traidendorf.de" class="text-white text-decoration-none">baumer@traidendorf.de</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="text-success mb-3">Rechtliches</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<a href="impressum.html" class="text-white text-decoration-none">
|
||||
<i class="bi bi-arrow-right"></i> Impressum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="datenschutz.html" class="text-white text-decoration-none">
|
||||
<i class="bi bi-arrow-right"></i> Datenschutz
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4 bg-light">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">© <span id="year"></span> Andreas Baumer - Alle Rechte vorbehalten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Custom JS -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user