Compare commits
26 Commits
a2fa71799e
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
032d40ef47 | ||
|
|
3fceb2490a | ||
|
|
9d862eea57 | ||
| f41c7b1589 | |||
|
|
b2b7cfaef7 | ||
| a76bf5fb2b | |||
|
|
1e61ee7223 | ||
|
|
3b4a2a1218 | ||
| 0fa9a37b3a | |||
| 4dda6c16f0 | |||
| b28f043fc3 | |||
| 901be6fde6 | |||
|
|
d19fd1e1c6 | ||
|
|
8462f72479 | ||
| a35efe4c16 | |||
|
|
a90941491a | ||
| 40c80456dd | |||
| 8e8d68c61c | |||
|
|
f2f41f6ecb | ||
| 12ab5c9c29 | |||
| 668297a1a4 | |||
| 0e68257a64 | |||
|
|
3153b437ea | ||
|
|
e17aab4e00 | ||
|
|
04b00f38f8 | ||
|
|
239204677c |
@@ -0,0 +1,44 @@
|
|||||||
|
const swiper = new Swiper('.swiper', {
|
||||||
|
direction: 'vertical',
|
||||||
|
loop: true,
|
||||||
|
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben
|
||||||
|
var navLinks = document.querySelectorAll('.navbar .nav-link');
|
||||||
|
var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
|
||||||
|
if (initialSelected) {
|
||||||
|
initialSelected.classList.add('selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
navLinks.forEach(function(link) {
|
||||||
|
link.addEventListener('click', function() {
|
||||||
|
// Alle anderen Links zurücksetzen
|
||||||
|
navLinks.forEach(l => l.classList.remove('selected'));
|
||||||
|
// Die 'selected' Klasse zum angeklickten Link hinzufügen
|
||||||
|
link.classList.add('selected');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Für Preis
|
||||||
|
updatePrice();
|
||||||
|
|
||||||
|
function updatePrice() {
|
||||||
|
const fresserchenSelect = document.getElementById('Fresserchen');
|
||||||
|
const mengeSelect = document.getElementById('Menge');
|
||||||
|
const priceInput = document.getElementById('Preis');
|
||||||
|
const selectedFood = fresserchenSelect.options[fresserchenSelect.selectedIndex];
|
||||||
|
const pricePerUnit = selectedFood.getAttribute('data-price');
|
||||||
|
const quantity = mengeSelect.value;
|
||||||
|
const total = pricePerUnit * quantity;
|
||||||
|
priceInput.value = total.toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDonationAmount() {
|
||||||
|
const priceInput = document.getElementById('Preis').value;
|
||||||
|
alert('Danke für deine Spende von €' + priceInput + '!');
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|||||||
BIN
Src/elefant.jpg
Normal file
BIN
Src/elefant.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
BIN
Src/giraffe.jpg
Normal file
BIN
Src/giraffe.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
BIN
Src/gorilla.jpg
Normal file
BIN
Src/gorilla.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
Src/loewe.jpg
Normal file
BIN
Src/loewe.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 746 KiB |
BIN
Src/zebra.jpg
Normal file
BIN
Src/zebra.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 20 KiB |
BIN
Src/zoowebseite-transparent.png
Normal file
BIN
Src/zoowebseite-transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
107
Styles/style.css
107
Styles/style.css
@@ -1,8 +1,111 @@
|
|||||||
|
/* Navigation*/
|
||||||
|
.navbar {
|
||||||
|
background-color: #212121 !important;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .navbar-nav .nav-link {
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 13pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-expand-lg .navbar-nav .nav-link {
|
||||||
|
padding-right: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand img {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.selected::after {
|
||||||
|
visibility: visible;
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active, .nav-link:hover, .nav-link:focus {
|
||||||
|
color: #4CAF50;
|
||||||
|
transition: color 0.5s ease;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: all 0.3s ease-in-out 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover::after, .nav-link:focus::after {
|
||||||
|
visibility: visible;
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
/* Navigationsende*/
|
||||||
|
|
||||||
|
|
||||||
section {
|
section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
#ueberUns {
|
||||||
height: 240px;
|
background: linear-gradient(0deg, rgb(0, 159, 155), rgb(33,33,33));
|
||||||
|
}
|
||||||
|
|
||||||
|
#openingHours {
|
||||||
|
background: linear-gradient(180deg, rgb(0, 159, 155), rgb(157, 254, 175));
|
||||||
|
}
|
||||||
|
|
||||||
|
#patenshop {
|
||||||
|
background: linear-gradient(0deg, rgb(255, 255, 255), rgb(157, 254, 175));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
padding: 30px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
|
||||||
|
scale: .8;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-in linear forwards;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table>:not(caption)>*>* {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-bottom-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
height: 160px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
width: 600px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
background-color: rgba(0, 0, 0, 1) !important
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
to { scale: 1; opacity: 1;}
|
||||||
}
|
}
|
||||||
194
index.html
194
index.html
@@ -1,6 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
<<<<<<< HEAD
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@@ -10,89 +9,57 @@
|
|||||||
<title>ZooWebsite</title>
|
<title>ZooWebsite</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Navbar -->
|
|
||||||
|
|
||||||
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
|
<!-- Navbar -->
|
||||||
<div class="container-fluid">
|
<nav class="navbar sticky-top navbar-expand-lg">
|
||||||
<a class="navbar-brand" href="#"><img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="120" height="120" class="d-inline-block align-text"></a>
|
<div class="container-fluid">
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="170" height="auto" class="d-inline-block align-text-top">
|
||||||
</button>
|
</a>
|
||||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<div class="navbar-nav">
|
<span class="navbar-toggler-icon"></span>
|
||||||
<a class="nav-link active" aria-current="page" href="#">Über uns</a>
|
</button>
|
||||||
<a class="nav-link" href="#openingHours">Öffnungszeiten</a>
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||||
<a class="nav-link" href="#">Patenshop</a>
|
<div class="navbar-nav ms-auto">
|
||||||
</div>
|
<a class="nav-link" aria-current="page" href="#ueberUns">Über Uns</a>
|
||||||
</div>
|
<a class="nav-link" href="#openingHours">Öffnungszeiten</a>
|
||||||
</div>
|
<a class="nav-link" href="#patenshop">Patenshop</a>
|
||||||
</nav>
|
</div>
|
||||||
=======
|
</div>
|
||||||
<head>
|
</div>
|
||||||
<meta charset="UTF-8">
|
</nav>
|
||||||
<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>
|
|
||||||
<a><img>logo</a>
|
|
||||||
<ul>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
>>>>>>> b6709c537aad53c77ce742111eb198c5148556eb
|
|
||||||
|
|
||||||
<!-- Über Uns Section -->
|
<!-- Über Uns Section -->
|
||||||
<section>
|
<section class="position-relative" id="ueberUns">
|
||||||
<section class="container" id="ueberUns">
|
<div class="position-absolute top-50 start-50 translate-middle w-50 text-white">
|
||||||
<div class="row">
|
<div class="row align-items-center">
|
||||||
<div class="col-md-6">
|
<div class="col">
|
||||||
<!-- Gallery -->
|
<div class="swiper rounded-4">
|
||||||
<div class="swiper">
|
<div class="swiper-wrapper">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div>
|
||||||
<!-- Slides -->
|
<div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div>
|
||||||
<div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div>
|
<div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div>
|
||||||
<div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div>
|
<div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div>
|
||||||
<div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div>
|
<div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div>
|
||||||
<div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div>
|
</div>
|
||||||
<div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div>
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<h2>Über Uns</h2>
|
||||||
|
<p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
|
||||||
|
Finanziert von the only and only Herrn Shawn Smith.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<<<<<<< HEAD
|
|
||||||
</nav>
|
|
||||||
</section>
|
</section>
|
||||||
=======
|
|
||||||
<!-- Text content -->
|
|
||||||
<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>
|
|
||||||
<h1>Öffnungszeiten</h1>
|
|
||||||
<p>Öffnungszeiten</p>
|
|
||||||
</section>
|
|
||||||
>>>>>>> b6709c537aad53c77ce742111eb198c5148556eb
|
|
||||||
|
|
||||||
<!-- Öffnungszeiten Section -->
|
<!-- Öffnungszeiten Section -->
|
||||||
<section class="container d-flex" id="openingHours">
|
<section class="position-relative" id="openingHours">
|
||||||
<div class="row justify-content-center align-self-center">
|
<div class="position-absolute top-50 start-50 translate-middle w-50 glass text-white text-center">
|
||||||
<h1 class="text-center">Öffnungszeiten</h1>
|
<h1>Öffnungszeiten</h1>
|
||||||
<br>
|
<br>
|
||||||
<table class="table">
|
<table class="table table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Tag</th>
|
<th>Tag</th>
|
||||||
@@ -118,35 +85,64 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Patenshop Section -->
|
<!-- Patenshop Section -->
|
||||||
<section>
|
<section id="patenshop" class="container-fluid position-relative">
|
||||||
<h1>Patenshop</h1>
|
<div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
|
||||||
<p>Patenshop</p>
|
<div class="col-md-8">
|
||||||
|
<form class="row g-3" onsubmit="event.preventDefault(); showDonationAmount();">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="inputFirstName" class="form-label">Name</label>
|
||||||
|
<input type="text" class="form-control" id="inputFirstName">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="inputLastName" class="form-label">Nachname</label>
|
||||||
|
<input type="text" class="form-control" id="inputLastName">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12">
|
||||||
|
<label for="inputEmail4" class="form-label">Email</label>
|
||||||
|
<input type="email" class="form-control" id="inputEmail4">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12">
|
||||||
|
<label for="IBAN" class="form-label">IBAN</label>
|
||||||
|
<input type="text" class="form-control" id="inputText">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label for="Fresserchen" class="form-label">Fresserchen</label>
|
||||||
|
<select id="Fresserchen" class="form-select" onchange="updatePrice()">
|
||||||
|
<option value="Steak" data-price="20">Steak</option>
|
||||||
|
<option value="Fisch" data-price="15">Fisch</option>
|
||||||
|
<option value="Beeren" data-price="10">Beeren</option>
|
||||||
|
<option value="Nüsse" data-price="8">Nüsse</option>
|
||||||
|
<option value="Gras" data-price="5">Gras</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label for="Menge" class="form-label">Menge</label>
|
||||||
|
<select id="Menge" class="form-select" onchange="updatePrice()">
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="Preis" class="form-label">Preis (€)</label>
|
||||||
|
<input type="text" class="form-control" id="Preis" readonly>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center mt-4">
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg shadow">Spenden</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="container-fluid d-flex bg-dark">
|
<footer class="container-fluid position-relative">
|
||||||
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" height="200" class="align-self-center">
|
<div class="position-absolute top-50 start-50 translate-middle">
|
||||||
<div>
|
<img src="Src/zoowebseite-transparent.png" width="150">
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
=======
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer>
|
|
||||||
<ul>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
<li></li>
|
|
||||||
</ul>
|
|
||||||
</footer>
|
|
||||||
>>>>>>> b6709c537aad53c77ce742111eb198c5148556eb
|
|
||||||
|
|
||||||
<!-- JavaScript -->
|
<!-- JavaScript -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||||
|
|||||||
Reference in New Issue
Block a user