Bootstrap-Website komplett: Parallax Hero, Logo, PHPMailer, responsive Banner-Bilder und neue Baumaschinen (CAT 906, Volvo ZL 302)
This commit is contained in:
179
index.html
Normal file
179
index.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!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="Professionelle Baumaschinen und Gartengeräte zu vermieten - Andreas Baumer, Traidendorf">
|
||||
<title>Andreas Baumer - Baumaschinen & Gartengeräte Verleih</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 active" href="index.html">Start</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" 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>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section py-5">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="container position-relative">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-12 text-center">
|
||||
<h1 class="display-4 fw-bold text-white mb-3">
|
||||
Professionelle Baumaschinen und Gartengeräte zu vermieten
|
||||
</h1>
|
||||
<p class="lead mb-3 text-white">
|
||||
Sie wollen Ihr Grundstück umgestalten oder neu anlegen und zusätzliche
|
||||
Neuanschaffungen vermeiden? Dann sind Sie bei uns genau richtig!
|
||||
</p>
|
||||
<p class="text-white-50">
|
||||
Wir vermieten professionelle Garten- und Baumaschinen sowohl für den
|
||||
gewerblichen Bereich, als auch für den privaten Handwerker.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Baumaschinen Section -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<h2 class="mb-4">
|
||||
<i class="bi bi-building text-primary"></i> Baumaschinen
|
||||
</h2>
|
||||
<div id="baumaschinen-container" class="row g-4">
|
||||
<!-- Wird dynamisch mit JavaScript gefüllt -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gartengeräte Section -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<h2 class="mb-4">
|
||||
<i class="bi bi-tree text-success"></i> Gartengeräte
|
||||
</h2>
|
||||
<div id="gartengeraete-container" class="row g-4">
|
||||
<!-- Wird dynamisch mit JavaScript gefüllt -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section py-5 bg-primary text-white">
|
||||
<div class="container text-center">
|
||||
<h2 class="mb-3">Haben Sie noch Fragen?</h2>
|
||||
<p class="lead mb-2">Wir sind immer bemüht, unsere Maschinenauswahl für Sie zu erweitern.</p>
|
||||
<p class="mb-4">Melden Sie sich einfach bei uns!</p>
|
||||
<a href="kontakt.html" class="btn btn-light btn-lg">
|
||||
<i class="bi bi-envelope"></i> Kontakt aufnehmen
|
||||
</a>
|
||||
</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