Foodampel Produkte

public/css/desktop.css

@@ -107,13 +107,6 @@ header > p {
     border: #606060 1px solid;
 }
 
-.produkte{
-    display: inline-block;
-    margin: 10px;
-    margin-left: 8px;
-}
-
-
 .button_produkte {
     background-color: #476B1C;
     color: white;
@@ -233,3 +226,21 @@ label {
 .button_abschließen_position{
     margin-left: 100px;
 }
+
+
+.produkte{ 
+    
+    border:#606060 3px solid;
+    display: inline-block;
+    margin: 10px;
+    
+}
+
+.produktbild{
+    border:#606060 3px solid;
+   
+}
+ 
+.produktbottom{
+    margin:10px;
+}

public/produkte.html

@@ -19,7 +19,6 @@
         <nav class="navbar" style="--items: 4;">
             <a href="ueber_uns.html">Über uns</a>
             <a href="produkte.html">Produkte</a>
-
             <a href="warenkorb.html">Warenkorb</a>
             <a href="kontakt.html">Kontakt</a>
         </nav>
@@ -27,60 +26,78 @@
 
     <div class="content">
         <h1> Produkte</h1>
+
         <div class="produkte">
           <img src="pictures/karotten.png" width = "250" height="250" alt="Karotten">
+            <div class ="produktbottom">
+               <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
                 <select name="quantity">
                   <option value="1">1 Stück</option>
                   <option value="2">2 Stück</option>
                   <option value="3">3 Stück</option>
                 </select>
             </div>
+          </div>
 
           <div class="produkte">
             <img src="pictures/sellerie.png" width = "250" height="250" alt="Sellerie">
-            <select name="quantity">
+            <div class ="produktbottom">
+              <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
+              <select name="quantity" >
                 <option value="1">1 Stück</option>
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
             </div>
+          </div>
         
           <div class="produkte">
             <img src="pictures/birnen.png" width = "250" height="250" alt="Birnen">
+            <div class ="produktbottom">
+              <img src ="pictures/FoodAmpel_rot.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
                 <option value="1">1 Stück</option>
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
             </div>
+          </div>
 
           <div class="produkte">
             <img src="pictures/kiwi.png" width = "250" height="250" alt="Kiwi">
-            <select name="quantity">
+            <div class ="produktbottom">
+              <img src ="pictures/FoodAmpel_gruen.png" width = "50" height="50" alt="FoodAmpel gelb">
+              <select name="quantity" >
                 <option value="1">1 Stück</option>
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
             </div>
+          </div>
 
           <div class="produkte">
             <img src="pictures/orangen.png" width = "250" height="250" alt="Orangen">
+            <div class ="produktbottom">
+              <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
                 <option value="1">1 Stück</option>
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
             </div>
+          </div>
 
           <div class="produkte">
-            <img src="pictures/äpfel.png" width = "250" height="250" alt="Äpfel">
+            <img src="pictures/aepfel.png" width = "250" height="250" alt="Äpfel">
+            <div class ="produktbottom">
+              <img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
                 <option value="1">1 Stück</option>
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
             </div>
-            
+          </div>    
   </div>
 
     <footer>