158 lines
7.9 KiB
HTML
158 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="Styles/style.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
|
|
<title>ZooWebsite</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar sticky-top navbar-expand-lg">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">
|
|
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="170" height="auto" class="d-inline-block align-text-top">
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
|
<div class="navbar-nav ms-auto">
|
|
<a class="nav-link" aria-current="page" href="#ueberUns">Über uns</a>
|
|
<a class="nav-link" href="#openingHours">Öffnungszeiten</a>
|
|
<a class="nav-link" href="#">Patenshop</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Über Uns Section -->
|
|
<section class="container" id="ueberUns">
|
|
<div class="row">
|
|
<!-- Slider on the left -->
|
|
<div class="col-md-6">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slides -->
|
|
<div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div>
|
|
<div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div>
|
|
<div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div>
|
|
<div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div>
|
|
<div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Text on the right -->
|
|
<div class="col-md-6">
|
|
<h2>Text on the Right</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, justo eget sagittis malesuada, leo velit lobortis orci, ac sodales lectus ipsum in libero. Phasellus hendrerit justo et risus blandit, nec ultricies ligula facilisis. Pellentesque luctus, justo id vehicula consectetur, metus tortor auctor felis, eget eleifend lorem neque eget lectus. Cras semper, velit non gravida pellentesque, elit lectus rhoncus eros, nec malesuada est nulla eu metus.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Öffnungszeiten Section -->
|
|
<section class="position-relative" id="openingHours">
|
|
<div class="position-absolute top-50 start-50 translate-middle w-50 glass text-white text-center">
|
|
<h1>Öffnungszeiten</h1>
|
|
<br>
|
|
<table class="table table-dark">
|
|
<thead>
|
|
<tr>
|
|
<th>Tag</th>
|
|
<th>Uhrzeit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Montag - Freitag</td>
|
|
<td>9:00 - 18:00 Uhr</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Samstag</td>
|
|
<td>10:00 - 15:00 Uhr</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sonntag</td>
|
|
<td>Geschlossen</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Patenshop Section -->
|
|
<section>
|
|
<div class="container mt-5">
|
|
<h2>Spendenformular</h2>
|
|
<form id="donationForm">
|
|
<div class="mb-3">
|
|
<label for="firstName" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="firstName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lastName" class="form-label">Nachname</label>
|
|
<input type="text" class="form-control" id="lastName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="bankDetails" class="form-label">Bankverbindung</label>
|
|
<input type="text" class="form-control" id="bankDetails" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="comment" class="form-label">Kommentarfeld</label>
|
|
<textarea class="form-control" id="comment" rows="3"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="itemSelect" class="form-label">Verpflegungsartikel</label>
|
|
<select class="form-select" id="itemSelect" required>
|
|
<option value="">Bitte wählen</option>
|
|
<option value="Heu">Heu</option>
|
|
<option value="Körner">Körner</option>
|
|
<option value="Nüsse">Nüsse</option>
|
|
<option value="Obst">Obst</option>
|
|
<option value="Gemüse">Gemüse</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="quantitySelect" class="form-label">Mengeneinheit</label>
|
|
<select class="form-select" id="quantitySelect" required>
|
|
<option value="">Bitte wählen</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Spenden</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="container-fluid d-flex bg-dark">
|
|
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" width="200" class="align-self-center">
|
|
<div>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
<script src="Javascript/app.js"></script>
|
|
|
|
</body>
|
|
</html>
|