From 9d862eea571633eb28a0bd5e98d470054484ccb3 Mon Sep 17 00:00:00 2001
From: JoulianALS <joulianalsuliman@gmail.com>
Date: Thu, 18 Apr 2024 16:47:57 +0200
Subject: [PATCH] HTML CSS sauber

---
 Styles/style.css |   7 ++--
 index.html       | 107 ++++++++++++++++++++++-------------------------
 2 files changed, 54 insertions(+), 60 deletions(-)

diff --git a/Styles/style.css b/Styles/style.css
index 91770fe..89df9ae 100644
--- a/Styles/style.css
+++ b/Styles/style.css
@@ -4,7 +4,7 @@
     height: 70px;
 }
 
-.navbar .navbar-nav .nav-link { /* Schrift für Nav-Links ändern  */
+.navbar .navbar-nav .nav-link {
     color: #FFFFFF; 
     font-size:  13pt;
 }
@@ -17,7 +17,7 @@
     padding-left: 10px; 
 }
 
-.nav-link.selected::after { /* Über uns startet mit den Grünen-Nav-Strichen */
+.nav-link.selected::after {
     visibility: visible;
     transform: scaleX(1);
 }
@@ -28,7 +28,7 @@
     color: #FFFFFF; 
 }
 
-.nav-link { /* Animation für das die Links */
+.nav-link {
     position: relative;
     transition: all 0.3s ease-out;
 }
@@ -80,7 +80,6 @@ section {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 
-    /* Animation */
     scale: .8;
     opacity: 0;
     animation: fade-in linear forwards;
diff --git a/index.html b/index.html
index 034e262..2360709 100644
--- a/index.html
+++ b/index.html
@@ -32,12 +32,10 @@
         <!-- Über Uns Section -->
         <section class="position-relative" id="ueberUns">
             <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">
                         <div class="swiper rounded-4">
                             <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>
@@ -48,7 +46,6 @@
                         </div>
                     </div>
                     <div class="col">
-                        <!-- Text on the right -->
                         <h2>Über Uns</h2>
                         <p>Wir sind der beste Zoo aller Zoos Weltweit.<br>
                            Finanziert von the only and only Herrn Shawn Smith.</p>
@@ -88,59 +85,57 @@
         </section>
 
         <!-- Patenshop Section -->
-<!-- Patenshop Section -->
-<section id="patenshop" class="container-fluid position-relative">
-    <div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
-        <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">
+        <section id="patenshop" class="container-fluid position-relative">
+            <div class="row justify-content-center position-absolute top-50 start-50 translate-middle">
+                <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 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>
-
+            </div>
+        </section>
 
         <!-- Footer -->
         <footer class="container-fluid position-relative">
@@ -153,6 +148,6 @@
         <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>