From ba737a7d78e27bd2c22a31ceb11a3680d60ee87c Mon Sep 17 00:00:00 2001
From: Eline Steinbrecher <2124892@stud.hs-mannheim.de>
Date: Wed, 26 Apr 2023 20:16:19 +0200
Subject: [PATCH] ausrichtung produkte

---
 public/css/desktop.css | 27 +++++++++++++++++----------
 public/produkte.html   | 18 +++++++++---------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/public/css/desktop.css b/public/css/desktop.css
index 1e7a9e2..201b034 100644
--- a/public/css/desktop.css
+++ b/public/css/desktop.css
@@ -227,20 +227,27 @@ label {
     margin-left: 100px;
 }
 
-
-.produkte{ 
-    
-    border:#606060 3px solid;
-    display: inline-block;
-    margin: 10px;
-    
+.produktueberschrift{
+    text-align: center;
+    margin:50px;
 }
 
-.produktbild{
+.parent{
+    display: flex;
+    justify-content: space-around;
+    flex-wrap:wrap;
+    align-content: center;
+}
+
+.produkte{ 
+    display: flex;
     border:#606060 3px solid;
-   
+    display: inline-block;
+    margin: 25px;
 }
  
 .produktbottom{
+    justify-content: space-between;
+    display: flex;
     margin:10px;
-}
\ No newline at end of file
+}
diff --git a/public/produkte.html b/public/produkte.html
index 0da2077..5043a79 100644
--- a/public/produkte.html
+++ b/public/produkte.html
@@ -24,11 +24,11 @@
         </nav>
     </header>
 
-    <div class="content">
-        <h1> Produkte</h1>
-
+    <h1 class = produktueberschrift> Produkte</h1>
+    
+    <div class="parent">
         <div class="produkte">
-          <img src="pictures/karotten.png" width = "250" height="250" alt="Karotten">
+          <img src="pictures/karotten.png" width = "300" height="300" alt="Karotten">
             <div class ="produktbottom">
                <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
                 <select name="quantity">
@@ -40,7 +40,7 @@
           </div>
 
           <div class="produkte">
-            <img src="pictures/sellerie.png" width = "250" height="250" alt="Sellerie">
+            <img src="pictures/sellerie.png" width = "300" height="300" alt="Sellerie">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity" >
@@ -52,7 +52,7 @@
           </div>
         
           <div class="produkte">
-            <img src="pictures/birnen.png" width = "250" height="250" alt="Birnen">
+            <img src="pictures/birnen.png" width = "300" height= "300" alt="Birnen">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_rot.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
@@ -64,7 +64,7 @@
           </div>
 
           <div class="produkte">
-            <img src="pictures/kiwi.png" width = "250" height="250" alt="Kiwi">
+            <img src="pictures/birnen.png" width = "300" height="300" alt="Kiwi">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gruen.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity" >
@@ -76,7 +76,7 @@
           </div>
 
           <div class="produkte">
-            <img src="pictures/orangen.png" width = "250" height="250" alt="Orangen">
+            <img src="pictures/birnen.png" width = "300" height="300" alt="Orangen">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
@@ -88,7 +88,7 @@
           </div>
 
           <div class="produkte">
-            <img src="pictures/aepfel.png" width = "250" height="250" alt="Äpfel">
+            <img src="pictures/birnen.png" width = "300" height="300" alt="Äpfel">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">