PBA3H22AJO/ProbelaufZoo
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects 2 Releases Wiki Activity

Compare commits

base: PBA3H22AJO:b6709c537aad53c77ce742111eb198c5148556eb
Branches Tags
PBA3H22AJO:main
..
compare: PBA3H22AJO:main
Branches Tags
PBA3H22AJO:main

29 Commits
b6709c537a ... main

Author SHA1 Message Date
JoulianALS
032d40ef47 Tutti Frutti 2024-04-18 16:54:15 +02:00
JoulianALS
3fceb2490a Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:48:00 +02:00
JoulianALS
9d862eea57 HTML CSS sauber 2024-04-18 16:47:57 +02:00
SergejJahne
f41c7b1589 Javascript kommentare 2024-04-18 16:47:42 +02:00
Juwan Jouma
b2b7cfaef7 Update position and alignment of elements in the "patenshop" section 2024-04-18 16:44:11 +02:00
SergejJahne
a76bf5fb2b U groß 2024-04-18 16:39:12 +02:00
JoulianALS
1e61ee7223 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:36:57 +02:00
JoulianALS
3b4a2a1218 Lorem Ipsum bearbeitet 2024-04-18 16:36:49 +02:00
SergejJahne
0fa9a37b3a Patenshop fertig 2024-04-18 16:36:22 +02:00
SergejJahne
4dda6c16f0 patenshop mit fluid 2024-04-18 16:29:34 +02:00
SergejJahne
b28f043fc3 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:27:32 +02:00
SergejJahne
901be6fde6 Patenshop noch kein Preis 2024-04-18 16:27:29 +02:00
Juwan Jouma
d19fd1e1c6 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 16:25:00 +02:00
Juwan Jouma
8462f72479 Refactor CSS styles and update HTML structure for the "Über Uns" section 2024-04-18 16:23:04 +02:00
SergejJahne
a35efe4c16 Patenshop weiterarbeiten 2024-04-18 16:20:03 +02:00
Juwan Jouma
a90941491a Fix link in navbar to navigate to the Patenshop section 2024-04-18 15:57:05 +02:00
SergejJahne
40c80456dd Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-18 15:51:42 +02:00
SergejJahne
8e8d68c61c Patentshop anfang 2024-04-18 15:51:37 +02:00
Juwan Jouma
f2f41f6ecb Refactor CSS styles and update HTML structure for the "Über Uns" section 2024-04-18 15:49:17 +02:00
SergejJahne
12ab5c9c29 Navbar fertiggestellt 2 2024-04-18 09:44:29 +02:00
SergejJahne
668297a1a4 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-17 23:22:10 +02:00
SergejJahne
0e68257a64 Navigation fertiggestellt 2024-04-17 23:14:22 +02:00
Juwan Jouma
3153b437ea Refactor index.html and enhance style.css with glassmorphism effect for opening hours section 2024-04-17 22:17:36 +02:00
JoulianALS
e17aab4e00 Logo Neu 2024-04-17 10:53:59 +02:00
JoulianALS
04b00f38f8 Mein Teil komplett (Über uns) 2024-04-17 10:06:18 +02:00
JoulianALS
239204677c Fertiger Commit/Merge 2024-04-17 09:56:58 +02:00
JoulianALS
a2fa71799e Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-17 09:54:37 +02:00
JoulianALS
bd9dfaa3f5 Bitte Funktionieren 2024-04-17 09:54:22 +02:00
JoulianALS
08bfdea57a Revert "Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo" 
This reverts commit 7d7e130af3, reversing
changes made to 3639416d57.
 2024-04-17 09:47:58 +02:00
4 changed files with 281 additions and 71 deletions
Expand all files Collapse all files

40
Javascript/app.js
View File

@@ -1,8 +1,44 @@
const swiper = new Swiper('.swiper', { const swiper = new Swiper('.swiper', {
direction: 'vertical', direction: 'vertical',
loop: true, loop: true,
pagination: { pagination: {
el: '.swiper-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/zoowebseite-transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

102
Styles/style.css
View File

@@ -1,13 +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;
} }
#ueberUns {
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 { .swiper {
width: 600px; width: 600px;
height: 300px; height: 300px;
} }
.swiper-pagination .swiper-pagination-bullet { .swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 1) !important
}
@keyframes fade-in {
to { scale: 1; opacity: 1;}
} }

210
index.html
View File

@@ -1,77 +1,153 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<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">
<link rel="stylesheet" href="Styles/style.css"> <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 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"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<title>ZooWebsite</title> <title>ZooWebsite</title>
</head> </head>
<body> <body>
<!-- Navbar -->
<nav>
<a><img>logo</a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<!-- Über Uns Section --> <!-- Navbar -->
<section class="container" id="ueberUns"> <nav class="navbar sticky-top navbar-expand-lg">
<div class="row"> <div class="container-fluid">
<div class="col-md-6"> <a class="navbar-brand" href="#">
<!-- Gallery --> <img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="170" height="auto" class="d-inline-block align-text-top">
<div class="swiper"> </a>
<div class="swiper-wrapper"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<!-- Slides --> <span class="navbar-toggler-icon"></span>
<div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div> </button>
<div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div> <div class="navbar-nav ms-auto">
<div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div> <a class="nav-link" aria-current="page" href="#ueberUns">Über Uns</a>
<div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div> <a class="nav-link" href="#openingHours">Öffnungszeiten</a>
<a class="nav-link" href="#patenshop">Patenshop</a>
</div>
</div>
</div>
</nav>
<!-- Über Uns Section -->
<section class="position-relative" id="ueberUns">
<div class="position-absolute top-50 start-50 translate-middle w-50 text-white">
<div class="row align-items-center">
<div class="col">
<div class="swiper rounded-4">
<div class="swiper-wrapper">
<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>
<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>
<!-- Text content --> </section>
<div class="col-md-6">
<h2>Text on the Right</h2> <!-- Öffnungszeiten Section -->
<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> <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> </div>
</div> </section>
</section>
<!-- Öffnungszeiten Section --> <!-- Patenshop Section -->
<section> <section id="patenshop" class="container-fluid position-relative">
<h1>Öffnungszeiten</h1> <div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
<p>Öffnungszeiten</p> <div class="col-md-8">
</section> <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>
<!-- Patenshop Section --> <!-- Footer -->
<section> <footer class="container-fluid position-relative">
<h1>Patenshop</h1> <div class="position-absolute top-50 start-50 translate-middle">
<p>Patenshop</p> <img src="Src/zoowebseite-transparent.png" width="150">
</section> </div>
</footer>
<!-- Footer --> <!-- JavaScript -->
<footer> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<ul> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<li></li> <script src="Javascript/app.js"></script>
<li></li>
<li></li> </body>
<li></li>
<li></li>
</ul>
</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> </html>