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

Compare commits

base: PBA3H22AJO:668297a1a4cdc740987116c96a51708f3f3221f3
Branches Tags
PBA3H22AJO:main
...
compare: PBA3H22AJO:main
Branches Tags
PBA3H22AJO:main

20 Commits
668297a1a4 ... 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
4 changed files with 137 additions and 66 deletions
Expand all files Collapse all files

32
Javascript/app.js
View File

@@ -8,19 +8,37 @@ const swiper = new Swiper('.swiper', {
}); });
// Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben // Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben
document.addEventListener("DOMContentLoaded", function() { var navLinks = document.querySelectorAll('.navbar .nav-link');
var navLinks = document.querySelectorAll('.navbar .nav-link'); var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]'); if (initialSelected) {
if (initialSelected) {
initialSelected.classList.add('selected'); initialSelected.classList.add('selected');
} }
navLinks.forEach(function(link) { navLinks.forEach(function(link) {
link.addEventListener('click', function() { link.addEventListener('click', function() {
// Alle anderen Links zurücksetzen // Alle anderen Links zurücksetzen
navLinks.forEach(l => l.classList.remove('selected')); navLinks.forEach(l => l.classList.remove('selected'));
// Die 'selected' Klasse zum angeklickten Link hinzufügen // Die 'selected' Klasse zum angeklickten Link hinzufügen
link.classList.add('selected'); 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

23
Styles/style.css
View File

@@ -1,11 +1,10 @@
/* Navigation*/ /* Navigation*/
.navbar { .navbar {
background-color: #212121 !important; background-color: #212121 !important;
margin-bottom: 20px;
height: 70px; height: 70px;
} }
.navbar .navbar-nav .nav-link { /* Schrift für Nav-Links ändern */ .navbar .navbar-nav .nav-link {
color: #FFFFFF; color: #FFFFFF;
font-size: 13pt; font-size: 13pt;
} }
@@ -18,7 +17,7 @@
padding-left: 10px; padding-left: 10px;
} }
.nav-link.selected::after { /* Über uns startet mit den Grünen-Nav-Strichen */ .nav-link.selected::after {
visibility: visible; visibility: visible;
transform: scaleX(1); transform: scaleX(1);
} }
@@ -29,7 +28,7 @@
color: #FFFFFF; color: #FFFFFF;
} }
.nav-link { /* Animation für das die Links */ .nav-link {
position: relative; position: relative;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
@@ -59,10 +58,20 @@ section {
height: 100vh; height: 100vh;
} }
#openingHours { #ueberUns {
background: linear-gradient(90deg, rgb(0, 159, 155), rgb(157, 254, 175)); 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 { .glass {
padding: 30px; padding: 30px;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@@ -71,7 +80,6 @@ section {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
/* Animation */
scale: .8; scale: .8;
opacity: 0; opacity: 0;
animation: fade-in linear forwards; animation: fade-in linear forwards;
@@ -86,6 +94,7 @@ section {
footer { footer {
height: 160px; height: 160px;
background-color: white;
} }
.swiper { .swiper {

96
index.html
View File

@@ -11,30 +11,31 @@
<body> <body>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark"> <nav class="navbar sticky-top navbar-expand-lg">
<div class="container-fluid"> <div class="container-fluid">
<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> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <div class="navbar-nav ms-auto">
<a class="nav-link active" aria-current="page" href="#">Über uns</a> <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="#openingHours">Öffnungszeiten</a>
<a class="nav-link" href="#">Patenshop</a> <a class="nav-link" href="#patenshop">Patenshop</a>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Über Uns Section --> <!-- Über Uns Section -->
<section class="container" id="ueberUns"> <section class="position-relative" id="ueberUns">
<div class="row"> <div class="position-absolute top-50 start-50 translate-middle w-50 text-white">
<!-- Slider on the left --> <div class="row align-items-center">
<div class="col-md-6"> <div class="col">
<div class="swiper"> <div class="swiper rounded-4">
<div class="swiper-wrapper"> <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/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/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/zebra.jpg" class="img-fluid" alt="Zebra"></div>
@@ -44,10 +45,11 @@
<div class="swiper-pagination"></div> <div class="swiper-pagination"></div>
</div> </div>
</div> </div>
<!-- Text on the right --> <div class="col">
<div class="col-md-6"> <h2>Über Uns</h2>
<h2>Text on the Right</h2> <p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
<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> Finanziert von the only and only Herrn Shawn Smith.</p>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -83,20 +85,62 @@
</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>
<!-- 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" width="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>