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

Compare commits

base: PBA3H22AJO:3639416d578573afcaba5d92bed516cd497b4295
Branches Tags
PBA3H22AJO:main
...
compare: PBA3H22AJO:7d7e130af3f901ba520affc2e630bf8afaf8bc91
Branches Tags
PBA3H22AJO:main

2 Commits
3639416d57 ... 7d7e130af3

Author SHA1 Message Date
JoulianALS
7d7e130af3 Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo 2024-04-17 09:36:17 +02:00
JoulianALS
0d2a9cfb41 Über Uns 2024-04-17 09:33:26 +02:00
10 changed files with 68 additions and 72 deletions
Show Stats Expand all files Collapse all files

8
Javascript/app.js
View File

@ -0,0 +1,8 @@
const swiper = new Swiper('.swiper', {
direction: 'vertical',
loop: true,
pagination: {
el: '.swiper-pagination',
},
});

BIN
Src/elefant.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 KiB

BIN
Src/giraffe.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

BIN
Src/gorilla.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 KiB

BIN
Src/loewe.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 746 KiB

BIN
Src/zebra.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
Src/zoowebseite-high-resolution-logo-transparent.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
Src/zoowebseite-high-resolution-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 20 KiB

11
Styles/style.css
View File

@ -3,6 +3,11 @@ section {
height: 100vh;
}
footer {
height: 240px;
}
.swiper {
width: 600px;
height: 300px;
}
.swiper-pagination .swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 1);
}

121
index.html
View File

@ -9,82 +9,65 @@
</head>
<body>
<!-- Navbar -->
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
<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>
<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">
<a class="nav-link active" aria-current="page" href="#">Über uns</a>
<a class="nav-link" href="#openingHours">Öffnungszeiten</a>
<a class="nav-link" href="#">Patenshop</a>
</div>
</div>
</div>
<nav>
<a><img>logo</a>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</nav>
<!-- Über Uns Section -->
<section>
<h1>Über Uns</h1>
<p>Über Uns</p>
</section>
<!-- Über Uns Section -->
<section class="container" id="ueberUns">
<div class="row">
<div class="col-md-6">
<!-- Gallery -->
<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 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 class="container d-flex" id="openingHours">
<div class="row justify-content-center align-self-center">
<h1 class="text-center">Öffnungszeiten</h1>
<br>
<table class="table">
<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>
<h1>Öffnungszeiten</h1>
<p>Öffnungszeiten</p>
</section>
<!-- Patenshop Section -->
<section>
<h1>Patenshop</h1>
<p>Patenshop</p>
</section>
<!-- Patenshop Section -->
<section>
<h1>Patenshop</h1>
<p>Patenshop</p>
</section>
<!-- Footer -->
<footer class="container-fluid d-flex bg-dark">
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" height="200" class="align-self-center">
<div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<footer>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</footer>
<!-- JavaScript -->
<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>
<!-- 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>