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

Mein Teil komplett (Über uns)

Browse Source
This commit is contained in:
JoulianALS 2024-04-17 10:06:18 +02:00
parent 239204677c
commit 04b00f38f8
8 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File 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

11
Styles/style.css
View File

@ -5,4 +5,13 @@ section {
footer { footer {
height: 240px; height: 240px;
} }
.swiper {
width: 600px;
height: 300px;
}
.swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 1) !important
}

39
index.html
View File

@ -9,6 +9,7 @@
<title>ZooWebsite</title> <title>ZooWebsite</title>
</head> </head>
<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 bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
<div class="container-fluid"> <div class="container-fluid">
@ -28,30 +29,28 @@
<!-- Über Uns Section --> <!-- Über Uns Section -->
<section class="container" id="ueberUns"> <section class="container" id="ueberUns">
<div class="row"> <div class="row">
<div class="col-md-6"> <!-- Slider on the left -->
<!-- Gallery --> <div class="col-md-6">
<div class="swiper"> <div class="swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- Slides --> <!-- 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>
<!-- Text on the right -->
<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>
</div> </div>
</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 --> <!-- Öffnungszeiten Section -->
<section class="container d-flex" id="openingHours"> <section class="container d-flex" id="openingHours">