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

Refactor CSS styles and update HTML structure for the "Über Uns" section

Browse Source
This commit is contained in:
Juwan Jouma 2024-04-18 16:23:04 +02:00
parent a90941491a
commit 8462f72479
3 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Src/zoowebseite-transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

3
Styles/style.css
View File

@ -67,7 +67,7 @@ section {
} }
#patenshop { #patenshop {
background: linear-gradient(90deg, rgb(0, 159, 155), rgb(157, 254, 175)); background: linear-gradient(0deg, rgb(255, 255, 255), rgb(157, 254, 175));
} }
@ -95,6 +95,7 @@ section {
footer { footer {
height: 160px; height: 160px;
background-color: white;
} }
.swiper { .swiper {

45
index.html
View File

@ -33,24 +33,26 @@
<section class="position-relative" id="ueberUns"> <section class="position-relative" id="ueberUns">
<div class="position-absolute top-50 start-50 translate-middle w-50 text-white"> <div class="position-absolute top-50 start-50 translate-middle w-50 text-white">
<!-- Slider on the left --> <!-- Slider on the left -->
<div class="col-6"> <div class="row align-items-center">
<div class="swiper"> <div class="col">
<div class="swiper-wrapper"> <div class="swiper rounded-4">
<!-- Slides --> <div class="swiper-wrapper">
<div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div> <!-- Slides -->
<div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div> <div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div>
<div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div> <div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div>
<div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div> <div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div>
<div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></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="swiper-pagination"></div> </div>
<div class="col">
<!-- Text on the right -->
<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>
<!-- Text on the right -->
<div class="col-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>
</section> </section>
@ -86,7 +88,7 @@
<!-- Patenshop Section --> <!-- Patenshop Section -->
<section id="patenshop"> <section id="patenshop">
<div class="container mt-5"> <div class="container">
<h2>Spendenformular</h2> <h2>Spendenformular</h2>
<form id="donationForm"> <form id="donationForm">
<div class="mb-3"> <div class="mb-3">
@ -137,14 +139,9 @@
</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>