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

Compare commits

base: PBA3H22AJO:3153b437ea5469c343a1e157ccd95d831eccbe2f
Branches Tags
PBA3H22AJO:main
...
compare: PBA3H22AJO:main
Branches Tags
PBA3H22AJO:main

22 Commits
3153b437ea ... 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
4 changed files with 193 additions and 48 deletions
Expand all files Collapse all files

36
Javascript/app.js
View File

@@ -6,3 +6,39 @@ const swiper = new Swiper('.swiper', {
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

71
Styles/style.css
View File

@@ -1,12 +1,77 @@
/* 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;
} }
#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);
@@ -15,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;
@@ -30,6 +94,7 @@ section {
footer { footer {
height: 160px; height: 160px;
background-color: white;
} }
.swiper { .swiper {

134
index.html
View File

@@ -11,43 +11,45 @@
<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" class="d-inline-block align-text"></a> <a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="170" height="auto" class="d-inline-block align-text-top">
<span class="navbar-toggler-icon"></span> </a>
</button> <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="collapse navbar-collapse" id="navbarNavAltMarkup"> <span class="navbar-toggler-icon"></span>
<div class="navbar-nav"> </button>
<a class="nav-link active" aria-current="page" href="#">Über uns</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a class="nav-link" href="#openingHours">Öffnungszeiten</a> <div class="navbar-nav ms-auto">
<a class="nav-link" href="#">Patenshop</a> <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>
</div> </div>
</nav> </div>
</div>
</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> <div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></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 class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div> </div>
<div class="swiper-pagination"></div>
</div> </div>
<div class="swiper-pagination"></div>
</div> </div>
</div> <div class="col">
<!-- Text on the right --> <h2>Über Uns</h2>
<div class="col-md-6"> <p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
<h2>Text on the Right</h2> Finanziert von the only and only Herrn Shawn Smith.</p>
<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> </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>
@@ -104,6 +148,6 @@
<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>
<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="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> <script src="Javascript/app.js"></script>
</body> </body>
</html> </html>